Add a color map to temperature values and plot them across the canvas as a continuous animation.

edited December 2017 in Questions about Code

Hello Processing,

I'm new to processing/coding in general and am trying to figure out how to run through my data set of temperature values at 17 different longitudes for consecutive years and draw them as an animation over time.

I have loaded my .csv file as a table and created temp. variables at 17 locations. I would like to use the inferno colormap seen HERE.

** Here is the code I've been working with:**

   Table table;
   int year[];
   float t1[];
   float t2[];
   float t3[];
   float t4[];
   float t5[];
   float t6[];
   float t7[];
   float t8[];
   float t9[];
   float t10[];
   float t11[];
   float t12[];
   float t13[];
   float t14[];
   float t15[];
   float t16[];
   float t17[];

   void setup() {

   size(384,270);

     table = loadTable("MyData.csv", "header");
     year = new int[table.getRowCount()];
     t1 = new float[table.getRowCount()];
     t2 = new float[table.getRowCount()];
     t3 = new float[table.getRowCount()];
     t4 = new float[table.getRowCount()];
     t5 = new float[table.getRowCount()];
     t6 = new float[table.getRowCount()]; 
     t7 = new float[table.getRowCount()];
     t8 = new float[table.getRowCount()];
     t9 = new float[table.getRowCount()];
     t10 = new float[table.getRowCount()];
     t11 = new float[table.getRowCount()];
     t12 = new float[table.getRowCount()];
     t13 = new float[table.getRowCount()];
     t14 = new float[table.getRowCount()];
     t15 = new float[table.getRowCount()];
     t16 = new float[table.getRowCount()];
     t17 = new float[table.getRowCount()];
   }
   void draw() {
     background(0);

     for (int i=0; i<table.getRowCount(); i++) {
       year[i] = table.getRow(i).getInt("YEAR");
       t1[i] = table.getRow(i).getFloat("t1");
       t2[i] = table.getRow(i).getFloat("t2");
       t3[i] = table.getRow(i).getFloat("t3");
       t4[i] = table.getRow(i).getFloat("t4");
       t5[i] = table.getRow(i).getFloat("t5");
       t6[i] = table.getRow(i).getFloat("t6");
       t7[i] = table.getRow(i).getFloat("t7");
       t8[i] = table.getRow(i).getFloat("t8");
       t9[i] = table.getRow(i).getFloat("t9");
       t10[i] = table.getRow(i).getFloat("t10");
       t11[i] = table.getRow(i).getFloat("t11");
       t12[i] = table.getRow(i).getFloat("t12");
       t13[i] = table.getRow(i).getFloat("t13");
       t14[i] = table.getRow(i).getFloat("t14");
       t15[i] = table.getRow(i).getFloat("t15");
       t16[i] = table.getRow(i).getFloat("t16");
       t17[i] = table.getRow(i).getFloat("t17");
println(year[i] + ": " + t1[i] + ", " + t2[i] + ", "  + t3[i]+ "," + t4[i] + ", " + t5[i] + ", "  + t6[i]+ "," + t7[i] + ", " + t8[i] + ", "  + t9[i]+ "," + t10[i] + ", " + t11[i] + ", "  + t12[i] + "," + t13[i] + "," + t14[i] + "," + t15[i] + "," + t16[i] + "," + t17[i]) ;

 }

 }

Any help is greatly appreciated.

