slit_V2.0_Day9

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

function draw() {
  background(255);
  translate(width/2,width/2)
  h1 =-dist/2;
  h2 =+dist/2;
  noFill()
  theta = 360/nSides;
  for (let i=0;i<=nSides;i++){
    push()
      rotate(i*theta)
      print(i,theta)
      fill(0)
      rect(0-width/2,0-width/2,20,width);
      fill(255)
      rect(0-width/2,h1-10,20,slitW)
      rect(0-width/2,h2-10,20,slitW)
      noFill()
      makeCircles(0-width/2,h1,0-width/2,h2)
    pop()
  }
}

  function makeButton(){
  slitSlider = createSlider(minD, 50, dist, 1);
  slitSlider.position(20, width+20);
  slitSlider.size(80,20);
  sideSlider = createSlider(1, 30, 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)
  }
}