Skip to content

Instantly share code, notes, and snippets.

@phongjalvn
Created July 22, 2012 13:41
Show Gist options
  • Save phongjalvn/3159744 to your computer and use it in GitHub Desktop.
Save phongjalvn/3159744 to your computer and use it in GitHub Desktop.
* {padding: 0; margin: 0; overflow: hidden; }
#canvas {background: black; }
<canvas id="canvas"></canvas>
// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// Initialize the canvas first with 2d context like
// we always do.
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
// Now get the height and width of window so that
// it works on every resolution. Yes! on mobiles too.
W = window.innerWidth,
H = window.innerHeight,
counter = 0,
particles = [];
// Set the canvas to occupy FULL space. We want our creation
// to rule, don't we?
canvas.width = W;
canvas.height = H;
function paintCanvas() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0, 0, W, H);
}
function Particle() {
this.x = Math.random() * W;
this.y = Math.random() * H;
this.angle = Math.random() * 360;
this.r = Math.floor(Math.random() * 255);
this.g = Math.floor(Math.random() * 255);
this.b = Math.floor(Math.random() * 255);
this.color = "rgb("+ this.r +", "+ this.g +", "+ this.b +")";
this.draw = function() {
ctx.beginPath();
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, 1, 0, Math.PI*2, false);
ctx.fill();
}
}
for(var i = 0; i < 200; i++) {
particles.push(new Particle());
}
function draW() {
paintCanvas();
for(var i = 0; i < particles.length; i++) {
var p = particles[i];
p.draw();
p.x += Math.sin(1.4);
p.y += Math.cos(counter * Math.PI/p.angle);
if(p.x > W)
p.x = 0;
}
counter += 1;
}
console.log(particles);
function animloop() {
draW();
requestAnimFrame(animloop);
}
animloop();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment