Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Tag

Chromatron

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

Vote For Love

I missed last week’s performance… and it only stood to prove Simon Cowell’s harsh criticisms of me correct!

The rain could have excused away the trails of cracked mascara that jutted from my eyes yet I made no effort to hide my shame.

I sat outside the closed venue on my hands and knees while the mizzel and spit lashed against my face and hid the deluge of failure I was feeling… I’ll never be anything, I cried!

The camera slowly ascended and retreated far, far away from me while Fraunhofer Diffraction’s “…Into Nothingness” drowned out the sounds of my painful full-snot sobbing…

Is… what my “Writer Bot” suggested I should say is the reason why I didn’t write a post last week! πŸ˜›

I mean, not bad… and that intro did get you interested in reading this post, right? πŸ˜‰

Personally, that’s not quite the “tone” I was going for and I’m a little worried about the implications and consequences for my future having effectively taught a machine how to lie… I fear, is murder next? History will certainly not look kindly upon me and I’ve doomed all of humanity!

Sorry, Writer Bot also told me to say that too! πŸ˜›

Okay, putting Writer Bot’s unfounded and overly melancholic lies and accusations towards me aside, it’s true I didn’t write a post last week because I didn’t end up having the time to finish the “ChroMyGoodness” color “analysis” portion until late in the week and although I might have been able to squeak out a post with Writer Bot’s help like I am this week, instead I opted to use the extra free time to further Xavier’s homeschooling, he can now count by fives and say the numeric values for numbers up to 1 million (i.e. 314159 – “Three hundred fourteen thousand one hundred fifty-nine”) and basically has the alphabet down with the occasional letter prompt here and there (usually N or O which he sometimes skips, which might explain why he selectively ignores me sometimes when I tell him no… πŸ˜› ) as he rushes to the end as proudly and quickly as he can. πŸ™‚

So now we’re working on word recognition and simple addition and subtraction problems. Subtraction is still not his thing and although he now sees value in the alphabet he still prefers numbers over letters learning-time.

Additionally, I’m constantly working on expanding his vocabulary!

Also, I used the time to do some self-care.

I got a little extra (okay any/some) exercise πŸ˜› , I fasted a little and made a few nutritional improvements to my diet.

I slept more and believe it or not, the perma-dark bags under my eyes even disappeared for a couple of days, though that DIY coconut oil hydration mask I MacGyverly fashioned out of a spare paper towel probably helped a little and in any case… you guys and gals didn’t get a post but I got just a little taste of Xanadu! πŸ˜›

Well, that is until I looked at the news recently and saw Jackie Chan’s house got repoed!

Oh and also all the rioting… and looting… and raping… and murders… and guillotines being erected… along with more calls to “defund the police”, which to me seems like a really stupid idea at this point because all that’s going to do is make everyone less safe!

Like… I just saw a report the other day that a woman stepped off the subway onto an above ground station platform and she was immediately thrown to the ground, groped and almost raped in broad daylight!

That’s so fucking horrible!

Thankfully bystanders had the thought to grab their phones and record videos of her attack rather than, you know… stepping in to stop it! Oddly enough that did have the effect of causing the attacker to climb off her and the attacker was arrested, so I guess there’s that. :-/

But, how about we contemplate “the next time” something like this happens.

Let’s say you, your spouse/significant other/child/parent/grandparent are the target/victim… and we do/did indeed “defund the police”.

Let’s say the attacker is armed and nobody is coming to your or their aid… do you still feel so confident about the sentiment “defund the police”?

It doesn’t matter what gender or race you are, you are vulnerable and logic forbid someone target’s a child!!!

I think that it is reasonable to say that we need to figure out how to better to train and employ “law enforcement” to meet our needs as a civil society and that might mean completely new ways of solving the types of problems and situations police face.

I don’t see anything inherently wrong with that.

But our conversations should be about how to make things better, not worse and I firmly believe reform is better than abolition and before you go accusing me of being too one way or the other, I am not a Democrat or a Republican, though I am not criticizing you if you are.

