BubbleView (http://bubbleview.namwkim.org) is cool, not only because it seems quite usefull (for an overview of more methods see http://turkeyes.mit.edu) but I also like the interface. You can also do some more creative things with it. 

​

This P5 sketch was made by Maarten Wijntjes, 

​

*/

​

let blurim,sharpim,aperture;

let mwidth,mheight;

​

// radius of the aperture

let radius=50; 

//let data=[];

let trial=0;

​

let data;

​

// Everything is scaled to the width you want to present the sketch in. Aspectratios are maintained.

let sketchwidth=800;

​

let aspectratio,sketchheight;

​

let clicked=false;

​

function preload(){

  //this looks dumb, loading the same image twice, but for some reason it did not work when I used im1=im0. Anyway, we need two because 1 will be blurred and the other maintain sharp.

  sharpR1=loadImage('main-image.jpeg');

  blurR1=loadImage('main-image.jpeg');

 }

​

async function loadImages(){

  for (i = 1; i < 10; i++) {

    window["sharpR" + i] = loadImage('poses/12trans/12trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["blurR" + i] = loadImage('poses/13trans/13trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["sharpF" + i] = loadImage('poses/21trans/21trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["blurF" + i] = loadImage('poses/23trans/23trans00' + i + '.png');} 

​

function setup() {

  aspectratio=sharpim.height/sharpim.width

  sketchheight=sketchwidth*aspectratio;

  createCanvas(sketchwidth, sketchheight);

  sharpim.resize(sketchwidth, sketchheight);

  blurim.resize(sketchwidth, sketchheight);

  blurim.filter(BLUR, 10);

  aperture=createImage(2*radius,2*radius);

  noCursor();

  data = new p5.Table();

  data.addColumn('x');

  data.addColumn('y');

  data.addColumn('r');

}

​

function draw() {

​

  imageMode(CORNER);

  image(blurim,0,0);

  imageMode(CENTER);

  if(clicked){

    image(aperture,data.getNum(trial-1, "x"),data.getNum(trial-1, "y"));

  }

  noFill();

  stroke(255,0,0);

  ellipse(mouseX,mouseY,2*radius,2*radius);

  //text(clicked,30,30);

}

​

​

function mouseClicked(){

  trial++

  sharpim.loadPixels();

  aperture.loadPixels();

  let c;

  for (let i = 0; i < aperture.width; i++) {

    for (let j = 0; j < aperture.height; j++) {

      if(dist(i, j, aperture.width/2, aperture.height/2)<aperture.width/2){

        c=sharpim.get(mouseX+i-aperture.width/2,mouseY+j-aperture.height/2);

        aperture.set(i, j, c);

    }else{

      aperture.set(i, j, color(0, 0, 0, 0));

    }

    }

  }

  aperture.updatePixels();

  let newRow = data.addRow();

  newRow.setNum('x', int(mouseX));

  newRow.setNum('y', int(mouseY));

  newRow.setNum('r', radius);

  if(clicked){

    clicked=true;

  }else{

    clicked=true;

  }

}

​

function keyPressed() {

  if (keyCode === ENTER) {

    clicked=false;

    saveTable(data, 'new.csv');

  } 

}

​