doubleSlit_Day8

let dist = 100;
let nSides = 1;
let wL = 20;
let minD = 0;
let slitW = 10
function setup() {
  createCanvas(400, 400);
  makeButton();
  stroke(0);
  strokeWeight(0.4)
}

function draw() {
  background(255);
  fill(0);
  rect(0,0,20,width);
  fill(255);
  h1 =width/2-dist/2;
  h2 =width/2+dist/2;
  rect(0,h1-10,20,slitW)
  rect(0,h2-10,20,slitW)
  noFill()//fill(0,0,0,2)
  makeCircles(0,h1,0,h2)
  if(nSides>1){
    fill(0)
    rect(380,0,20,width);
    fill(255)
    rect(380,h1-10,20,slitW)
    rect(380,h2-10,20,slitW)
    noFill()//fill(0,0,0,2)
    makeCircles(400,h1,400,h2)
  }
  if(nSides>2){
    fill(0)
    rect(0,0,width,20);
    fill(255)
    rect(h1-10,0,slitW,20)
    rect(h2-10,0,slitW,20)
    noFill()//fill(0,0,0,2)
    makeCircles(h1,0,h2,0)
  }
  if(nSides>3){
    fill(0)
    rect(0,380,width,20);
    fill(255)
    rect(h1-10,380,slitW,20)
    rect(h2-10,380,slitW,20)
    noFill()//fill(0,0,0,2)
    makeCircles(h1,400,h2,400)
  }
}

  function makeButton(){
  slitSlider = createSlider(minD, 200, dist, 1);
  slitSlider.position(20, width+20);
  slitSlider.size(80,20);
  sideSlider = createSlider(1, 4, nSides, 1);
  sideSlider.position(20, width+60);
  sideSlider.size(80,20);
  waveSlider = createSlider(5, 100, wL, 1);
  waveSlider.position(180, width+20);
  waveSlider.size(80,20);
  valueDisp1 = createP()
  valueDisp1.position(20, width-10);
  valueDisp1.html("slit distance = " + dist)
  valueDisp2 = createP()
  valueDisp2.position(20, width+30);
  valueDisp2.html("n sides = " + nSides)
  valueDisp3 = createP()
  valueDisp3.position(180, width-10);
  valueDisp3.html("wave length = " + wL)
  slitSlider.input(sliderChange1);
  sideSlider.input(sliderChange2);
  waveSlider.input(sliderChange3);
  function sliderChange1(){
    dist = slitSlider.value();
    valueDisp1.html('slit =  ' + dist)
  }
  function sliderChange2(){
    nSides= sideSlider.value();
    valueDisp2.html('n sides =  ' + nSides)
  }
  function sliderChange3(){
    wL= waveSlider.value();
    valueDisp3.html('wave length =  ' + wL)
  } 
}

function makeCircles(x1,y1,x2,y2){
  tmp = int(width/wL*2.5)
  for(i=0;i<tmp;i++){
    circle(x1,y1,i*wL+frameCount%wL)
    circle(x2,y2,i*wL+frameCount%wL)
  }
}