var pad = 30;       // pixel padding for visuals

var buffer = 1;    // gap between left-most/right-most hole and edge of field

var nholex = 30;    // number of holes accross the science field

var pixperarcsec;   // scaling factor between pixels in display and arcsec in field

var pitch;          // pitch between holes in arcsec

var holediam=0.2; //hole size in arcsec (mostly for display)

​

function setup() {

  createCanvas(600, 660);

  pixperarcsec = (width-2*pad)/fov;

  pitch = (fov-buffer*2)/(nholex-1);

}

​

function draw() {

  background(200);

  var dx = float(document.getElementById("sliderx").value)*(pitch+buffer)/pitch;

  var dy = float(document.getElementById("slidery").value)*(pitch+buffer)/pitch;

  document.getElementById("xval").innerHTML =  dx.toFixed(3);

  document.getElementById("yval").innerHTML =  dy.toFixed(3);

  var origin = -fov/2+buffer;

  fill(0,255,0,150)

  rect(pad,pad,fov*pixperarcsec,fov*pixperarcsec);

  line(width/2-5,width/2,width/2+5,width/2);

  line(width/2,width/2-5,width/2,width/2+5);

  push();

  translate(width/2,width/2);

  noStroke();

  fill(0,0,255,60);

  rect(pixperarcsec*(origin+dx-0.8),

       pixperarcsec*(origin+dy-0.8),

       pixperarcsec*(fov-2*buffer+0.8*2),

       pixperarcsec*(fov-2*buffer+0.8*2));

  noStroke();

  fill(255,255,0);

  for (let ni = 0;ni<nholex; ni++){

    for (let mi = 0; mi<nholex;mi++){

      ellipseMode(CENTER)

      ellipse(pixperarcsec*(origin+dx+ni*pitch),

              pixperarcsec*(origin+dy+mi*pitch),

              pixperarcsec*holediam,pixperarcsec*holediam);

    }

  }

  pop();

  translate(pad,width);

  stroke(0);

  strokeWeight(2);

  line(0,0,1*pixperarcsec,0);

  noStroke();

  fill(0);

  text("1 arcsec",1*pixperarcsec+5,4);

  translate(0,20);

  stroke(0);

  line(0,0,1.718213058419244*pixperarcsec,0);

  noStroke();

  fill(0);

  text("1 mm at cal plate",1.718213058419244*pixperarcsec+5,4);

  translate(0,20);

  stroke(0);

  line(0,0,0.736*pixperarcsec,0);

  noStroke();

  fill(0);

  text("1 mm at detector",1*pixperarcsec+5,4);

}