Snow?

by Sam Fereday

HTML

<button id="start">
  St
</button>
<canvas id="canvas"></canvas>

JavaScript

var Fl = function() {
  this.x = Math.floor((Math.random() * 300) + 2);
  this.y = Math.floor((Math.random() * 300) + 2) / 10;
  this.velocity = {
    x: 0,
    y: 0
  }
};

var counter = 0;
var gravity = 1;
var maxfall = 1;
var speed = 0.2;
var nx = 0, ny = 0;

var direction = 1;
var i = 0;

var start = 0,
    multiplier = 0;

Fl.prototype.update = function(c) {

	i += direction;
  direction *= (((i % 100) == 0) ? -1 : 1);
  
  multiplier = 50 * Math.sin( start * 2 );
  var thing = multiplier * Math.sin( start );
  start += 0.01;
    
  this.velocity = {
    x: thing / 100,
    y: Math.max(this.velocity.y - gravity, -maxfall)
  }

  this.y -= this.velocity.y * speed;
  this.x += this.velocity.x * speed;

  c.fillStyle = "red";
  c.fillRect(this.x, this.y, 4, 4);

}

var sn = [];

for(var b = 0; b < 100; b++)
{
	sn.push(new Fl());
}

function drawIt() {

  window.requestAnimationFrame(drawIt);

  var canvas = document.getElementById('canvas');
  var c = canvas.getContext('2d');
  c.clearRect(0, 0, canvas.width, canvas.height);

  sn.forEach(function(d) {
    d.update(c);
  });

}

//window.requestAnimationFrame(drawIt);
document.getElementById("start").addEventListener('click', function() {
	console.clear();
  drawIt();
});