Created
July 22, 2012 13:41
-
-
Save phongjalvn/3159744 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* {padding: 0; margin: 0; overflow: hidden; } | |
#canvas {background: black; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas id="canvas"></canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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