Upload csv downloaded from the other sketch here

​

todo:

- make less ugly / more readable

- upload multiple csv (loop through multiple worksheets?)

- its easier to see over the image if you put a low opacity fill in between it and the image im not sure if theres a way to set the colors to make this superfluous

- for some inexplicable reason when doing saveCanvas it doubles the width and height. this is stupid and im sure theres a fix but right now all ive got is to just make the canvas half as big :(

- because of this i also had to do something stupid with the coords in the other sketch uh oh

*/

​

​

// here you can set the color of the heatmap in RGB

// if you want to see a color shift to track chronology, make endcolor different from startcolor

const startcolor = [255.0, 0.0, 0.0];

const endcolor   = [0.0, 0.0, 255.0];

let rowskip = 5;

​

let candefw = 200, candefh = 200;

​

let colorinterval = [];

let rgb = startcolor;

let c;

let img;

let i, j;

let x, y, z;

​

function preload(){

  //DATA INPUT!!!

  table = loadTable('new.csv', 'csv', 'header');

}

​

function setup() {

  candefw = table.columns[5]; 

  candefh = table.columns[6];

  c = createCanvas(table.columns[3]/2, table.columns[4]/2);

  rows = table.getRowCount();

}

​

function draw() {

  noStroke();

  for(i=0;i<startcolor.length;i++){

    colorinterval.push( (endcolor[i] - startcolor[i]) / rows * rowskip ); }

    fill(rgb[0], rgb[1], rgb[2], 1);

  for(i=0;i<rows;i+=rowskip){

    for(j=0;j<rgb.length;j++){

      rgb[j] += colorinterval[j]; 

    }

    fill(rgb[0], rgb[1], rgb[2], 1);

    x=table.getNum(i,0);

    y=table.getNum(i,1);

    z=table.getNum(i,2);

    rect(x,y,candefw*z,candefh*z);

  }

  saveCanvas(c, 'heatmap', 'png');

  noLoop();

}