Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Tag

Color

Chromatrons Juxtaposition

Well… I’ve more or less finished the Chromatron now so you can all not use it at your latest major inconvenience… yay!

When I published Hue Going My Way, I added the ability for you to play with a single color using rotating 3D cubes, kinda like a bad Johnny Mnemonic knock off and at the end you get a fully customized report like one of these:

Note that I added the background after the fact cuz um…Β  so perdy!

But now, due to mass underwhelming demand, though still upon a request… πŸ˜‰ I’ve also added the ability to compare colors by selecting them from images.

Groundbreaking?? Most definitely not!

Still, it kinda works and as prototypes go… that ain’t half bad!

Now, I hear some of you crying:

“But I don’t have a picture to compare with and I don’t even know where to get one!!”

~Some of You

Well don’t worry, because as always I’ve got you covered! πŸ˜‰

Given the incredibly rare nature of digital images and the extreme difficulty in obtaining them I have created some imitation digital images that you can use with this prototype.

Obviously, if these were a real digital images I’d have to charge you like… a whole bunch but since they’re just imitations I can manufacture them cheap enough that I can just give them away to everyone!

So, here are your complementary genuine imitation digital images, chew carefully because there are sharp points.

Genuine Imitation Digital Image
A Genuine Imitation Digital Image

I was going for a “Cyberpunky” feel and clearly, I half-assed it, but only so I could have the time to half-ass the graphic novel version as well!

Genuine Imitation Digital Graphic Novel Image
A Genuine Imitation Digital Graphic Novel Image

And while I was half-assing those two images above I decided to half-ass a background for the color analysis group image too, really making those two images together two-thirdly-assed and what follows then is one-thirdly-assed… but perhaps now I’m getting too technical.

Anyway, I figured some of you might want the background for the analysis image too so here’s that as well:

A One-Thirdly-Assed Background
A Chromatic One-Thirdly-Assed Background

Consequently and thusly certainly as a result of the aforementioned triadic-assery such that, ergo, under the circumstances that being the inevitable subsequent case on account of all the things whence came before and because of this, you can now see that to be the truth.

Damn!! I must have a floating point error again?!

No worries though, I’ll correct that later with a strong neodymium magnet to the head but right now I feel like it’s time to talk a little about the Chromatron before I wrap things up here and yell at all you filthy kids to get the hell off my lawn!

Hmmm… yep!! Definitely a floating point error…

The Chromatron

Here’s the link to the Chromatron App which is hosted through Github Pages:

https://geekgirljoy.github.io/Chromatron/

A link to the Chromatron prototype live preview on Chromatron.
Click for a live preview Chromatron on GitHub Pages.

It will remain available going forward / indefinitely unless I managed to piss-off somebody over there due to my expressing some of my opinions about receiving that award they gave me in which case… I guess I’ll be gettin’ canceled soon?

In any case and while supplies last, if you click the second button (the unassuming gray one with red and blue on it) in the main menu you get a screen like this:

Clicking the “Browse” buttons will let you select images to use for the comparison and you can use the imitation digital images I provided above or you can use your own real digital images if you can find them.

If you want to compare two colors in the same image, just load it twice.

Once the images are loaded the cursor will show a reticle over the image allowing you to select a color from each and when you do, the rectangle element above each image that shows the name will change to a gradient to black of the selected color.

Also once both images have a color selected, a green “Continue” button will magically appear out of thin air at the top of the page as if by the power of digital pixies wreaking havoc in your web browser… click it and the Chromatron will analyze the selected colors and generate an image like this:

You can use the “Save Image” to download the image and use the “Copy as Text” to get something similar to the following:

Your Favorite Colors:

First:
RGB: 2, 219, 255
HSL: 188.538, 100.0%, 50.4%
HEX: #02dbff
Analogous Colors: #02ffa5, #025cff
Split Complementary Colors: #02dbff, #ffa402, #ff025c
Triadic Colors: #dbff02, #02dbff, #ff02db
Tetradic Colors: #02dbff, #2602ff, #ff2602

Second:
RGB: 132, 28, 28
HSL: 0.000, 65.0%, 31.4%
HEX: #841c1c
Analogous Colors: #841c50, #84501c
Split Complementary Colors: #841c1c, #1c5084, #1c8450
Triadic Colors: #1c1c84, #841c1c, #1c841c
Tetradic Colors: #841c1c, #84841c, #1c8484


Chromatron: https://geekgirljoy.github.io/Chromatron/
Created By: https://geekgirljoy.wordpress.com/

How It Works

