Tryna reduce framerate

This commit is contained in:
Benjamin Bädorf 2019-06-14 21:52:05 +02:00
parent 192feb41f8
commit 81bafdf09a
4 changed files with 43 additions and 16 deletions

View file

@ -18,19 +18,27 @@ export default class CirclesAnimation {
averageSpectrum; averageSpectrum;
constructor(audioCtx) { constructor(audioCtx) {
this.worker = new Worker();
this.analyser = new AnalyserNode(audioCtx); this.analyser = new AnalyserNode(audioCtx);
this.analyser.fftSize = this.FFT_SIZE; this.analyser.fftSize = this.FFT_SIZE;
this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1); this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
this.audioProcessor.onaudioprocess = () => this.audioProcess(); 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.createCanvas(window.innerWidth, window.innerHeight);
sketch.colorMode(sketch.HSL, 255); sketch.colorMode(sketch.HSL, 255);
this.resize(); }
stop() {
this.analyser.disconnect();
this.worker.terminate();
} }
resize() { resize() {

View file

@ -20,19 +20,27 @@ export default class HorizontalLinesAnimation {
audioProcessor; audioProcessor;
constructor(audioCtx) { constructor(audioCtx) {
this.worker = new Worker();
this.analyser = new AnalyserNode(audioCtx); this.analyser = new AnalyserNode(audioCtx);
this.analyser.fftSize = this.FFT_SIZE; this.analyser.fftSize = this.FFT_SIZE;
this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1); this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
this.audioProcessor.onaudioprocess = () => this.audioProcess(); 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.colorMode(sketch.RGB, 255);
sketch.background(0); sketch.background(0);
this.resize(); }
stop() {
this.analyser.disconnect();
this.worker.terminate();
} }
resize() { resize() {

View file

@ -31,10 +31,13 @@ async function main() {
}; };
function activate(animation) { function activate(animation) {
if (activeAnimation) {
activeAnimation.stop();
}
activeAnimation = animation; activeAnimation = animation;
input.disconnect(); input.disconnect();
input.connect(activeAnimation.analyser); input.connect(activeAnimation.analyser);
animation.setup(sketch); animation.start(sketch);
} }
sketch.setup = () => { sketch.setup = () => {

View file

@ -21,19 +21,27 @@ export default class SquaresAnimation {
fresh = false; fresh = false;
constructor(audioCtx) { constructor(audioCtx) {
this.worker = new Worker();
this.analyser = new AnalyserNode(audioCtx); this.analyser = new AnalyserNode(audioCtx);
this.analyser.fftSize = this.FFT_SIZE; this.analyser.fftSize = this.FFT_SIZE;
this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1); this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
this.audioProcessor.onaudioprocess = () => this.audioProcess(); 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.background('rgb(20, 30, 30)');
sketch.colorMode(sketch.HSB); sketch.colorMode(sketch.HSB);
this.resize(); }
stop() {
this.analyser.disconnect();
this.worker.terminate();
} }
resize() {} resize() {}