Tryna reduce framerate

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() {

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() {

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 = () => {

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