To keep it simple, the way these color values are derived is by converting your selected color as RGB color space values to the HSL color model… which admittedly is kinda like slathering a cube in rainbow paint made from mathematical unicorn puke and then hanging it up to dry so you can use it’s hexagonal shadow and a wand made out of a vector to scry hidden truths about the mysterious nature of color…HSL-HSV hue and chroma What follows is the typical “Oh Freyja we beseech thee…” and a human sacrifice, super boring technical stuff but why this is useful is because once you arrange color like this it’s easy to “rotate” the color using the wand er… vector and get a new but related hue or “compute” different colors that share luminosity or keep the same color and alter the saturation etc… just mix in a little color theoryΒ  and when you are done, convert back to RGB and poof your green eggs and ham are now nachos! Mmmm nachos!

Anyway, all fun stuff for sure but I’m not going to bother to explain it any further because if you care about the details, here’s the wiki article on it: https://en.wikipedia.org/wiki/HSL_and_HSV

Here’s some code in PHP & JS that demonstrates how I did it:

https://github.com/geekgirljoy/PHP/blob/master/Loose%20Code/RGB_HSL.php

https://github.com/geekgirljoy/JavaScript/blob/master/Loose%20Code/RGB_HSL.js

And as for the Chromatron, there are three main files involved:

Index.htmlhttps://github.com/geekgirljoy/Chromatron/blob/master/index.html

This file is what is loaded by your web browser first and it starts the whole process that results in a running app.

Style.csshttps://github.com/geekgirljoy/Chromatron/blob/master/assets/css/style.css

This file contains most of the “style” information that makes buttons have a certain size and color etc.

Chromatron.jshttps://github.com/geekgirljoy/Chromatron/blob/master/assets/js/chromatron.js

This file contains most of the real code that makes the Chromatron work.

And with that… please enjoy the Chromatron.


Would you like more free and open source apps like Chromatron? Consider supporting my through Patreon.

I’d like to thank Marcel for his generous and ongoing support!

But if all you can do is Like, Share, Comment and Subscribe… well that’s cool too!

Much Love,

~Joy

Hue Going My Way

So last week I chose to unleash my Machiavellian side against myself by issuing a challenge that I knew that skill-less hack would be unable to complete: Build a Chromatron and edutain the masses!

Live Preview

