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.

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!

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 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/

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… 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.html – https://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.css – https://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.js – https://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