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

right now it stores location and zoom data for every frame in a table that you can download as a pretty beefy csv

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. 

steps:

- let users set a time limit?

- save imagesize and canvassize in the table

*/

​

const canvasW = 400;

const canvasH = 400;

const canvasRat = canvasW/canvasH;

​

let imgW, imgH, imgRat;

let i;

let readmove = false;

​

let imgX = 0;

let imgY = 0;

let zooomlvl = 1;

let orgzoomlvl;

​

let data;

​

function preload(){

  img = loadImage('Input.jpg');

}

​

function setup() {

  imgW = img.width;

  imgH = img.height;

  imgRat = imgW / imgH;

  if(imgRat > canvasRat){

    zoomlvl = canvasW / imgW;

    orgzoomlvl = zoomlvl;

  }

  else{

    zoomlvl = canvasH / imgH;

    orgzoomlvl = zoomlvl;

  }

  cnv = createCanvas(canvasW, canvasH);

  cnv.mouseWheel(zoom);

  textSize(20);

  data = new p5.Table();

  data.addColumn('imgX');

  data.addColumn('imgY');

  data.addColumn('zoomlvl');

  data.addColumn(img.width);

  data.addColumn(img.height);

  data.addColumn(canvasW);

  data.addColumn(canvasH);

  createButton('Download CSV').mousePressed(downloadCSV);

}

​

function draw() {

  background(220);

  if(readmove){

    imgX += mouseX-pmouseX;

    imgY += mouseY-pmouseY;

  }

  image(img,imgX,imgY,imgW * zoomlvl, imgH * zoomlvl)

  //STORE DATA!!

  let newRow = data.addRow();

  newRow.setNum('imgX', -imgX / zoomlvl / 2);

  newRow.setNum('imgY', -imgY / zoomlvl / 2);

  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) / (imgW*zoomlvl)) * (imgW*0.1);

    imgY -= ((mouseY - imgY) / (imgH*zoomlvl)) * (imgH*0.1);

    // zoom in: increase image scale

    zoomlvl += 0.1;

  } 

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

    // adjust position

    imgX += ((mouseX - imgX) / (imgW*zoomlvl)) * (imgW*0.1);

    imgY += ((mouseY - imgY) / (imgH*zoomlvl)) * (imgH*0.1);

    // zoom out: decrease image scale

    zoomlvl -= 0.1;

  }

}

​

function downloadCSV(){

  saveTable(data, 'results.csv');

}