More gravity points work
This commit is contained in:
parent
97e0573836
commit
caf53e4239
@ -2,7 +2,7 @@ const Victor = require("victor");
|
||||
const dat = require("dat.gui");
|
||||
|
||||
// TODO cycle this bkg color
|
||||
const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
|
||||
const BACKGROUND_COLOR = 'rgba(11, 51, 100, 1)';
|
||||
const PARTICLE_RADIUS = 1;
|
||||
const G_POINT_RADIUS = 10;
|
||||
const G_POINT_RADIUS_LIMITS = 65;
|
||||
@ -36,14 +36,49 @@ const resize = (e) => {
|
||||
window.addEventListener('resize', resize, false);
|
||||
resize(null);
|
||||
|
||||
class Particle {
|
||||
constructor(x, y, radius) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.radius = radius;
|
||||
this._latest = new Victor();
|
||||
this._speed = new Victor();
|
||||
}
|
||||
|
||||
addSpeed(speedVec) {
|
||||
this._speed.add(speedVec);
|
||||
}
|
||||
|
||||
update() {
|
||||
|
||||
if (this._speed.length() > 12) {
|
||||
this._speed.normalize().scale(12);
|
||||
}
|
||||
|
||||
this._latest.set(this);
|
||||
this.add(this._speed);
|
||||
}
|
||||
}
|
||||
|
||||
const particles = [];
|
||||
const addParticle = (num) => {
|
||||
|
||||
for (var i = 0; i < num; i++) {
|
||||
const x = Math.floor(Math.random() * screenWidth - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS;
|
||||
const y = Math.floor(Math.random() * screenHeight - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS;
|
||||
const p = new Particle(x, y, PARTICLE_RADIUS);
|
||||
const speed = new Victor(Math.random() * 2 - 1, Math.random() * 2 - 1);
|
||||
p.addSpeed(speed);
|
||||
particles.push(p);
|
||||
}
|
||||
};
|
||||
|
||||
const removeParticle = (num) => {
|
||||
|
||||
if (particles.length < num) {
|
||||
num = particles.length;
|
||||
}
|
||||
for (var i = 0; i < num; i++) {
|
||||
particles.pop();
|
||||
}
|
||||
};
|
||||
|
||||
const controls = {
|
||||
@ -62,6 +97,9 @@ gui.add(controls, "particleNum").min(0).max(500).step(1).name("Particle Num").on
|
||||
//gui.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
|
||||
gui.close();
|
||||
|
||||
const x = new Victor(1,24);
|
||||
const y = new Victor(2,485);
|
||||
console.log(x.add(y), x, y);
|
||||
|
||||
|
||||
console.log("Finished initting");
|
||||
@ -76,10 +114,44 @@ const loop = (timestamp) => {
|
||||
context.fillStyle = BACKGROUND_COLOR;
|
||||
context.fillRect(0, 0, screenWidth, screenHeight);
|
||||
|
||||
|
||||
context.fillStyle = grad;
|
||||
context.fillRect(0, 0, screenWidth, screenHeight);
|
||||
context.restore();
|
||||
|
||||
|
||||
bufferCtx.save();
|
||||
bufferCtx.globalCompositeOperation = 'destination-out';
|
||||
bufferCtx.globalAlpha = 0.35;
|
||||
bufferCtx.fillRect(0, 0, screenWidth, screenHeight);
|
||||
bufferCtx.restore();
|
||||
|
||||
|
||||
bufferCtx.save();
|
||||
bufferCtx.fillStyle = bufferCtx.strokeStyle = '#fff';
|
||||
bufferCtx.lineCap = bufferCtx.lineJoin = 'round';
|
||||
bufferCtx.lineWidth = PARTICLE_RADIUS * 2;
|
||||
bufferCtx.beginPath();
|
||||
|
||||
const len = particles.length;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
p = particles[i];
|
||||
p.update();
|
||||
bufferCtx.moveTo(p.x, p.y);
|
||||
bufferCtx.lineTo(p._latest.x, p._latest.y);
|
||||
}
|
||||
bufferCtx.stroke();
|
||||
bufferCtx.beginPath();
|
||||
for (i = 0; i < len; i++) {
|
||||
p = particles[i];
|
||||
bufferCtx.moveTo(p.x, p.y);
|
||||
bufferCtx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
|
||||
}
|
||||
bufferCtx.fill();
|
||||
bufferCtx.restore();
|
||||
|
||||
context.drawImage(bufferCvs, 0, 0);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user