A link to the Chromatron prototype live preview on Chromatron.
` Click for a live preview Chromatron on GitHub Pages.

I defined these goals:
  • Functional enough to help the cherry-blossom find her favorite pink.
  • Challenge the blossom to find her color using the prototype.
  • Display relevant info at the end like… the RGB values, the hex color code and what the name of the closest color with a name is.
  • Simple enough that anyone could use it without being overwhelming.
  • Even though it’s just a prototype, epic mega geek points if I can do it in 3D.
  • Bonus points if I can make it run on mobile and desktop.
  • Additional bonus points will be awarded for unnecessary (but tasteful) skeuomorphic ornamentation and chromatic theatrics.

And… over the last week I managed to add some of the functionality required by the project which has “checked off” some of these goals and I am definitely setting myself up for a thumbs up from Simon Cowell!

Oh… wow?!, uh… tell me what you really think Simon?!

Okay, okay… well… I appreciate the constructive criticism! Also, maybe fake some impartiality as a judge next week because I’ll be here to win!

Exactly!

Anyway, let’s take a look at the Chromatron prototype. πŸ˜›

Chromatron: Hue Going My Way?

So the basic premise and reason for the Chromatron to exist is to “help you find your favorite color”.

With that in mind, I figured why not take inspiration from 20 Questions and get as close as possible to your favorite color by asking you to narrow down the list of possibilities by selecting a color that is already somewhat close to it.

It’s important to note that this doesn’t preclude you from achieving any color in the next step, but it’s a lot easier if we start closer to the desired color.

During testing I found that it was a little difficult to select a specific color on a mobile screen, so I slowed the rotation of the “Carousel of Color” a bit and then I added a color confirmation step using rotating cubes as buttons.

It’s interesting to note that these “cube buttons” specific rotation always show us their same set of sides.

Also, as they rotate, the text arrows on the buttons for the side facing us will always point opposite directions from each other.

Initially I used 3D text objects attached as “child objects” of the cube buttons but this meant that an additional 6 mesh objects per button were being rendered per frame and that isn’t mobile friendly so instead I switched to drawing text on the color gradient texture that is applied to the cubes to reduce the complexity of of the scene.

This has one unfortunate side effect though… sometimes, occasionally… the font doesn’t load when you first start the app so it substitutes Pacifico with a default font.

I should probably just build a pre-loader to fix that but let’s be honest and say I’m not going to do that for this prototype because once it’s built its highly unlikely that anyone will ever use it again, so instead I’ll just complain. πŸ˜›

“Why JavaScript? Why!? I want to like you right up until your asynchronous proclivities get in the way of our having some synchronous font loading fun!”

~GeekGirlJoy

Actually, lets be fair and acknowledge that HTTP also shares some responsibility here. πŸ˜›

Anyway, if it bugs you, press F5 on your keyboard or swipe to reload the prototype page and the font will work properly. πŸ˜›

Hmm… maybe I could try instantiating a cube button with text off screen during the Carousel interaction to insure that the font has been cashed by the time the confirmation screen is presented? That might achieve the same effect of a pre-loader without the formalism of having to build an actual pre-loader… I’ll think about it.

In any case, once you select a color you are presented with this weird scene of color and rotating cubes.

It’s probably not immediately obvious at a glance what each cube does to everyone which is likely a personal failing of my own but basically…

There are three columns and they represent Red, Green & Blue (in that order).

In the RGB color model we have white and black at the ends of the spectrum with [0,0,0] being black and [255, 255, 255] being white.

All other colors are represented as a combination of these “color channels” with a range between 0 – 255.

The thee first rows of cube buttons “increment” (add) MORE to it’s color column and the bottom three rows “decrement” (subtract) TAKE AWAY color from it’s column.

The colors of each cube represent what your color will become if you click it but it is a gradient from that color to white (first three rows) and black (bottom three rows) signifying the direction that will take the color.

This is combined with rotation, UP (first three rows) visually implying an increase in value and DOWN (bottom three rows) implying a decrease in value.

The magnitude of changes are 1, 15 and 30 in both positive and negative directions and the cube buttons are labeled as such with the color of the text being the color of the channel that the button adjusts.

These magnitude changes means that given the largest change possible (+/- 30):

255 / 30 = 8.5

So, “worst case” you can “traverse” an entire color channel from either end (0/255) in just eight clicks of a 30 cube button with a value of 15 (1/2 or 0.5 of 30) remaining.

That is why the second largest value is 15, it keeps things clean and easy with the 1 value adjustments allowing for very slight changes and when a value change would result in a number greater than 255 or less than 0 those buttons are hidden.

That mostly wraps up this week’s post other than the wallpaper but once again, here’s the links to the Chromatron prototype.

Chromatron on GitHub Pages: https://geekgirljoy.github.io/Chromatron/

And you can get the up to date code in the GitHub repo.

Chromatron on GitHub: https://github.com/geekgirljoy/Chromatron

A Wallpaper

So… it’s not hard to see why Simon wasn’t thrilled… and yet… I will continue to try!

Here’s the wallpaper for today’s post, it represents the Chromatron Hue Going My Way scene more like how I envision it. πŸ˜›

Hue Going My Way 1920x1080 Wallpaper
Hue Going My Way 1920×1080 Wallpaper

I want to thank Marcel for continuing to support my work through Patreon.

(Note to Self: Respond to his message! πŸ˜› )

Anyway, do you like free apps?! Because supporting me over on Patreon is how you get free apps!

But if all you can do is like, share, comment and subscribe, well… that’s cool too!

Much Love,

~Joy

Carousel of Color

Somewhat recently I was speaking with a certain cherry-blossom who lives on a far away tropical island where strange pocket sized monsters roam freely.

The little cherry-blossom knew that when she finally bloomed she would wear the most beautiful shade of pink the islanders had ever seen!

However, she hasn’t yet figured out what exact shade of pink to dye her petals.

Now, I thought about how I could help the little bud by running a simulation or training an artificially intelligent color bot, but I just couldn’t think of anything that could surpass a “color wall of swatches” / a gradient with some color channel plus/minus toggle buttons/sliders.

What I mean is, consider how one of Quentin Tarantino’s more bizarre characters does color:

How GIMP does color
How GIMP does color

At first glance it might seem a little intimidating but just a click on a gradient or an adjustment to a slider conveniently labeled for their RGB color channel and you can easily find just about any color you are looking for!

You can even type in a number between 0 – 255 in any of the fields or even cooler still, you can change the hex color “HTML notation” and it will change the RGB color values for you.

Don’t worry so much about the LCh sliders, they stand for Hue, Chroma & Lumanance (not in that order πŸ˜› ) and they are a somewhat more advanced color space model that you need not concern yourself with unless you are curious, but almost everyone kinda grasps the RGB color model since most of us learn it as children so it will probably be easier for most people to use those.

The thing is, this is really unsatisfying as a recommendation to give the blossom because that’s more of a technical tool than a fun app to help you find your favorite petal color.

Now… as I said I am unsure if I can improve that process, however I am willing to take crack at simplifying it!

But, me being the one duck short of a full box of quacker jacks that I am, I couldn’t bring myself to post the simple HTML RGB color picker prototype I assembled because… it just came off as so… BASIC!

As such, I resolved to challenge myself to build a better prototype!

But I needed a set of project goals & design principles…

Prototype Goals
  • Functional enough to help the cherry-blossom find her favorite pink.
  • Challenge the blossom to find her color using the prototype.
  • Display relevant info at the end like… the RGB values, the hex color code and what the name of the closest color with a name is.
  • Simple enough that anyone could use it without being overwhelming.
  • Even though it’s just a prototype, epic mega geek points if I can do it in 3D.
  • Bonus points if I can make it run on mobile and desktop.
  • Additional bonus points will be awarded for unnecessary (but tasteful) skeuomorphic ornamentation and chromatic theatrics.

These seem like lofty goals but I am confident that I can achieve at lease a few of them because I have already started building this prototype. πŸ˜›

I’m calling it Chroma-tron and although it’s far from finished (or even functional), I am hosting the code online using GitHub Pages (not a sponsor but I do have a free account) where you can see a live demo:

A link to the Chromatron prototype live preview on Chromatron.
Click for a live preview of the Chromatron prototype on GitHub Pages.

Currently it just spins and highlights the sections of the conic color model your mouse is over but the idea is that as I update the code on GitHub you will be able to follow along by previewing the updates live allowing you to see what has changed, though due to my schedule I cannot guarantee I will update the project daily but I will try to work on it as frequently as I can.

Here’s three bits of trivia about the Chromatron prototype:

  • There are 48 different colors on the “Carousel of Color”.
  • Each color does have a name.
  • When we’re finished, our prototype will be capable of representing about 16,581,375 different colors.

One other bit of information is that if this prototype works out well, I will use similar techniques to build a 3D version of my FANN Neural Network Visualizer and depending on how successful I am and how much trouble it is, we might even be able to watch the ANN “think” in real time 3D but I still have much experimentation before we get there, anyway lets talk about a wallpaper.

Wallpaper

Sadly, no wallpaper today because I’ve been super busy and haven’t had the time to finger paint something nice for you but that won’t always be the case. As a condolence prize you win a fully 3D animated rotating conic color model to enjoy instead! πŸ˜›

Also, if you just want the featured image, here you go:

The lines in the image remind me of iron filings in a magnetic field. πŸ˜›

And before I forget, here’s a link to the Chromatron prototype that you can revisit from time to time to see updates to the app.

Chromatron on GitHub Pages: https://geekgirljoy.github.io/Chromatron/

You can get the code in the GitHub repo.

Chromatron on GitHub: https://github.com/geekgirljoy/Chromatron

Anyway, I’m going to be kind to myself and keep today’s post short. πŸ˜›

Feel free to make suggestions about the app if you want to. πŸ™‚


All my content is sponsored by my patrons over on Patreon who help make free software, art and tech tutorials possible.

Today I would like to thank Marcel for their generous ongoing support but as I always say, if all you can do is like share comment and subscribe, well… that’s cool too! πŸ˜‰

Much Love,

~Joy

Joyful Color

Not sure if it’s all the Web Colors fumes or if it’s a left over side effect from that time I split RGB channels but something has me feeling a little creative! πŸ˜›

Please enjoy!

Joyfool Jester

Green Joy


If you enjoy my art please support me over on Patreon for as little as $1 a month.

But, if all you can do is like, share, comment and subscribe… well, that’s cool too! πŸ˜‰

Much Love,

~Joy

 

I Love Web Colors

Hello friends, I’m your β€œWeb Colorsβ€œ girl!

Are your colors:

βœ“ Tired?Β 

βœ“ Rundown?

βœ“ Listless?

βœ“ Do they poop out at parties?

βœ“ Are they unpopular?

The answer to all your problems is in this little bottle of Web Colors!

Web Colors contains all the Red, Green and Blue channels your colors need to spoon their way to bright vivaciousness!

So, why don’t you join the thousands of happy, peppy people, and enjoy a glass of Vitameatavegamin… er.. I mean Web Colors!

And who knows… with a little practice you will likely come to prefer the flavor over regular RGB notation because it’s shorter and as Lucy once said, It’s just like candy!

It’s so tasty, too! While being only 23% Alcohol by Volume, so no less capable! πŸ˜‰


Continue reading “I Love Web Colors”

How To Split RBG Color Channels Using PHP

Today were going to look at splitting RBG colors into separate channels.

Your reasons for wanting to do this may certainly vary but it’s likely that you broadly fall into one of these categories:

  1. You like the idea of generating art using code.
  2. You have a Neural Network that needs the ability to see in color.
  3. You want to recreate “Predator Vision”.

OK… “Predator Vision” takes a few more steps but after reading this post you will be well on your way… or the whole neural network color vision thing.

Like… you know, whatever floats your boat!

In any case, there will be something for everyone because I have included pretty pictures and code! πŸ˜›

Continue reading “How To Split RBG Color Channels Using PHP”

Blog at WordPress.com.

Up ↑

%d bloggers like this: