Last minute fixes for fading out

voicegardens/static/voicegardens.js

@@ -1,5 +1,4 @@
-// Note(decentral1se): in order to use the `delete` operator
-// "use strict";
+"use strict";
 
 //
 // Voicegardens front-end Javascript
@@ -15,7 +14,7 @@ var _canvas;
 var offlineRecordingDuration = 3000;
 
 // Offline limits for hardware considerations
-var offlineLimits = 7;
+var offlineLimits = 8; // shapes limit is n - 1 (zero index) = 7
 
 // URL which exposes the archive saving API end-point
 var archiveUrl = window.location + "add-to-archive";
@@ -69,8 +68,15 @@ function record() {
   userStartAudio();
   getAudioContext().resume();
   if (microphone.enabled === true) {
-    recorder.record(recording);
-    setTimeout(stop, offlineRecordingDuration);
+    let limits = hasReachedOfflineLimits();
+    if (!limits) {
+      recorder.record(recording);
+      setTimeout(stop, offlineRecordingDuration);
+    } else {
+      setTimeout(function () {
+        shapes = [];
+      }, 3000);
+    }
   }
 }
 
@@ -84,19 +90,17 @@ function stop() {
   }
 }
 
-function gardenOfflineLimits() {
+function hasReachedOfflineLimits() {
   /**
    * Ensure shapes stay within limits
    **/
-  if (shapes.length < offlineLimits) return;
+  if (shapes.length < offlineLimits - 1) return false;
 
   for (let i = 0; i < shapes.length; i++) {
     let shape = shapes[i];
-    delete shape;
+    shape.hidden = true;
   }
 
-  shapes = [];
-
   return true;
 }
 
@@ -306,6 +310,10 @@ class GeneratedShape {
     this.nextTick = random(1000, 9000);
     this.tickTimer = 0;
 
+    // Hiding and cleaning up
+    this.hidden = false;
+    this.cleanup = false;
+
     this.initialise();
   }
 
@@ -379,16 +387,22 @@ class GeneratedShape {
     /**
      * Draw colour and fade-in shape.
      **/
-    if (this.opacity != 256) {
-      if (this.opacity < 256) {
-        // shape should fade in, so increment alpha value
-        let currentAlpha = this.colour._getAlpha();
-        this.colour.setAlpha(currentAlpha + random(0, 3));
-      } else {
-        // shape has faded-in, show it as fully visible now
-        this.opacity = 256;
-      }
+    let currentAlpha = this.colour._getAlpha();
+
+    if (this.colour._getAlpha() < 256 && !this.hidden) {
+      this.colour.setAlpha(currentAlpha + random(0, 3));
+    }
+
+    if (currentAlpha > 0 && this.hidden === true) {
+      this.colour.setAlpha(currentAlpha - random(0, 3));
     }
+
+    if (currentAlpha < 0) {
+      setTimeout(function () {
+        this.cleanup = true;
+      }, 2000);
+    }
+
     fill(this.colour);
   }
 
@@ -564,9 +578,8 @@ function draw() {
       let amp = sound.getPeaks(1)[0] * 100;
       let dur = sound.duration();
       let shape = new GeneratedShape(sound, amp, dur);
-      gardenOfflineLimits();
-      shape.sound();
       shapes.push(shape);
+      shape.sound();
       sendToArchive();
     });
     newSoundJustRecorded = false;
@@ -583,6 +596,10 @@ function draw() {
       shape.destY = random(windowHeight);
     }
 
+    if (shape.hidden === true || shape.cleanup === true) {
+      continue;
+    }
+
     // play recordings when shapes collide
     let [collision, collidedShape] = shape.collide(shapes);
     if (collision === true) {