Snow Jason's red boxes prototype demo

by Lucille Kenney

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas{border:1px solid black;}

JavaScript

var canvas = $("#canvas");
var context =canvas.get(0).getContext("2d");

function Particle()
{
     this.x = Math.random()*canvas.width();
     this.y = Math.random()*canvas.height();
     this.width = Math.random()*20 + 5;
     this.height = this.width;
     this.color = "red";
        this.vy = Math.random()*10 +5;
    
    this.draw = function(){
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
    }
    
    this.move = function()
    {
         this.y += this.vy;
        if(this.y > canvas.height())
        {
         this.y = 0;   
        }
    }
}

var mySquares = [];

for(var i = 0; i < 100; i++)
{
     mySquares[i] = new Particle();  
     mySquares[i].draw();
}

var timer = setInterval(animate, 33);

function animate()
{
      context.clearRect(0, 0, canvas.width(), canvas.height());
        for(var i = 0; i < 100; i++)
        {
    mySquares[i].move();
         mySquares[i].draw();
        
    }
}