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 = "importannots_test_2";

​

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

const fillcolor = [300.0, 100.0, 100.0];

const strokecolor = [300.0, 100.0, 100.0];

​

// set the alpha value of the shapes manually (1.0=full opacity)

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

let fillalpha = 0.3;

let strokealpha = 1.0;

​

// set size of numbers, set to 1 to make text invisible

const textsize = 18;

​

// 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() {

  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+=3) {

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

      }

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

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

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

          }

        }

        beginShape();

        let trial = 0;

        let n = 0;

        let xtotal = 0;

        let ytotal = 0;

        textAlign(CENTER,CENTER);

        textSize(textsize);

        stroke(strokecolor[0],strokecolor[1],strokecolor[2], strokealpha);

        fill(fillcolor[0], fillcolor[1], fillcolor[2], fillalpha);

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

          if(trial != data[k].data[i][1]){

            endShape(CLOSE);

            noStroke();

            fill(fillcolor[0], fillcolor[1], fillcolor[2], 1.0);

            text(int(trial)+1, xtotal/n, ytotal/n);

            n = 0;

            xtotal = 0;

            ytotal = 0;

            stroke(strokecolor[0],strokecolor[1],strokecolor[2], strokealpha);

            fill(fillcolor[0], fillcolor[1], fillcolor[2], fillalpha);

            beginShape();

          }

          n++;

          xtotal += int(data[k].data[i][2]);

          ytotal += int(data[k].data[i][3]);

          vertex(data[k].data[i][2], data[k].data[i][3]);

          trial = data[k].data[i][1];

        }

        endShape(CLOSE)

        noStroke();

        fill(fillcolor[0], fillcolor[1], fillcolor[2], 1.0);

        text(int(trial)+1, xtotal/n, ytotal/n);

​

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

  }

}

​