# Colours continuously changing based on array values

**URL:** <https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [October 2, 2022, 8:20am UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041 "2022-10-02T08:20:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ficus](https://avatars.discourse-cdn.com/v4/letter/f/ea666f/32.png) [@Ficus](https://discourse.processing.org/u/Ficus)\
**Post date:** [October 2, 2022, 8:20am UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041/1 "2022-10-02T08:20:32Z")

</div>

Hey all,

I have a data visualisation task for class and need to show how temperature changes over time. My idea is to have the fill react to the temperature values.

So, I have an array of float values (length is 1438) taken from a csv file and I want the fill to change based on these values.

I’ve tried using an enhanced for loop with if statements, but only the last statement seems to be in effect. However, I need to be able to see each colour change instead.

Below is my for loop and if statements. Sorry for any mistakes, I’m a total noob.

```auto
 //conditions
     for (float ai: arrayInventory) {
       if (ai > 24.00) {
    fill (heatwave [1]);
   } else {
     fill(heatwave [0]);
     }
      if (ai > 26.00) {
    fill (heatwave [2]);
   } else {
     fill(heatwave [1]);

     }
      if (ai > 28.00) {
    fill (heatwave [3]);
   } else {
     fill(heatwave [2]);

     } 
      if (ai > 30.00) {
    fill (heatwave [4]);
   } else {
     fill(heatwave [3]);

     }
      if (ai > 32.00) {
    fill (heatwave [5]);
   } else {
     fill(heatwave [4]);

     }
      if (ai > 34.00) {
    fill (heatwave [6]);
   } else {
     fill(heatwave [5]);

     }
       if (ai > 36.00) {
    fill (heatwave [7]);
   } else {
     fill(heatwave [6]);

     }
      if (ai > 38.00) {
    fill (heatwave [8]);
   } else {
     fill(heatwave [7]);

     }
     println (ai);
     
   }

```

---

<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:** [October 2, 2022, 11:18am UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041/2 "2022-10-02T11:18:15Z")

</div>

Did you look at lerpColor ()

The last parameter is amt, you can calculate it using map()

float amt=map(ai,20,40,  
0,1);

Something like this

---

<div class="post-metadata">

**Author:** ![Ficus](https://avatars.discourse-cdn.com/v4/letter/f/ea666f/32.png) [@Ficus](https://discourse.processing.org/u/Ficus)\
**Post date:** [October 2, 2022, 12:53pm UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041/3 "2022-10-02T12:53:45Z")

</div>

Thanks for the reply @Chrisir.

I tried what you recommended, but the colour is still static and not changing.

Here is the rest of my code for reference. Could it have something to do with the way I’m loading in the csv file?

```auto
// List numbers

void setup () {
  size (900,900);
  background(150);

}

void draw () {
  translate(width/2,height/2);
  stroke(0); 
  color [] heatwave = {#ffffff,#ffffcc,#ffeda0,#fed976,#feb24c,#fd8d3c,#fc4e2a,#e31a1c,#b10026};

 
// csv data 
  Table table;
  FloatList inventory;
  table = loadTable ("htd.csv");
  inventory = new FloatList();
  inventory.append(table.getFloatColumn(2));           
  float [] arrayInventory=inventory.array(table.getFloatColumn(2));

 //conditions
     for (float ai: arrayInventory) {
       color from = heatwave [1];
       color to = heatwave[8];
       float amt=map(ai,20,40, 0,1);
       color col = lerpColor (from, to, amt);
       fill (col);
       noStroke();
       println (ai);

     float mag = 350;
     float wave1 = map(sin(radians(frameCount)), -1,1,-mag,mag);
     float wave2 = map(cos(radians(frameCount)), -1,1,-mag,mag);

     ellipse (wave1,wave2,50,50);  
       
     
   }
     
     
   }
   

```

---

<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:** [October 2, 2022, 12:59pm UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041/4 "2022-10-02T12:59:39Z")

</div>

> [@Ficus](#):
>
> `float amt=map(ai,20,40, 0,1);`

Are 20 and 40 minimum and maximum values for  
ai? Is ai the right variable

**Remark**

You should move the stuff that loads or initialize  
to setup (); to make this work, you need to declare these variables globally

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 2, 2022, 1:29pm UTC](https://discourse.processing.org/t/colours-continuously-changing-based-on-array-values/39041/5 "2022-10-02T13:29:58Z")

</div>

Hello @Ficus,

Here is a tutorial that has examples with tables:  
[https://processing.org/tutorials/data](https://processing.org/tutorials/data)

> [@Ficus](#):
>
> Could it have something to do with the way I’m loading in the csv file?

You can always _print()_ or _println()_ statements to the console to examine variables.

Take a look at references for:

- `setup()`
- `draw()`

Your code is iterating through _ **all the data** _ with each `frameCount`.  
You need to iterate through data _ **one at a time** _ with each `frameCount`.

Simplified example without your arrays:

```auto
int ai;

void setup ()
  {
  size(900, 900);
  }

void draw ()
  {
  translate(width/2, height/2);
  stroke(0);

  //conditions
  //for (float ai: arrayInventory)
    {
    noStroke();
    float col = ai*255/360;
    fill(col);
    
    float mag = 180;
    float wave1 = map(sin(radians(frameCount)), -1, 1, -mag, mag);
    float wave2 = map(cos(radians(frameCount)), -1, 1, -mag, mag);

    ellipse (wave1, wave2, 50, 50);
    }
  ai++;
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/6/167b239235d1f22b2718f77680a518859ac03a0e.png)

Consider using HSB `colorMode()` for your temperature gradients:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/3/73238a8d34a42f013082ec26933af9851030a5af.png)

There is also an example that comes with Processing:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/6/f63f966ce732b265b251826ff10e82c0dfedc556.png)

`:)`