rainy_Day4

let rainX = [];
let rainY = [];
let rainStop = [];
let rainDiameter = [];
let ndrops = 50;
let maxD = 200;
let wind = 0;
let fade = 10;
function setup() {
  createCanvas(400, 400);
  background(255);
  angleMode(DEGREES)
  populateRain();
  noFill();
  strokeWeight(0.5);
  stroke(18, 27, 99)
  makeButton();
}

function draw() {
  background(255,255,255,fade);
  stepRain();
}
function populateRain(){
  for (let i=0;i<ndrops;i++){
    rainX[i] =  random(0-500*wind,width+200*wind);
    rainY[i] = random(-1000,0);
    rainStop[i] = random(250,width);
    rainDiameter[i] =  random(1,5);
  }
}

function stepRain(){
  for (let i=0;i<ndrops;i++){
    if (rainY[i] < rainStop[i]){
      rainY[i] = rainY[i]+rainStop[i]/100; 
      rainX[i] = rainX[i]+wind;
      strokeWeight(1)
    ellipse(rainX[i],rainY[i],rainDiameter[i]/6,rainDiameter[i]);
    }
    if (rainY[i]>=rainStop[i] && rainDiameter[i]<maxD){
     rainDiameter[i] = rainDiameter[i]+1
      strokeWeight(0.2)
     ellipse(rainX[i]+wind*2,rainY[i],rainDiameter[i],rainDiameter[i]/((700-rainStop[i])/30));
    }
    if (rainDiameter[i]>=maxD){
      rainX[i] = random(0-200*wind,width+200*wind);
      rainY[i] = random(-500,0);
      rainStop[i] = random(250,width);
      rainDiameter[i] = random(1,5);
    }
  }
}
function makeButton(){
  windSlider = createSlider(-5, 5, wind, 0.5);
  windSlider.position(20, 420);
  windSlider.size(80,20);
  fadeSlider = createSlider(0, 120, fade, 0.5);
  fadeSlider.position(20, 470);
  fadeSlider.size(190,20);
  dropSlider = createSlider(50, 2500, ndrops, 5);
  dropSlider.position(170, 420);
  dropSlider.size(80,20);
  valueDisp1 = createP()
  valueDisp1.position(20, 390);
  valueDisp1.html("wind = " + wind)
  valueDisp2 = createP()
  valueDisp2.position(160, 390);
  valueDisp2.html("number of drops =  " + ndrops)
  valueDisp3 = createP()
  valueDisp3.position(20, 440);
  valueDisp3.html("fade = " + fade)
  windSlider.input(sliderChange1);
  dropSlider.input(sliderChange2);
  fadeSlider.input(sliderChange3);
  function sliderChange1(){
    wind = windSlider.value();
    valueDisp1.html('wind =  ' + wind)
  }
  function sliderChange2(){
    ndrops = int(dropSlider.value());
    valueDisp2.html('number of drops =   ' + dropSlider.value())
    clearArrays();
    populateRain()
  }
  function sliderChange3(){
    fade = fadeSlider.value();
    valueDisp3.html('fade =  ' + fade)

  }
}

function clearArrays(){
  rainX =  [];
  rainY = [];
  rainStop = []
  rainDiameter =  [];
}