diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index dc1af5a..d32719d 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -32,6 +32,7 @@ const options = { centerLight: true, lightAlpha: 5, perfectRed: false, + spiralInwards: false, }; const Orb = function(x, y) { @@ -45,12 +46,22 @@ const Orb = function(x, y) { this.radius = Math.sqrt(dx * dx + dy * dy); this.size = ( this.radius / 300 ) + 1; this.speed = ( random(1, 10) / 300000 ) * ( this.radius ) + 0.015; + + this.removed = false; }; Orb.prototype.update = function() { const speed = options.speed; this.lastAngle = this.angle; this.angle += this.speed * ( speed / 50 ) * state.dt; + + if (options.spiralInwards) { + if (this.radius === 0) { + this.removed = true; + } else { + this.radius -= 1; + } + } this.x = this.radius * Math.cos( this.angle ); this.y = this.radius * Math.sin( this.angle ); }; @@ -58,7 +69,7 @@ Orb.prototype.update = function() { Orb.prototype.render = function(timestamp) { this.update(); - const radius = this.radius; + const radius = this.radius > 0 ? this.radius : 0; // perfect-red = 0 const offset = timestamp / options.speed; @@ -104,7 +115,6 @@ Orb.prototype.render = function(timestamp) { const createOrb = (x, y) => { console.log(`Creating orb ${x}, ${y}`); state.orbs.push(new Orb(x, y)); - state.total += 1; }; @@ -129,7 +139,7 @@ const clear = () => { const controls = new dat.GUI( { autoPlace: false } ) const container = document.querySelector("#controlPanel"); -controls.add(state, "total" ).name( "Total Placed" ).listen(); +controls.add(state, "total" ).name("Total Orbs").listen(); controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed"); controls.add(options, "scale" ).min(0.5).max(5).step(0.1).name("Scale"); @@ -137,6 +147,7 @@ controls.add(options, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)"); controls.add(options, "centerLight" ).name("Toggle Light"); controls.add(options, "lightAlpha" ).min(0).max(100).step(1).name("Light Alpha"); controls.add(options, "perfectRed").name("Perfect Red"); +controls.add(options, "spiralInwards").name("Spiral Inwwards"); container.appendChild(controls.domElement); @@ -151,6 +162,8 @@ const loop = (timestamp) => { state.orbs.forEach((orb) => { orb.render(timestamp); }); + state.orbs = state.orbs.filter((orb) => !orb.removed); + state.total = state.orbs ctx.restore(); };