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");
|
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);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user