diff --git a/src/gravity-points/app.js b/src/gravity-points/app.js index da13bd7..0aed075 100644 --- a/src/gravity-points/app.js +++ b/src/gravity-points/app.js @@ -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); + };