const GET_DATA_SHEET_NAME = "example_zoommaps";

​

​

​

​

// 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 (per millisecond held) manually. 1.0 = 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 apms = 0.0;

​

// caps the alpha value of a single rectangle. can be useful to prevent a single zoomed out view from obstructing other data.

let alphamax = 0.2;

​

// change these to download only a few sheets at a time if you are experiencing errors

let firstSheet = undefined; //from which sheets should it start reading

let numberOfSheets = undefined; //from  how many sheets should it download visualizations

// so to use this you would for example first set firstSheet to 0 and numberOfSheets to 3, then repeat with firstSheet set to 3, 6, 9 etc.

​

// 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 colorinterval = [];

let hsb = startcolor.slice();

let c;

let img;

let h, i, j;

let x, y, z;

let ready = false,

  setalpha = true;

let data = [];

let canvases = [];

​

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 (apms > 0) {

      setalpha = false;

    }

​

    if(!firstSheet){

      firstSheet = 0;

    }

    if(!numberOfSheets){

      numberOfSheets = data.length;

    }

    if(firstSheet + numberOfSheets > data.length){

      numberOfSheets = data.length - firstSheet;

    }

​

    for (k = firstSheet; k < firstSheet + numberOfSheets; k++) {

      let candefw = data[k].data[0][5];

      let candefh = data[k].data[0][6];

​

      images = [];

      // check how many unique images were used

      for (j = 7; 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][8 + 4 * j],

          data[k].data[0][9 + 4 * j]

        );

​

        // check which rows to visualize

        startcount = 0;

        count = 0;

        time = 0.0;

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

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

            if (startcount == 0) {

              startcount = i;

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

            }

            count++;

          } else if (startcount != 0) {

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

            break;

          }

        }

​

        colorinterval = [];

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

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

        }

​

        if (setalpha) {

          apms = 3.0 / time;

        }

​

        hsb = startcolor.slice();

​

        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],

            min(

              apms *

                (float(data[k].data[i + 1][1]) - float(data[k].data[i][1])),

              alphamax

            )

          );

​

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

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

          z = float(data[k].data[i][4].replace(/\,/, "."));

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

        }

​

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

  }

}

​