Answers

  • Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

    Kf

  • Thanks for the tip.

  • So I cheated and just indexed the temperatures in my .csv and got them to print in the right locations, but it's not running through the years like I anticipated?

    My data is printing to the console at the right speed, but the colors are not updating in my canvas. Also, the year is printing all of them at once.

    Here is how I'm printing to the screen.

       void draw() {
    
         background(255);
    
         for (int i=0; i<table.getRowCount(); i++) {
           year[i] = table.getRow(i).getInt("YEAR");
           t1[i] = table.getRow(i).getFloat("t1");
           t2[i] = table.getRow(i).getFloat("t2");
          t3[i] = table.getRow(i).getFloat("t3");
           t4[i] = table.getRow(i).getFloat("t4");
           t5[i] = table.getRow(i).getFloat("t5");
           t6[i] = table.getRow(i).getFloat("t6");
           t7[i] = table.getRow(i).getFloat("t7");
           t8[i] = table.getRow(i).getFloat("t8");
           t9[i] = table.getRow(i).getFloat("t9");
           t10[i] = table.getRow(i).getFloat("t10");
           t11[i] = table.getRow(i).getFloat("t11");
           t12[i] = table.getRow(i).getFloat("t12");
           t13[i] = table.getRow(i).getFloat("t13");
           t14[i] = table.getRow(i).getFloat("t14");
          t15[i] = table.getRow(i).getFloat("t15");
          t16[i] = table.getRow(i).getFloat("t16");
           t17[i] = table.getRow(i).getFloat("t17");
    println(year[i] + ": " + t1[i] + ", " + t2[i] + ", "  + t3[i]+ "," + t4[i] + ", " + t5[i] + ", "  + t6[i]+ "," + t7[i] + ", " + t8[i] + ", "  + t9[i]+ "," + t10[i] + ", " + t11[i] + ", "  + t12[i] + "," + t13[i] + "," + t14[i] + "," + t15[i] + "," + t16[i] + "," + t17[i]);
     //noLoop();
    
    
    //println(t1[1]);
    
      //fill(0,0,255);
    
      //noStroke();
        ColourTable cTable1;
         cTable1 = new ColourTable();
      cTable1.addContinuousColourRule(0.5/6, 255,255,212);
      cTable1.addContinuousColourRule(1.5/6, 254,227,145);
      cTable1.addContinuousColourRule(2.5/6, 254,196, 79);
      cTable1.addContinuousColourRule(3.5/6, 254,153, 41);
      cTable1.addContinuousColourRule(4.5/6, 217, 95, 14);
      cTable1.addContinuousColourRule(5.5/6, 153, 52,  4);
    
    // Draw the continuous Brewer colour table.
      float inc = 0.001;
      for (float j=0; j<1; j+=inc)
      {
        fill(cTable1.findColour(j));
        stroke(cTable1.findColour(j));
        rect(width*j,10,width*inc,10);
      }
    //Draw the temperatures as a color value.
       fill(cTable1.findColour(t1[i]));
        stroke(cTable1.findColour(t1[i]));
        rect(0,200,90,height);
    
        fill(cTable1.findColour(t2[i]));
        stroke(cTable1.findColour(t2[i]));
        rect(90,200,90,height);
    
         fill(cTable1.findColour(t3[i]));
        stroke(cTable1.findColour(t3[i]));
        rect(90*1,200,90,height);
    
        fill(cTable1.findColour(t4[i]));
        stroke(cTable1.findColour(t4[i]));
        rect(90*2,200,90,height);
    
        fill(cTable1.findColour(t5[i]));
        stroke(cTable1.findColour(t5[i]));
        rect(90*3,200,90,height);
    
        fill(cTable1.findColour(t6[i]));
        stroke(cTable1.findColour(t6[i]));
        rect(90*4,200,90,height);
    
        fill(cTable1.findColour(t7[i]));
        stroke(cTable1.findColour(t7[i]));
        rect(90*5,200,90,height);
    
        fill(cTable1.findColour(t8[i]));
        stroke(cTable1.findColour(t8[i]));
        rect(90*6,200,90,height);
    
        fill(cTable1.findColour(t9[i]));
        stroke(cTable1.findColour(t9[i]));
        rect(90*7,200,905,height);
    
        fill(cTable1.findColour(t10[i]));
        stroke(cTable1.findColour(t10[i]));
        rect(90*8,200,90,height);
    
         fill(cTable1.findColour(t11[i]));
        stroke(cTable1.findColour(t11[i]));
        rect(90*9,200,90,height);
    
        fill(cTable1.findColour(t12[i]));
        stroke(cTable1.findColour(t12[i]));
        rect(90*10,200,90,height);
    
        fill(cTable1.findColour(t13[i]));
        stroke(cTable1.findColour(t13[i]));
        rect(90*11,200,90,height);
    
        fill(cTable1.findColour(t14[i]));
        stroke(cTable1.findColour(t14[i]));
        rect(90*12,200,90,height);
    
        fill(cTable1.findColour(t15[i]));
        stroke(cTable1.findColour(t15[i]));
        rect(90*13,200,90,height);
    
         fill(cTable1.findColour(t16[i]));
        stroke(cTable1.findColour(t16[i]));
        rect(90*14,200,90,height);
    
         fill(cTable1.findColour(t17[i]));
        stroke(cTable1.findColour(t17[i]));
        rect(90*15,200,90,height);
    
        textSize(50);
        fill(0);
        text(year[i], 1400, 200); 
    
         }
       }
    

    Please let me know what I'm doing wrong.

    Cheers,

  • No need to run all the files at the smae time. For starters, you can work with two or three files. After you figure out the design, then you can include all your sources.

    What is your ColorTable definition?

    Kf

  • edited December 2017

    Without seeing your ColourTable or addContinuousColourRule is isn't totally clear what your approach is -- although it looks like you are using linear interpolation of colors with step scaling -- although you aren't actually using the step scaling, your steps are all equidistant.

    The top and bottom "t1-t17" code blocks are both screaming out "I want to be in a for loop!" Those would save you ~75 lines of repetitive statements and make everything easier to read as a bonus.

    Are you planning on using Viridis, or one of the others, or all of them?

  • I'm not sure what either of you are asking, but here is a screenshot of what is printing. I couldn't figure out how to use Viridis or any of the other maps ( I wanted to use Thermal), but I'm fine with the colors I have. I was just hoping I could export my data a movie where it shows the vertical cross section for each year one after another.Screenshot (1)

  • What I meant is, you shared this code:

    ColourTable cTable1;
      cTable1 = new ColourTable();
      cTable1.addContinuousColourRule(0.5/6, 255,255,212);
    

    Ok, you create an object of class ColourTable. What is a ColourTable? What does it do?

    You didn't share the class code, so no idea how it works, or what advice to give you.

    Ok, next you call an addContinuousColourRule() method on that class. What does that do? I can guess, but again, you didn't share that code, so I don't really know for certain.

  • P.S. :

    the year is printing all of them at once.

    It is possible that you aren't calling background() to refresh the screen each frame, so the text is piling up on top of itself without old text being erased.

Sign In or Register to comment.