Skip to content

Instantly share code, notes, and snippets.

@alex-quiterio
Created May 27, 2013 21:31
Show Gist options
  • Save alex-quiterio/5659190 to your computer and use it in GitHub Desktop.
Save alex-quiterio/5659190 to your computer and use it in GitHub Desktop.
var self = window;
(function(self) {
var canvas, context, particles = [], explode = true, FPS = 60;
/*
* Init.
*/
function init() {
var body = document.querySelector('body');
canvas = document.createElement('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.backgroundColor = '#000';
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.bottom = 0;
canvas.style.left = 0;
canvas.style.right = 0;
// Filters
body.appendChild(canvas);
// Browser supports canvas?
if(!!(capable)) {
context = canvas.getContext('2d');
window.onresize = onResize;
createParticles();
}
else {
console.error('Sorry, your browser sucks :(');
}
}
/*
* Checks if browser supports canvas element.
*/
function capable() {
return canvas.getContext && canvas.getContext('2d');
}
/*
* On resize window event.
*/
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function createParticles() {
for(var step = 0, len = 200; step < len; step++) {
var x, y, steps;
steps = Math.PI * 2 * step / len;
x = canvas.width * 0.5 + 200 * Math.cos(steps);
y = canvas.height * 0.5 + 200 * Math.sin(steps);
particles.push({
x: x,
y: y,
lineX: x,
lineY: y,
centerX: canvas.width * 0.5,
centerY: canvas.height * 0.5,
originalX: x,
originalY: y,
scale: 1,
radius: 3,
minRadius: 3,
maxRadius: 9,
orbit: 100,
angle: 0,
speed: 0.05
});
}
loop();
}
/*
* Subdivision logic.
*/
function loop() {
clear();
update();
render();
requestAnimFrame(loop);
}
/*
* Clear the whole screen.
*/
function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
/*
* Update the particles.
*/
function update() {
var towards = {
x: Math.round(canvas.width * 0.5),
y: Math.round(canvas.height * 0.5)
};
[].forEach.call(particles, function(particle, index) {
particle.x = particle.centerX + Math.cos(particle.angle + index) * particle.orbit;
particle.y = particle.centerY + Math.sin(particle.angle + index) * particle.orbit;
particle.scale = 1 + Math.sin(particle.angle) * 0.5;
particle.angle += particle.speed;
if(!explode) {
particle.centerX += (towards.x - particle.centerX) * 0.05;
particle.centerY += (towards.y - particle.centerY) * 0.05;
particle.radius += (particle.maxRadius - particle.radius) * 0.05;
if(Math.round(particle.centerX) === towards.x && Math.round(particle.centerY) === towards.y)
explode = true;
}
if(explode) {
particle.centerX += (particle.originalX - particle.centerX) * 0.05;
particle.centerY += (particle.originalY - particle.centerY) * 0.05;
particle.radius += (particle.minRadius - particle.radius) * 0.05;
if(Math.round(particle.centerX) === Math.round(particle.originalX) && Math.round(particle.centerY) === Math.round(particle.originalY))
explode = false;
}
});
}
/*
* Render the particles.
*/
function render() {
[].forEach.call(particles, function(particle, index) {
context.save();
context.globalAlpha = 0.5;
context.strokeStyle = '#ea80b0';
context.lineWidth = 1;
context.beginPath();
context.moveTo(particle.lineX, particle.lineY);
context.lineTo(particle.x, particle.y);
context.stroke();
context.restore();
context.save();
context.translate(particle.x, particle.y);
context.scale(particle.scale, particle.scale);
context.globalCompositeOperation = 'lighter';
context.globalAlpha = 1;
context.fillStyle = '#ea80b0';
context.beginPath();
context.arc(0, 0, particle.radius, 0, Math.PI * 2);
context.fill();
context.restore();
});
}
/*
* Request new frame by Paul Irish.
* 60 FPS.
*/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / FPS);
};
})();
window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
})(self);
@mosaic-greg
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment