Orbs spiral inwards

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();
 };