Canvas Experiment

by darcyclarke

HTML

<canvas></canvas>

CSS

body {
   padding:0; 
    margin:0;
}
canvas {
 width: 100%;
  height: 100%;  
}

JavaScript

var App = {};
App.cache = {};
App.params = {};

App.cache.canvas = $("canvas");
App.params.boxH = App.cache.canvas.height();
App.params.boxW = App.cache.canvas.width();
App.params.ctx = App.cache.canvas[0].getContext('2d');
App.params.numBalls = 600;
App.params.balls = [];

App.init = function(){    
    App.params.ctx.globalCompositeOperation = "source-over";
    App.params.ctx.fillStyle = "rgba(0,0,0,1)";
    App.params.ctx.fillRect( 0 , 0 , App.params.boxW , App.params.boxH );
    App.params.ctx.globalCompositeOperation = "lighter";
    
    var x = App.params.numBalls;
    while(x--){
        var temp = new App.ball();
        temp.x   = App.params.boxW * 0.5;
        temp.y   = App.params.boxH * 0.5;
        temp.vX  = Math.cos(i) * Math.random() * 34;
        temp.vY  = Math.sin(i) * Math.random() * 34;
        App.params.balls[x] = temp
    }
};
App.rand = function(min,max){
    if(max === undefined){
        return Math.floor(Math.random()*parseFloat(min))+1;
    } else {
        return min + (Math.floor(Math.random()*(parseFloat(max)-parseFloat(min) +1)));
    }
};
App.ball = function(){
    this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.size = 1;
}
   
// Run
App.init();