Playing around with canvas

First lab, plotting a pixel


(function() {

if (typeof Object.create !== "function") {
 Object.create = function (o) {
 function F() {}
 F.prototype = o;
 return new F();
 };
 }

var system,
 numParticles,
 canvas,
 context,
 bounds;

function initSystem() {
 canvas = document.getElementById("canvas");
 context = canvas.getContext("2d");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 bounds = {
 x1: 0,
 y1: 0,
 x2: canvas.width,
 y2: canvas.height
 };

numParticles = 100;
 }

function animate() {
 context.clearRect(bounds.x1, bounds.y1, bounds.x2, bounds.y2);

for(i = 0; i < numParticles; i += 1) {
 context.fillStyle = "#0000FF"
 context.fillRect(Math.random()*bounds.x2 - 1.5, Math.random()*bounds.y2 - 1.5, 3, 3);
 }
 }

initSystem();
 setInterval(animate, 1000 / 60);

}());

Posted in Javascript

Leave a Reply