Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Month

August 2020

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

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: