Use flow:

- Output one image per image per user.

- label each point as when it was clicked in the order

- draw markers to show where to align image? -> still need image dimensions

​

*/

​

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

const GET_DATA_SHEET_NAME = "codecharts_test";

​

const markersize = 5;

const fontsize = 16;

​

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

​

let data = [];

let ready = false;

let images = [];

let dimensions = [];

​

async function setup() {

  // gather data from the sheet

  data = await getDataFromSheet(GET_DATA_SHEET_NAME);

  ready = true;

}

​

function draw() {

  // wait until data is collected from sheets

  if (ready) {

    // loop once for each tab in the sheet

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

      images = [];

      dimensions = [];

      // check how many unique images were used

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

        if (!images.includes(data[k].data[0][j])) {

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

          dimensions.push([

            int(data[k].data[0][1 + j]),

            int(data[k].data[0][2 + j]),

          ]);

        }

      }

​

      // loop once for each unique image

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

        c = createCanvas(dimensions[j][0], dimensions[j][1]);

​

        // draws markers for each location observed

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

          if (data[k].data[i][0] == images[j] && data[k].data[i][1] != "N/A") {

            drawMarker(int(data[k].data[i][1]), int(data[k].data[i][2]));

            textSize(fontsize);

            text(

              i,

              int(data[k].data[i][1]) + markersize * 2,

              int(data[k].data[i][2])

            );

            print(data[k].data[i][1]);

          }

        }

​

        // here it has to do something weird to scale the canvas down by half before saving it, because the p5 saveCanvas function doubles the resolution meaning it would no longer fit over your original image.

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

  }

}

​

function drawMarker(x, y) {

  stroke(0);

  line(x - markersize, y, x + markersize, y);

  line(x, y - markersize, x, y + markersize);

  noStroke();

}

​

/**

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

  }

}

​