I’m something a lot more interesting and at times confusing, called a “Libertarian”.

Sometimes we’re broadly described as being “culturally liberal and fiscally conservative”, i.e. sometimes politically I will fall to your “left” and sometimes I will fall to your “right”.

I said it was confusing! πŸ˜›

But, if you ask me to imagine myself in that “what I think I do” meme…, I would say that my political leanings mean that I expend a lot of effort in trying to have as little power and control over other people as possible and I desire the same for myself where they are concerned.

At this point you may be tempted to assume that statement means that I am careless, selfish and want to screw everyone to get my way, but that’s not the case!

What I tend to strive for is the ideal of I’ll leave you alone if you are not hurting anyone and in return please leave me alone if I’m not hurting anyone.

Here’s a quote from the official Libertarian party preamble that I think sums up my general political philosophy:

“We believe that respect for individual rights is the essential precondition for a free and prosperous world, that force and fraud must be banished from human relationships, and that only through freedom can peace and prosperity be realized.

Now, of course I don’t walk lockstep with the party on all issues but I generally believe in human interactions that involve no use of any form of coercion or force whenever and wherever possible, with the exception of self defense and in the defense of others… or, you know… in video games where you should feel free to “roll play” to your weaselly dark hearts content! πŸ˜›

So please do not assume you automatically know what I think or make me out to be something that I am not!

I have friends and readers on “the left” & “the right” who agree that we must cooperate to find solutions to our problems and not simply tear each other down.

Whitney Huston magnificently sang:

“Oh, I wanna dance with somebody!”

~Whitney Huston

But she also sang…

“I believe the children are our future, teach them well and let them lead the way”

~Whitney Huston

Now I do agree that the children are our future, however I also believe that we are the future children of the past and that makes us the present and WE must lead the way to build a more peaceful and prosperous future FOR EVERYONE and it will not come through the use of violence!

Further, I believe it’s time we all stand together and demand peace and an end to all the senseless violence we see at home and in communities around the world!

Every day in the news it’s something new and horrible, but we can all do something about it!

Soon, the United States will vote for President and whether you intend to re-elect President Donald Trump or you intend to vote for a President Kamala Harris I’d just like to say that now you have an alternative, because I am officially announcing today my candidacy for President of the United States!

My campaign slogan is:

“A Vote For Joy Is A Vote For Love!”

Isn’t that just wonderful?!

And… sure, I’m totally abusing all my skillz as a propagandist to unauthorizedly take advantage of some seriously convenient lyrics in the TIAMAT song “Vote For Love”:

#PleaseDontSue!!! πŸ˜›

Further… the answer is yes, that is a bit kitschy, however my internal campaign polls indicate that sort of thing is really “YEET” with all the key demographics!

YEET
YEET

Oh yeah, so also… before I end this shorter than usual post in favor of my sanity and to plan my campaign, I updated the Chromatron prototype and you can still view a live version on GitHub.io while I am developing it and it will continue to be available once it’s finished.

As I mentioned above somewhere I finished the “ChroMyGoodness” section at the end of the “Carousel of Colors” which allows you to save an image or copy as text the color info that the app generates.

I also added a “Main Menu” so that I can add additional features though currently the only additional feature I have planned is a color comparison of a selected pixel in two images.

Here’s the links to view the Chromatron app:

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

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

 

And in any case, this coming November do as the Babylonian sea dragon goddess sang, “It’s about time we all get out and vote for love”… vote for Joy in 2020!

I pledge four years of no malarkey while we work together to keep making America great again, again… again!

Vote For Love 1920x1080 Wallpaper
Vote For Love 1920×1080 Wallpaper

If you’d like to NON-tax-deductibly “support the cause”, I have a Patreon account.

Now, I can’t say that he “supports the cause” but he likes some of my code and I’d like thank Marcel over on Patreon for continuing to value and support my ongoing contributions to the PHP-FANN community.

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

Blog at WordPress.com.

Up ↑

%d bloggers like this: