var dx_slider;

var dy_slider;

var rot_slider;

var reset;

​

function setup() {

  createCanvas(400, 400);

  createDiv("Pupil Size")

  pupwidth_slider = createSlider(0,width*2,width*1.0);

  createDiv("dx")

  dx_slider = createSlider(-width,width,0);

  createDiv("dy")

  dy_slider = createSlider(-height,height,0);

  createDiv("rotation")

  rot_slider = createSlider(0,90,0);

  createDiv("")

  reset = createButton("Reset");

  reset.mouseReleased(()=>{

    pupwidth_slider.value(width);

    dx_slider.value(0);

    dy_slider.value(0);

    rot_slider.value(0);

  });

  rectMode(CENTER);  

}

​

function draw() {

  background(0);

  for (var i=-3;i<=3;i++){

    for (var j=-3;j<=3;j++){

push();

        translate(width/2+dx()+width*i,height/2+dy()+height*j);

    rotate(rot()*PI/180);

      fill(255,160);

      noStroke();

    rect(0,0,pupwidth(),pupwidth()); 

      pop();

    }

  }  

}

​

function dx() {

  return dx_slider.value();

}

function dy() {

  return dy_slider.value();

}

function rot() {

  return rot_slider.value();

}

function pupwidth() {

  return pupwidth_slider.value();

}