Rainy day

by Trina Lu

HTML

<canvas id="mycanvas"></canvas>

CSS

#mycanvas {
  background: #484e80;
}

JavaScript

//reference: https://codepen.io/ruigewaard/pen/JHDdF
(function() {

  var can = document.querySelector('#mycanvas');
  var ctx = can.getContext('2d');
  var h = 500,
    w = 500;
  can.height = h;
  can.width = w;

  var raindrops = 300;
  var drops = [];
  var colors = ['rgba(255, 87, 34, 0.64)','rgba(67, 255, 213,0.5)'];

  function make_drops(_raindrops) {
    for (var i = 0; i < _raindrops; i++) {
      var drop = {
        x: Math.random() * w,
        y: Math.random() * h,
        l: Math.random(),
        dx: (Math.random() * 2) * (Math.random() < 0.5 ? -1 : 1),
        dy: Math.random() * 10 + 8
      };
      drops.push(drop);
    }
    return drops;
  }

  function draw() {
    ctx.clearRect(0, 0, w, h);
    ctx.lineWidth = 1;
    ctx.lineCap = 'round';
    drops.forEach(function(drop, i) {
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(255, 255, 213,0.3)';
      ctx.moveTo(drop.x, drop.y);
      ctx.lineTo(drop.x + drop.dx, drop.y + drop.dy);
      ctx.stroke();
    });
    move();
  }

  function move() {
    drops.forEach(function(drop, i) {
      drop.x += drop.dx;
      drop.y += drop.dy;
      if (drop.x > w || drop.y > h) {
        drop.x = Math.random() * w;
        drop.y = -20;
      }
    });
  }

  drops = make_drops(raindrops);
  setInterval(draw, 35);

}());