Tryna reduce framerate
This commit is contained in:
parent
192feb41f8
commit
81bafdf09a
|
@ -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() {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
|
@ -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() {}
|
||||||
|
|
Loading…
Reference in a new issue