3

I recently played Stack from Ketchapp Studios on my android phone. I really liked the concept. And then, I came up with a question. How would these guys make the transition in color of the cubes using some automated method, looping through color values?

Assume that they uses hex or rgb() values, how would they make that nice transition? What values would they update and with what steps? I have studied color theory in the past, but I'm not sure how to answer the above question.

Some images that shows this color change:

enter image description here enter image description here

Update

After some discussion in the comments I would like to point out some few things. @Cai suggests it is possible to use predefined values for my colors. I'm a developer not a designer (not so much at least). I always want to use only as much space as I need in my variables. An array of predefined colors will use more resources than using a loop statement to change values.

Improve this question
8
  • Could you provide some more examples? It's hard to say one thing in particular from the images that you give
    – Zach Saucier
    Commented May 30, 2016 at 19:37
  • @ZachSaucier what do you want me to post? I can't explain it further cause the question is exactly what I posted. Do you want images? See the bellow cubes. Their color are darker. As we climb we get warmer colors.
    – user67695
    Commented May 30, 2016 at 19:57
  • Some more images of the higher it goes would help. Do the colors always start the same and change in the same order?
    – Zach Saucier
    Commented May 31, 2016 at 0:28
  • What makes you think the color change is an automated pattern, rather than a predefined set of colors?
    – Cai
    Commented May 31, 2016 at 7:57
  • @Cai well I'm developer not designer (not so much at least). I always think to use as much space as I need in my variables. If I use a array of predefined colors I will need more resources in my computer that to use a variable and change the value using a loop statement. I understand your point, just I wonder if there is some other way.
    – user67695
    Commented May 31, 2016 at 8:52

2 Answers 2

Reset to default
2

Interpolating color works exatly the same as interpolating in space. It is just that the color space is a bit peculiar in general. Its not often very fruitfull to interpolate in RGB directly, though that works quite well if you use some kind of linear, piecewice linear or spline interpolation.

It is often a good idea to interpolate in Lab space, or if you want to be somehow really pedantic use some space corrected for tha data of Munsell. Or you can use a HSB/HSL space and rotate about in that space instead. Depends on what you need really.

Here is a example of alpha blend which is equal to linear interpolation between 2 colors.

Improve this answer
4
  • Thank you for te answer jooja. But I lost you from the very first word. I really didn't get anything from any of your words. Can you please explain it to me more? Add some links as reference. I like the Troxler answer but you can give a more theoretical one. Thank you for your time. Remember that this answer can be reference to others. :)
    – user67695
    Commented May 31, 2016 at 15:20
  • Interpolation =between poles, generating values beween values. Spline kind of controllable curve used for interpolation. Lab, colorspace describing human visual range where distance equals to distance between human perception. Used by scientists. HSL and hsb color in cylindrical coordinates. @GeorgeGkas
    – joojaa
    Commented May 31, 2016 at 15:48
  • If it were me, I would pick HSB, set saturation and brightness to fixed values. This leaves "Hue" which, IIRC is a polar coordinate system. I would then pick a start H; a goal H; and a fixed number of steps (try 8). I would then calculate the 8 hue values and store them. This is a very small array (int*8). When you get to the goal, select a new target and recalculate. You can use byte instead if int if you treat the stored value (0-255) as an encoding of values (0-359) (this is lossy, but probably not a problem for the use-case)
    – Yorik
    Commented May 31, 2016 at 20:09
  • great edit! Accepted!
    – user67695
    Commented Jun 2, 2016 at 6:59
0

I haven't played this game yet, but as far as I can see are these HSB/HSL transitions (two of the tree values hue, saturation, luminance always stay constant when fading).

Unless thats wrong, I assume that it's done by a function, calculating HSB/HSL into RBG colors:

ex. in Java, assuming you are using java.awt.Color

Color c = Color.getHSBColor(hue, saturation, value);
String rgb = Integer.toHexString(c.getRGB());

A random number will be generated and one of these 3 HBL/HSL values will be changed to the generated value. Another number will be generated for the length of the transition.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.