Mapping every value of an array to a color spectrum

p5.js Coding Questions
1

I have an array called numbers of incrementing values from 0 to n. I want to create an array of colors so that each value in numbers has its own color, and then later draw a line for each element in numbers, with the corresponding color, so that it forms a spectrum when drawn. How do I do this? I tried with HSB but didn’t get it quite right, because I didn’t know how to read the value from the color array for stroke().

2

Look at lerpColor in the reference

1 Like
3

Do you want all colors between e.g. 0-100 to go from blue to red, with 50 half-blue-half-red? Or do you want it like a topo e.g. map 0=blue 20=green 40=yellow 60=white 80=orange 100=red etc., with 50 half yellow half white?

4

here not use a array but show HSB color lines in a loop

as i think a array [100] what contains numbers from 0 … 99
not needed, any for loop can do that too.

unless you plan something different with it, like

5

I want something like this. just have 2 arrays with the same number of elements, one with values and the other with color values, so that element at array[i] has its pair color value at colorArray[i].

6

Then follow the good advice from @Chrisir and @kll:

Use lerpColor https://p5js.org/reference/#/p5/lerpColor

…and calculate each color with

stepColor = lerpColor(color1, color2, myColorValues[i] / maxValue);

…assuming that your minimum possible myColorValue is 0, of course. This normalizes myColorValues[i] to the range 0-1, and lerpColor.

If you wish to do a radial color distance around hue, use lerp rather than lerpColor… or use colorMode to map the value range directly using the setting

colorMode(HSB, maxValue);

https://p5js.org/reference/#/p5/colorMode

Now you can just:

stepColor = color(myColorValues[i]);

(untested)

2 Likes