Rounding particles with canvas
CSS
body { background:white; }
JavaScript
MeteorRain = new function() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var cursor, canvas, context;
var particles = [];
var mouseX = 0;
var mouseY = 0;
this.init = function() {
canvas = document.querySelector("canvas");
if (canvas && canvas.getContext) {
context = canvas.getContext('2d');
document.addEventListener('mousemove', documentMouseMoveHandler, false);
document.addEventListener('mousedown', documentMouseDownHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
createCursor();
windowResizeHandler();
setInterval(loop, 1000/100);
}
}
function createCursor(position) {
var w = 300;
var h = 300;
if (!position){
var pos = {
x: ( SCREEN_WIDTH - w ) * 0.5 + (Math.random() * w),
y: ( SCREEN_HEIGHT - h ) * 0.5 + (Math.random() * h)
}
var m = new Cursor();
m.position.x = pos.x;
m.position.y = pos.y;
cursor = m;
createParticles(m.position);
} else {
var m = new Cursor();
m.position.x = position.x;
m.position.y = position.y;
createParticles(m.position);
}
}
function createParticles(pos) {
for (var i = 0; i < 50; i++) {
var p = new Particle();
p.position.x = pos.x;
p.position.y = pos.y;
p.shift.x = pos.x;
p.shift.y = pos.y;
particles.push(p);
}
}
function documentMouseMoveHandler(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
function documentMouseDownHandler(event) {
createCursor({x: mouseX, y: mouseY});
}
function windowResizeHandler() {
canvas.width = SCREEN_WIDTH;
...