HSB/RGB color transitions

code

#1

One of my favourite things to use are colo(u)r transitions. (I'm just going to default to the spelling of 'color', it's used like that in the app anyway and for most other programming languages)

The general idea is say you want a color transition from one color to another over a certain range of coordinates on the screen. (E.g. orange HSB(40,10,100) to green HSB(120,40,80) that starts at X = 0 and ends at X = 1024.)

I made a more interactive tutorial here:

(If you look in the preview of that link, you can see how the colour changes from one to another)

But if you want the stripped code alone here:

( (Final - initial) / coordinate range ) * (coordinate value) + initial

It might look a bit like y = mx + c if you've heard of that, and this is the basics for each of the three color channels for H,S,B/R,G,B.


where you set three numbers for the H, S, B of the initial color, and the H, S, B of the final color.

I do like to explain but I think people tend not to read walls of text even if I put pictures in between :joy: so I used the tutorial to explain more in depth interactively... let me know if you would like more info here though.


Monument Valley fan project
#2

Very cool tutorial, I like doing this sort of thing for backgrounds and such :D


#3

Cool! I'll have to look into this because I'm always looking for cool new ideas with HSBs/RGBs.


#4

Amazing tutorial! I am coding with the old version when you have to paste HSB colors into the color bubble and RGB colors doesn´t work, but if I use the newer editor on a new device I would use this for sure. Great topic :thumbsup:


#5

Ooh that inspired me to make another topic :smiley:


Edit: here is that other topic :joy: