/**
* Ideas
* Circle to circle collision ?
*/
/**
* Particle Class
*/
class Particle {
constructor(x, y) {
// Posisition vector
this.p = { x: x, y: y };
// Velocity vector
this.v = { x: Math.random()-.5, y: Math.random()-.5 };
// Acceleration vector
this.a = { x: Math.random()-.5, y: Math.random()-.5 };
// Sum of exerted forces
this.f = { x: 0, y: 0 };
// Mass
this.m = Math.ceil(Math.random()*200+180);
// Coefficient of restitution
this.cor = .8;
// Visual bits and bobs
this.c = `hsl(${this.p.x/4+180}, 100%, 65%)`;
this.r = Math.sqrt(this.m / Math.PI);
}
applyVelocity() {
this.p.x += this.v.x;
this.p.y += this.v.y;
}
applyAcceleration() {
this.v.x += this.a.x;
this.v.y += this.a.y;
}
applyForce() {
this.a.x = this.f.x / this.m;
this.a.y = this.f.y / this.m;
}
exertForce(f) {
this.f.x += f.x;
this.f.y += f.y;
}
checkBounds(w, h) {
// Right
if (this.p.x > w - this.r) {
this.p.x = w - this.r;
this.v.x *= -this.cor;
};
// Left
if (this.p.x < this.r) {
this.p.x = this.r;
this.v.x *= -this.cor;
};
// Up
// Gravity should pull it back down
// if (this.p.y < this.r) {
// this.p.y = this.r;
// this.v.y *= -this.cor;
// };
// Down
if (this.p.y > h - this.r) {
this.p.y = h - this.r;
this.v.y *= -this.cor;
};
}
update() {
this.applyForce();
this.f.x = this.f.y = 0;
this.applyAcceleration();
this.applyVelocity();
}
draw(ctx) {
ctx.fillStyle = this.c;
ctx.beginPath();
ctx.arc(this.p.x, this.p.y, this.r, 0, 2*Math.PI);
ctx.fill();
}
}
/**
* Constants
*/
const w = 600, h = 400;
/**
* Generation
*/
let particles = new Array(50).fill().map(() => {
return new Particle(Math.random()*w, Math.random()*h);
});
/**
* Canvas 'n drawing baby
*/
let c = document.getElementById('c'),
ctx = c.getContext('2d');
c.width = w;
c.height = h;
function draw() {
ctx.globalAlpha = .5;
ctx.fillStyle = '#eceeef';
ctx.fillRect(0, 0, w, h);
ctx.globalAlpha = 1;
let p;
for (var i=0; i<particles.length; i++) {
p = particles[i];
// Force of gravity
p.exertForce( {x: 0, y: p.m * .2} );
// p.applyGravity(.1);
p.update();
p.checkBounds(w, h);
p.draw(ctx);
}
requestAnimationFrame(draw);
}
draw();
/**
* Mouse interaction is where it gets sexy
*/
// Mouse object tracker
let mouse = {
p: { x: 0, y: 0 },
v: { x: 0, y: 0 },
down: false
};
// Track pointer pos
document.body.addEventListener('mousemove', function(ev) {
setMouseCoords(ev, c);
});
document.body.addEventListener('touchmove', function(ev) {
ev.preventDefault();
setMouseCoords(ev.changedTouches[0], c);
});
document.body.addEventListener('touchstart', function(ev) {
ev.preventDefault();
setMouseCoords(ev.changedTouches[0], c);
mouse.v.x = mouse.v.y = 0;
});
// Helper function
function setMouseCoords(ev, elmt) {
let rect = elmt.getBoundingClientRect();
let temp = { x: mouse.p.x, y: mouse.p.y };
mouse.p.x = Math.round(ev.clientX - rect.left);
mouse.p.y = Math.round(ev.clientY - rect.top);
mouse.v.x = (mouse.p.x - temp.x)*5;
mouse.v.y = (mouse.p.y - temp.y)*5;
}
// Track pointer state
document.body.addEventListener('mousedown', function(ev) { mouse.down = true });
document.body.addEventListener('touchstart', function(ev) { mouse.down = true });
document.body.addEventListener('mouseup', function(ev) { mouse.down = false });
document.body.addEventListener('mouseout', function(ev) { mouse.down = false });
document.body.addEventListener('touchend', function(ev) { mouse.down = false });
// Right click
document.body.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
for (var i=0; i<particles.length; i++) {
particles[i].v.x = particles[i].v.y = 0;
particles[i].a.x = particles[i].a.y = 0;
particles[i].p.y = h/2;
}
});
// Magic
document.body.addEventListener('mousemove', mouseForce);
document.body.addEventListener('touchmove', mouseForce);
// The function name sounds badass
function mouseForce() {
if (mouse.down) {
for (var i=0; i<particles.length; i++) {
particles[i].exertForce( {x: mouse.v.x*2, y: mouse.v.y*2} );
}
}
}
!
