var image = new Image();
image.src = "./img/particle1.png";
var canvas = null;
var context2D = null;
var height = Math.floor(Math.random()+5);

window.onload = init;

function animateParticules()
{ 	
  context2D.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < particules.length; i++){

    context2D.drawImage(image, particules[i].x, particules[i].y);
    particules[i].x += Math.floor(Math.random()+0.1);
    particules[i].y -= Math.floor(Math.random()+0.5);
	if (particules[i].x == 100 || particules[i].y == 565) {
		  particules[i].x = Math.floor(Math.random()+0.1);
    particules[i].y = 565;
	}
	}
 
}

function init()
{
	canvas = document.getElementById('canvas');
	context2D = canvas.getContext('2d');
	particules = [];
	for (var i=0; i < 10; i++) {
	  particules.push(new particule());
	}

	setInterval(animateParticules, 50);
}

function particule() {
  this.x = Math.floor(Math.random()+0.5) ;
  this.y = 565 -Math.floor(Math.random()+0.5) ;
  this.height = "20px";
  this.width ="20px";
}