canvas - particle demo

by SHELDON PASCIAK

HTML

<canvas></canvas>

CSS

canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var canvas = document.getElementsByTagName('canvas')[0]; 
var particles = []; 
var tick = 0; 
var howmany = 0;
function loop() { 
    window.requestAnimationFrame(loop); 
    createParticles(howmany); 
    updateParticles(); 
    killParticles(); 
    drawParticles(); 
} 

howmany=prompt("How many",6)
window.requestAnimationFrame(loop);

function createParticles(howmany) { 
    //check on every 10th tick check 
    if(tick % 10 == 0) { 
        //add particle if fewer than 100 
        if(particles.length < howmany) { 
            particles.push({ 
                x: Math.random()*canvas.width,  //between 0 and canvas width 
                y: 0, 
                speed: .1+Math.random()*3, //between 2 and 5 
                radius: 2+Math.random()*5, //between 5 and 10 
                color: pastelColors(), 
            }); 
        } 
    } 
}
function pastelColors() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
    var r = (Math.round(Math.random() * 127) + 127).toString(16);
    var g = (Math.round(Math.random() * 127) + 127).toString(16);
    var b = (Math.round(Math.random() * 127) + 127).toString(16);

    //france paris or custom
    r = ['red', 'green', 'white', 'green']; //'#D5F5E3','#1ABC9C','#F1948A','#CB4335','red','green'];
    return r[randRange(0, 2)];

    //return '#' + r + g + b;

}
function updateParticles() { 
    for(var i in particles) { 
        var part = particles[i]; 
        part.y += part.speed; 
    } 
} 

function killParticles() { 
    for(var i in particles) { 
        var part = particles[i]; 
        if(part.y > canvas.height) { 
           part.speed *= -1.0;
          
           
        } 
        if (part.y < 0) {
        	part.speed *= -1.0;
        }
    } 
}

function drawParticles() { 
    var c = canvas.getContext('2d'); 
    c.fillStyle = "black"; 
    c.fillRect(0,0,canvas.width,canvas.height); 
    for(var i in particles) { 
        var part = particles[i]; 
        c.beginPath(); 
       ...