const tickRate = 20;
const drop = document.getElementById("sample");
const heightArea = 20;
const frequency = 10;
const gravity = 10;
const maxWind = 50;

let windowSize = [window.innerWidth, window.innerHeight];

window.addEventListener("resize", () => {
  windowSize[0] = window.innerWidth;
  windowSize[1] = window.innerHeight;
})

let rain = [];
let wind = 0;

setInterval(() => {
  for (let _ = 0; _ < frequency; _++) {
    let clone = drop.cloneNode(true);
    clone.removeAttribute("id");
    clone.style.left = `${Math.random() * (windowSize[0] + windowSize[1] / gravity * maxWind * 2) - windowSize[1] / gravity * maxWind}px`;
    clone.style.top = `${-heightArea}px`;
    document.body.appendChild(clone);
    rain.push(clone);
  }

  for (let i = 0; i < rain.length; i++) {
    rain[i].style.top = `${parseFloat(rain[i].style.top) + gravity}px`;
    rain[i].style.left = `${parseFloat(rain[i].style.left) + wind}px`;
    rain[i].style.rotate = `${-Math.atan(wind/gravity)}rad`;
    if (parseFloat(rain[i].style.top) > windowSize[1] + heightArea) {
      rain[i].remove();
      rain.splice(i, 1);
    }
  }

}, tickRate);

function easeWind(value, frames) {
  wind += (value-wind) / frames;
  frames -= 1;
  if (frames > 0) {
    setTimeout(() => {
      easeWind(value, frames);
    }, tickRate);
  }
}

setInterval(() => {
  easeWind(Math.random() * maxWind*2 - maxWind, 250)
}, tickRate * 500);