here the image is displayed in a small viewing window and the user can zoom with the scroll wheel and look around by dragging the mouse

a heatmap kinda like for bubbleview, where you can kinda see like the path their window travelled across the image. if you wanted to you could turn the opacity way down and overlay these for every user so you get a pretty nice heatmap of what people looked at. 

todo:

- let users set a time limit? (IF WE CANT GET PAST MAX TABLE SIZE THIS MIGHT BE A MUST)

​

​

*/

​

// !! Change this to you own project's name in order to save your experiments data.

// The data can be found on the google drive

const SAVE_DATA_SHEET_NAME = "zoommaps_test_2";

​

const filenames = ['sisyphus.jpg', 'yama.jpg'];

const prompt = "Describe the scene...";

​

const randomOrder = true;

​

// ** END OF PARAMETERS **

​

let presentationOrder = [];

let imgtrial = 0;

let curimg;

​

const canvasW = 400;

const canvasH = 400;

const canvasRat = canvasW / canvasH;

​

let imgW, imgH, imgRat;

let images = [];

let i;

let readmove = false;

​

let imgX = 0;

let imgY = 0;

let zooomlvl = 1;

let orgzoomlvl;

​

let data;

​

function preload() {

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

    images.push(loadImage("images/" + filenames[i]));

    presentationOrder[i] = i;

  }

​

  if (randomOrder) {

    shuffle(presentationOrder, true);

  }

}

​

function setup() {

  cnv = createCanvas(canvasW, canvasH);

  cnv.mouseWheel(zoom);

  cnv.parent("sketch");

​

  document

    .getElementById("sketch")

    .setAttribute("style", "height:" + canvasH + "px");

  document.getElementById("input").placeholder = prompt;

​

  data = new p5.Table();

  data.columns = ["image", "x", "y", "zoomlvl", canvasW, canvasH];

​

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

    data.addColumn(filenames[i]);

    data.addColumn(images[i].width);

    data.addColumn(images[i].height);

    data.addColumn("answer");

  }

​

  let sub = createButton("Submit").mousePressed(submit);

  sub.position(0, cnv.height + 100);

​

  setImage();

}

​

function draw() {

  background(0);

​

  if (readmove) {

    imgX += mouseX - pmouseX;

    imgY += mouseY - pmouseY;

  }

​

  image(curimg, imgX, imgY, curimg.width * zoomlvl, curimg.height * zoomlvl);

​

  //STORE DATA!!

  let newRow = data.addRow();

  newRow.setString("image", filenames[presentationOrder[imgtrial]]);

  newRow.setNum("x", -imgX / zoomlvl);

  newRow.setNum("y", -imgY / zoomlvl);

  newRow.setNum("zoomlvl", 1 / zoomlvl);

}

​

function mousePressed() {

  readmove = true;

}

​

function mouseReleased() {

  readmove = false;

}

​

function zoom(event) {

  if (event.deltaY < 0) {

    //adjust position

    imgX -= ((mouseX - imgX) / (curimg.width * zoomlvl)) * (curimg.width * 0.1);

    imgY -= ((mouseY - imgY) / (curimg.height * zoomlvl)) * (curimg.height * 0.1);

​

    // zoom in: increase image scale

    zoomlvl += 0.1;

  }

​

  if (event.deltaY > 0 && zoomlvl > orgzoomlvl) {

    // adjust position

    imgX += ((mouseX - imgX) / (curimg.width * zoomlvl)) * (curimg.width * 0.1);

    imgY += ((mouseY - imgY) / (curimg.height * zoomlvl)) * (curimg.height * 0.1);

​

    // zoom out: decrease image scale

    zoomlvl -= 0.1;

  }

}

​

function submit(){

  data.columns[9 + presentationOrder[imgtrial] * 4] = document.getElementById("input").value;

  document.getElementById("input").value = '';

  // document.getElementById("input").placeholder = 'New placeholder...';

  if (imgtrial + 1 == filenames.length) {

    // Translate the p5 Table to a two dimensional array and send it to Google sheets

    dataExport = data.getArray();

    dataExport.unshift(data.columns);

    saveToSheet(SAVE_DATA_SHEET_NAME, dataExport);

    print(data.getArray().length);

  } 

  else{

    imgtrial++;

    setImage();

  }

}

​

function setImage(){

  curimg = images[presentationOrder[imgtrial]];

  if (curimg.width / curimg.height > canvasRat) {

    zoomlvl = canvasW / curimg.width;

    orgzoomlvl = zoomlvl;

  } else {

    zoomlvl = canvasH / curimg.height;

    orgzoomlvl = zoomlvl;

  }

  imgX = 0;

  imgY = 0;

}

​

/**

 * This function saves the data to a google sheet of the given name.

 * Make sure that the name is unique for you project!

 * If your name is not unique then you will share a google sheet with someone else.

 *

 *

 * @param {string} sheetName - The name of you sheet. Make sure it is unique to your project.

 * @param {Array<Array>} data - A two dimensional array representing the data.

 *             Data example:

 *             data = [

 *             (row1:) [col1, col2, col3],

 *             (row2:) [col1, col2, col3]

 *                    ]

 * @param {string} [tabName] - (OPTIONAL) The name of the tab/worksheet that this instance of data will be in.

 * If you leave this empty it will fall back to using the current time of data submission as tab name

 * IMPORTANT! if you are using custom tab names make sure that every name is unique.

 * If a name already exists saving wil result in an error.

 */

async function saveToSheet(sheetName, data, tabName) {

  // Safety check

  if (!sheetName) {

    return console.error("The name for the sheet was not valid!");

  }

  if (!data || data.length === 0) {

    return console.error("Cannot save empty data!");

  }

​

  // Building save request

  const requestBody = {

    sheetName,

    data,

  };

​

  // Add tabName if it exists

  if (tabName && typeof tabName === "string") {

    requestBody.tabName = tabName;

  }

​

  try {

    // Send the save request

    const response = await fetch("https://node.bykrijgsman.com/save-data", {

      method: "POST",

      mode: "cors",

      headers: {

        "Content-Type": "application/json",

      },

      body: JSON.stringify(requestBody),

    });

​

    const result = await response.text();

    console.log(result);

  } catch (e) {

    // There was an error while saving if we get here!

    console.error(e);

  }

}

​