Colours continuously changing based on array values

Processing Beginners
1

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.

 //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);
     
   }
1 Like
2

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

3

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?

// 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);  
       
     
   }
     
     
   }
4

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

5

Hello @Ficus,

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

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:

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
image602×639 24.7 KB

Consider using HSB colorMode() for your temperature gradients:

image
image602×639 40.8 KB

There is also an example that comes with Processing:

image

:)