Upload csv downloaded from the other sketch here

​

todo:

- HOW DOES IT WORK WITH THE SHEETS??? DOES IT LOOP THROUGH ALL THE WORKSHEETS???

- 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 :(

*/

​

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

const GET_DATA_SHEET_NAME = "zoommaps_test_2";

​

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

​

// skip a few steps when drawing the rectangles. 1 = every step is rendered

// sometimes increasing it can help make your image more clear

let step = 1;

​

// ** 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 candefw, candefh;

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

      setalpha = false;

    }

​

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

      candefw = data[k].data[0][4];

      candefh = data[k].data[0][5];

​

      images = [];

      // check how many unique images were used

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

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

        );

​

        // remove the first few logs before the participant zooms in

        let initzoom = data[j].data[1];

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

          if (

            data[k].data[i][1] == initzoom[1] &&

            data[k].data[i][2] == initzoom[2] &&

            data[k].data[i][3] == initzoom[3]

          ) {

            data[k].data[i][0] = false;

          }

        }

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

        }

​

        if (setalpha) {

          alphavalue = 3.0 / (float(count) / float(step));

        }

​

        hsb = startcolor.slice();

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

​

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

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

          z = float(data[k].data[i][3].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(c.width / 2, 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);

  }

}

​