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