From 81bafdf09aeebf4b70725949b1c037690c6ae029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Fri, 14 Jun 2019 21:52:05 +0200
Subject: [PATCH] Tryna reduce framerate

---
 src/circles.js          | 18 +++++++++++++-----
 src/horizontal-lines.js | 18 +++++++++++++-----
 src/index.js            |  5 ++++-
 src/squares.js          | 18 +++++++++++++-----
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/circles.js b/src/circles.js
index 51576dd..22722b2 100644
--- a/src/circles.js
+++ b/src/circles.js
@@ -18,19 +18,27 @@ export default class CirclesAnimation {
   averageSpectrum;
 
   constructor(audioCtx) {
-    this.worker = new Worker();
     this.analyser = new AnalyserNode(audioCtx);
     this.analyser.fftSize = this.FFT_SIZE;
     this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
     this.audioProcessor.onaudioprocess = () => this.audioProcess();
-    this.analyser.connect(this.audioProcessor);
-    this.worker.onmessage = e => this.getAverageData(e.data);
   }
 
-  setup(sketch) {
+  start(sketch) {
+    this.resize();
+
+    this.analyser.connect(this.audioProcessor);
+
+    this.worker = new Worker();
+    this.worker.onmessage = e => this.getAverageData(e.data);
+
     sketch.createCanvas(window.innerWidth, window.innerHeight);
     sketch.colorMode(sketch.HSL, 255);
-    this.resize();
+  }
+
+  stop() {
+      this.analyser.disconnect();
+      this.worker.terminate();
   }
 
   resize() {
diff --git a/src/horizontal-lines.js b/src/horizontal-lines.js
index e2b1354..5a710d2 100644
--- a/src/horizontal-lines.js
+++ b/src/horizontal-lines.js
@@ -20,19 +20,27 @@ export default class HorizontalLinesAnimation {
   audioProcessor;
 
   constructor(audioCtx) {
-    this.worker = new Worker();
     this.analyser = new AnalyserNode(audioCtx);
     this.analyser.fftSize = this.FFT_SIZE;
     this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
     this.audioProcessor.onaudioprocess = () => this.audioProcess();
-    this.analyser.connect(this.audioProcessor);
-    this.worker.onmessage = e => this.getAverageData(e.data);
   }
 
-  setup(sketch) {
+  start(sketch) {
+    this.resize();
+
+    this.analyser.connect(this.audioProcessor);
+
+    this.worker = new Worker();
+    this.worker.onmessage = e => this.getAverageData(e.data);
+
     sketch.colorMode(sketch.RGB, 255);
     sketch.background(0);
-    this.resize();
+  }
+
+  stop() {
+      this.analyser.disconnect();
+      this.worker.terminate();
   }
 
   resize() {
diff --git a/src/index.js b/src/index.js
index 1c524cc..a9e7e3f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,10 +31,13 @@ async function main() {
     };
 
     function activate(animation) {
+      if (activeAnimation) {
+          activeAnimation.stop();
+      }
       activeAnimation = animation;
       input.disconnect();
       input.connect(activeAnimation.analyser);
-      animation.setup(sketch);
+      animation.start(sketch);
     }
     
     sketch.setup = () => {
diff --git a/src/squares.js b/src/squares.js
index 6d44d2b..ee689ce 100644
--- a/src/squares.js
+++ b/src/squares.js
@@ -21,19 +21,27 @@ export default class SquaresAnimation {
   fresh = false;
 
   constructor(audioCtx) {
-    this.worker = new Worker();
     this.analyser = new AnalyserNode(audioCtx);
     this.analyser.fftSize = this.FFT_SIZE;
     this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
     this.audioProcessor.onaudioprocess = () => this.audioProcess();
-    this.analyser.connect(this.audioProcessor);
-    this.worker.onmessage = e => this.getAverageData(e.data);
   }
 
-  setup(sketch) {
+  start(sketch) {
+    this.resize();
+
+    this.analyser.connect(this.audioProcessor);
+
+    this.worker = new Worker();
+    this.worker.onmessage = e => this.getAverageData(e.data);
+
     sketch.background('rgb(20, 30, 30)');
     sketch.colorMode(sketch.HSB);
-    this.resize();
+  }
+
+  stop() {
+    this.analyser.disconnect();
+    this.worker.terminate();
   }
 
   resize() {}