# Mapping every value of an array to a color spectrum

**URL:** <https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868>\
**Category:** Coding Questions\
**Created:** [May 3, 2019, 9:28am UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868 "2019-05-03T09:28:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lavina](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@lavina](https://discourse.processing.org/u/lavina)\
**Post date:** [May 3, 2019, 9:28am UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/1 "2019-05-03T09:28:13Z")

</div>

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().

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 3, 2019, 9:37am UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/2 "2019-05-03T09:37:08Z")

</div>

Look at `lerpColor` in the reference

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 4, 2019, 12:37pm UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/3 "2019-05-04T12:37:25Z")

</div>

> [@lavina](#):
>
> so that each value in numbers has its own color

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 4, 2019, 1:03pm UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/4 "2019-05-04T13:03:42Z")

</div>

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

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/a87kXow2s)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

> [@lavina](#):
>
> an array called numbers of incrementing values from 0 to n.

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

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/v4hWBOY-E)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![lavina](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@lavina](https://discourse.processing.org/u/lavina)\
**Post date:** [May 4, 2019, 8:49pm UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/5 "2019-05-04T20:49:05Z")

</div>

I want something like [this](https://puu.sh/DnRiK.png). 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].

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 4, 2019, 9:32pm UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868/6 "2019-05-04T21:32:03Z")

</div>

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

Use lerpColor [https://p5js.org/reference/#/p5/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](https://p5js.org/reference/#/p5/colorMode)

Now you can just:

```
stepColor = color(myColorValues[i]);

```

(untested)