Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Sep 16, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.