Upload csv downloaded from the other sketch here

​

todo:

- can only generate one heatmap per unique image name rn

*/

​

// Write here the name of the sheet you want to read from

const GET_DATA_SHEET_NAME = "bubbleview_test";

​

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

// if endcolor is different from startcolor, the rectangles will gradually change color to let you track chronology

const startcolor = [360.0, 100.0, 100.0];

const endcolor = [240.0, 100.0, 100.0];

​

// set the alpha value of each rectangle manually (1=full opacity), you can play with this if your results are too transparent or not transparent enough

// if left at 0 the code will calculate its own alpha value

let alphavalue = 0.0;

​

// at 1.0 it downloads the data visualization at the size/resolution of the image you uploaded to your experiment sketch.

// change this value to download the image at a different size

const scaleImage = 1.0;

​

// ** END OF PARAMETERS **

​

​

let x, y;

let c;

let img;

let ready = false, setalpha = true;

​

​

async function setup() {

  // gather data from the sheet

  data = await getDataFromSheet(GET_DATA_SHEET_NAME);

  ready = true;

}

​

function draw() {

  noStroke();

  colorMode(HSB, 360, 100, 100, 1);

  if (ready) {

    if (alphavalue > 0) {

      setalpha = false;

    }

​

    for (k = 0; k < data.length; k++) {

      images = [];

      // check how many unique images were used

      for (j = 4; j < data[k].data[0].length; j+=4) {

        images.push(data[k].data[0][j]);

      }

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

        c = createCanvas(data[k].data[0][5 + 4 * j], data[k].data[0][6 + 4 * j]);

        // check which rows to visualize

        startcount = 0;

        count = 0;

        for(i=1;i<data[k].data.length;i++){

          if(data[k].data[i][0] == images[j]){

            if(startcount==0){

              startcount = i;

            }

            count++

          }

          else if(startcount!=0){

            break;

          }

        }

        colorinterval = [];

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

          colorinterval.push((endcolor[i] - startcolor[i]) / count);

        }

​

        if (setalpha) {

          alphavalue = 3.0 / float(count);

        }

​

        hsb = startcolor.slice();

        fill(hsb[0], hsb[1], hsb[2], alphavalue);

​

​

        for (i = startcount; i < startcount + count; i++) {

          for (ii = 0; ii < hsb.length; ii++) {

            hsb[ii] += colorinterval[ii];

          }

          fill(hsb[0], hsb[1], hsb[2], alphavalue);

​

          x = float(data[k].data[i][1]);

          y = float(data[k].data[i][2]);

          r = float(data[k].data[i][3]);

          circle(x, y, r*2);

        }

​

        // here it has to scale the canvas down by half because p5 doubles the resolution

        pg = createGraphics((scaleImage * c.width) / 2, (scaleImage * c.height) / 2);

        pg.image(c, 0, 0, pg.width, pg.height);

        resizeCanvas(pg.width, pg.height);

        image(pg, 0, 0);

        saveCanvas(c, data[k].tab.replace(/\,/, '') + images[j], "png");

      }

​

    }

    noLoop();

  }

}

​

/**

 * This function gets the data from a google sheet of the given name.

 * Make sure that you use the correct name in order to read your own data!

 *

 * Data from the sheet will only be read if it is inside of a named range.

 * More info about named ranges:

 * https://support.google.com/docs/answer/63175

 * If you have used the save function to insert data into the sheet,

 * a named range will have been constructed for you.

 *

 * @param {string} sheetName - The name of you sheet. Make sure it is from your project.

 * @return {Promise<object|void>} This function will return a list of objects.

 * Every object containing two fields.

 * the first is 'tab', this contains the name of the sheet-tab the data came from

 * the second is 'data', this contains the data from a named range as a 2D-array.

 * So to acces the a value of a range you can use 'data[0].data[1][2]'

 * Giving you the value in C2 from the first named range.

 */

async function getDataFromSheet(sheetName) {

  // Safety check

  if (!sheetName) {

    return console.error("There was no sheet name provided!");

  }

​

  // Build data request

  const requestBody = {

    sheetName: sheetName,

  };

​

  // Get the data from the server

  try {

    const response = await fetch("https://node.bykrijgsman.com/get-data", {

      method: "POST",

      mode: "cors",

      headers: {

        "Content-Type": "application/json",

      },

      body: JSON.stringify(requestBody),

    });

​

    if (response.status === 500) {

      console.error(await response.text());

      return [];

    }

​

    return (await response.json()).data;

  } catch (e) {

    // There was an error while getting data if we get here!

    console.error(e);

  }

}

​