const GET_DATA_SHEET_NAME = "example_conspicuity";

​

​

​

​

// set the color of the markers in RGB

const markercolor = [0,0,0];

// set the size of the markers in pixels

const markersize = 5;

​

// show the order in which targets were tried

const showNumber = false;

​

const fontsize = 16;

​

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

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

      images = [];

      dimensions = [];

      // check how many unique images were used

      for (j = 6; 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]) {

            drawMarker(

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

              int(data[k].data[i][3]),

              int(data[k].data[i][4]),

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

            );

            if (showNumber) {

              textSize(fontsize);

              fill(markercolor[0], markercolor[1], markercolor[2]);

              text(

                i,

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

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

              );

            }

          }

        }

​

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

  }

}

​

function drawMarker(x1, y1, x2, y2) {

  stroke(markercolor[0], markercolor[1], markercolor[2]);

  noFill();

  line(x1 - markersize, y1, x1 + markersize, y1);

  line(x1, y1 - markersize, x1, y1 + markersize);

  ellipse(x1, y1, 2 * abs(x1 - x2), 2 * abs(y1 - y2));

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

  }

}

​