I typically use map() for this --  http://processing.org/reference/map_.html

Hi, asymptoti.. , thank you very much for your advise!

What I want to do is to viz the hour-by-hour annual weather data by reading USA Energy Department weather file ( http://apps1.eere.energy.gov/buildings/energyplus/cfm/weather_data.cfm).

In a .epw weather file, the hour by hour readings for a entire year are recorded for a given city for variables like temperature, radiation, wind speed...

the actual data is recorded from row[8], and each column is the data for a specific variable: year, month, day, hour ...

I want to viz the data in the form of a color matrix composed of 365 columns and 24 rows, each cell is a rectangular colored by the value of a given variable (hour by hour annual solar irradiance value for London):



currently, those cells with red color are zero, and I like it to be some kind of gray color (128), and I want to use pure red(255,0,0) to indicate the max value, and pure blue(0,0,255) for min value, and maybe green(0,255,0) for the median value...

It seems my original script below didn't realized this idea:

1. void setup()
   {
     int cell_width = 4;
     int cell_height = 20; 
     int margin_horizontal = 0;
     int margin_vertical = 0;
    
     // create drawing board
     size(365*cell_width + margin_horizontal*2, 24*cell_height + margin_vertical*2);
     background(128);
    
     // specify the column to extract data
     int column_num = 16;
    
     // Load epw file as a string
     String[] data = loadStrings("GBR_London.Gatwick.037760_IWEC.epw");
    
     // find the min and max values in column of column_num
     float value_min = 0;
     float value_max = 0;
   
     for (int i=8; i<8767; i++)
     {
       float[] values_in_row_i = float(split(data[i],","));
       float value = values_in_row_i[column_num];
       if (value > value_max){
         value_max = value;
       }else if (value < value_min) {
         value_min = value;
       }
     }
    
     println("value_min: "+value_min);
     println("value_max: "+value_max);
     float value_range = value_max - value_min;
     println("value range: "+value_range);
    
     // draw a rectangular and color it with the value
     for (int i=8; i<8767; i++)
     {
       float[] values_in_row_i = float(split(data[i],","));
      
       int counter = i-7;
      
       float value = values_in_row_i[column_num];
       float value_in_0_to_1_scale = value/value_range;
      
       int x1 = floor((counter-1)/24)*cell_width + margin_horizontal;
       int y1 = (counter-floor((counter-1)/24)*24-1)*cell_height + margin_vertical;
       int x2 = x1 + cell_width;
       int y2 = y1 + cell_height;
    
       //strokeWeight(1);
       noStroke();
       colorMode(HSB, 360, 100, 100);
       fill(value_in_0_to_1_scale*360,100,100);
       rect(x1,y1,x2,y2);
      
     }
   }
   
   

(the .epw file used in the script can be downloaded from: http://apps1.eere.energy.gov/buildings/energyplus/weatherdata/6_europe_wmo_region_6/GBR_London.Gatwick.037760_IWEC.zip  which should be put in the same folder as the .pde file)

So, hope I explained my idea clearly and further advise is greatly appreciated!

- J.

I think lerpColor() might be useful.
Here is an example:

1. float[] values =  new float[100];
   int colMax = 0xffff0000;
   int colMed = 0xff00ff00;
   int colMin = 0xff0000ff;
   int curCol;
   
   
   void setup() {
     size(500, 100);
     noStroke();
     for (int i =0; i< values.length; i++) {
       values[i] = i;
     }
   }
   
   void draw() {
     for (int i = 0; i< values.length; i++) {
       // bring the values to a range between 0 and 1
       float mappedValue = map(values[i], 0, 100, 0, 1);
   
       if (mappedValue == 0) {
         curCol = 0xff808080;      // grey
       }
       else if (mappedValue < 0.5) {
         curCol = lerpColor(colMin, colMed, 2*mappedValue);      // blue to green
       }
       else {
         curCol = lerpColor(colMed, colMax, 2*(mappedValue-0.5));      // green to red
       }
   
       fill(curCol);
       rect(i*5, 0, 5, 100);
     }
   }
   

cool, benja! it's what i'm looking for. thanks a lot!

You may like to consider using  giCentre Utilities for creating colour schemes. This has the advantage of doing the colour interpolation work for you between a range of different colour paths. And importantly has a host of preset colour schemes (from  ColorBrewer.org) that have been experimentally tested to be effective in discriminating values across your range (as an aside, blending between saturated red and saturated blue will give colour schemes that can be difficult to interpret without bias).

thank you very much, Jo! this is even more handy!

I'll try both ways and post an update of the script later.

Hi, Jo,

I can't find the BU_YL_RD kind of color code.

Is it possible to customize it by myself?

I just want a color legend with red being larger value and blue being small value and maybe yellow/green in the middle.

Thanks again!

- J

Thank you very much for your detailed guidances, Jo!

really learnt a lot !

- J

Hi, everybody who helped me,

I'd like to show the cells one by one in about half second interval for top to bottom and from left to right (like a cool CT scan animation). Somehow the forum search suggests that pause/delay can't be implemented inside a for loop.

May I ask advises on how to animate object created in a for loop in certain interval? (maybe I should start a new post)

Thanks in advance!

some update: add a color legend



here's the latest scripts:

1. // coded by Ji Zhang
   // Sep 2012
   
   // Acknowledgement: Jo Wood for the giCentre Utilities library
   
   import org.gicentre.utils.colour.*;
   
   void setup()
   {
     // define cell size and margin size
     int cell_width  = 4;
     int cell_height = 20; 
     int margin_horizontal = 120;
     int margin_vertical   = 70;
     float color_legend_band = 20;
   
     // create drawing board
     int board_width = 365*cell_width + margin_horizontal + 30;
     int board_height = 24*cell_height + margin_vertical*2;
     size(board_width, board_height);
     colorMode(HSB, 360, 100, 100);
     background(200);
   
     // specify the column to extract data
     int column_num = 16;
   
     // Load epw weather file as a string
     // source of epw weather file: http://apps1.eere.energy.gov/buildings/energyplus/weatherdata/6_europe_wmo_region_6/GBR_London.Gatwick.037760_IWEC.zip
     String[] data = loadStrings("./GBR_London.Gatwick.037760_IWEC.epw");
     //String[] data = loadStrings("./SGP_Singapore.486980_IWEC.epw");
   
     // find the min and max values in the column number "column_num"
     float value_min = 0;
     float value_max = 0;
   
     for (int i=8; i<8768; i++)
     {
       float[] values_in_row_i = float(split(data[i], ","));
       float value = values_in_row_i[column_num];
       if (value > value_max) {
         value_max = value;
       }
       else if (value < value_min) {
         value_min = value;
       }
     }
   
     //  println("value_min: "+value_min);
     //  println("value_max: "+value_max);
     //  float value_range = value_max - value_min;
     //  println("value range: "+value_range);
   
     // define color scheme
     //ColourTable cTable = ColourTable.getPresetColourTable(ColourTable.ORANGES,value_min,value_max);
     //ColourTable cTable = ColourTable.getPresetColourTable(ColourTable.RD_YL_BU,0,1);
   
     // define a Kelvin color scale1
     //  ColourTable cTable = new ColourTable();
     //                             // Value,Red,Grn,Blu
     //  cTable.addContinuousColourRule(0,   144,207,255);  // Blue
     //  cTable.addContinuousColourRule(0.4, 206,255,255);  // Pale blue
     //  cTable.addContinuousColourRule(0.6, 238,255,163);  // Yellow-green.
     //  cTable.addContinuousColourRule(0.7, 247,241, 50);  // Yellow.
     //  cTable.addContinuousColourRule(0.8, 240,165,  0);  // Orange.
     //  cTable.addContinuousColourRule(1,   236,  0, 26);  // Red.
   
     // define a Kelvin color scale2
     ColourTable cTable = new ColourTable();
     // Value,Red,Grn,Blu
     cTable.addContinuousColourRule(0, 0, 0, 255);  // Blue
     cTable.addContinuousColourRule(0.4, 206, 255, 255);  // Pale blue
     cTable.addContinuousColourRule(0.6, 238, 255, 163);  // Yellow-green.
     cTable.addContinuousColourRule(0.7, 247, 241, 50);  // Yellow.
     cTable.addContinuousColourRule(0.8, 240, 165, 0);  // Orange.
     cTable.addContinuousColourRule(1, 255, 0, 0);  // Red. 
   
     // draw a rectangular and color it with the value
     for (int i=8; i<8768; i++)
     {
       float[] values_in_row_i = float(split(data[i], ","));
       float value = values_in_row_i[column_num];
       float value_in_0_to_1_scale = map(value, value_min, value_max, 0, 1);
   
       int counter = i-7;      
   
       int x1 = floor((counter-1)/24)*cell_width + margin_horizontal;
       int y1 = (counter-floor((counter-1)/24)*24-1)*cell_height + margin_vertical;
   
       colorMode(HSB, 360, 100, 100);
       strokeWeight(0);
       //noStroke();
   
       // color the rect by value
       if (value==0) {
         fill(0); // color rect if its value is zero
       }
       else {
         fill(cTable.findColour(value_in_0_to_1_scale));
       }
   
       //fill(cTable.findColour(value));
       //fill(cTable.findColour(value_in_0_to_1_scale));
   
       rect(x1, y1, cell_width, cell_height);
     }
   
     // draw color legend
     float color_band_increment = (value_max - value_min)/(color_legend_band-1);
     float color_band_cell_height = (cell_height*24)/color_legend_band;
     print(color_band_cell_height);
     float value_in_color_legend;
   
     for (int i=1; i<color_legend_band+1; i++) {
       // draw legend color cells
       float legend_x1 = margin_horizontal/8;
       float legend_y1 = margin_vertical+(i-1)*color_band_cell_height;
       value_in_color_legend = value_min + (i-1)*color_band_increment;
       float value_in_color_legend_in_0_to_1_scale = map(value_in_color_legend, value_min, value_max, 0, 1); 
       fill(cTable.findColour(value_in_color_legend_in_0_to_1_scale));
       rect(legend_x1, legend_y1, margin_horizontal/8*3, color_band_cell_height);
   
       // legend text
       fill(0);
       textSize(color_band_cell_height/5*3);
       text(floor(value_in_color_legend), margin_horizontal/8*4, legend_y1+color_band_cell_height);
     }
   }