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!


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!”


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:

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

Chromatron on GitHub:

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,