More gravity points work

This commit is contained in:
Greg Shuflin 2023-10-28 17:20:30 -07:00
parent 97e0573836
commit caf53e4239

View File

@ -2,7 +2,7 @@ const Victor = require("victor");
const dat = require("dat.gui"); const dat = require("dat.gui");
// TODO cycle this bkg color // 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 PARTICLE_RADIUS = 1;
const G_POINT_RADIUS = 10; const G_POINT_RADIUS = 10;
const G_POINT_RADIUS_LIMITS = 65; const G_POINT_RADIUS_LIMITS = 65;
@ -36,14 +36,49 @@ const resize = (e) => {
window.addEventListener('resize', resize, false); window.addEventListener('resize', resize, false);
resize(null); 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 particles = [];
const addParticle = (num) => { 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) => { const removeParticle = (num) => {
if (particles.length < num) {
num = particles.length;
}
for (var i = 0; i < num; i++) {
particles.pop();
}
}; };
const controls = { 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.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
gui.close(); 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"); console.log("Finished initting");
@ -76,10 +114,44 @@ const loop = (timestamp) => {
context.fillStyle = BACKGROUND_COLOR; context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, screenWidth, screenHeight); context.fillRect(0, 0, screenWidth, screenHeight);
context.fillStyle = grad; context.fillStyle = grad;
context.fillRect(0, 0, screenWidth, screenHeight); context.fillRect(0, 0, screenWidth, screenHeight);
context.restore(); 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);
}; };