This commit is contained in:
Benjamin Bädorf 2019-06-14 21:42:49 +02:00
parent 70a21d274f
commit 192feb41f8
3 changed files with 12 additions and 16 deletions

View file

@ -10,7 +10,7 @@ export default class HorizontalLinesAnimation {
spectrumPointHeight = 20; spectrumPointHeight = 20;
maxLines = 10; maxLines = 10;
line; data;
fresh = false; fresh = false;
averageSpectrum; averageSpectrum;
@ -52,7 +52,7 @@ export default class HorizontalLinesAnimation {
const data = getSpectrumData(spectrum); const data = getSpectrumData(spectrum);
this.worker.postMessage(data); this.worker.postMessage(data);
this.line = data; this.data = data;
this.fresh = true; this.fresh = true;
} }
@ -77,13 +77,13 @@ export default class HorizontalLinesAnimation {
sketch.curveVertex(this.BASE_WIDTH, -10); sketch.curveVertex(this.BASE_WIDTH, -10);
sketch.curveVertex(this.BASE_WIDTH, -10); sketch.curveVertex(this.BASE_WIDTH, -10);
sketch.curveVertex(this.BASE_WIDTH, 0); sketch.curveVertex(this.BASE_WIDTH, 0);
for (let i = 1; i < this.line.spectrum.length - 1; i++) { for (let i = 1; i < this.data.spectrum.length - 1; i++) {
let point; let point;
if (this.averageSpectrum) { if (this.averageSpectrum) {
point = Math.max(this.line.spectrum[i] - (this.averageSpectrum[i] * 0.8), 0); point = Math.max(this.data.spectrum[i] - (this.averageSpectrum[i] * 0.8), 0);
// point = 5 * (this.line.spectrum[i] / this.averageSpectrum[i]); // point = 5 * (this.data.spectrum[i] / this.averageSpectrum[i]);
} else { } else {
point = this.line.spectrum[i]; point = this.data.spectrum[i];
} }
sketch.curveVertex(this.BASE_WIDTH + point, i * this.spectrumPointHeight); sketch.curveVertex(this.BASE_WIDTH + point, i * this.spectrumPointHeight);
} }

View file

@ -33,7 +33,7 @@ async function main() {
function activate(animation) { function activate(animation) {
activeAnimation = animation; activeAnimation = animation;
input.disconnect(); input.disconnect();
input.connect(animation.analyser); input.connect(activeAnimation.analyser);
animation.setup(sketch); animation.setup(sketch);
} }
@ -54,10 +54,6 @@ async function main() {
sketch.draw = () => { sketch.draw = () => {
activeAnimation.draw(sketch); activeAnimation.draw(sketch);
}; };
setTimeout(() => {
// activactiveAnimation =
}, 1 * 60 * 1000);
}); });
} }

View file

@ -17,7 +17,7 @@ export default class SquaresAnimation {
minPitch = 360; minPitch = 360;
maxPitch = 0; maxPitch = 0;
circle; data;
fresh = false; fresh = false;
constructor(audioCtx) { constructor(audioCtx) {
@ -72,7 +72,7 @@ export default class SquaresAnimation {
this.minPitch = pitch; this.minPitch = pitch;
} }
this.circle = data; this.data = data;
this.fresh = true; this.fresh = true;
} }
@ -82,10 +82,10 @@ export default class SquaresAnimation {
return; return;
} }
const color = ((this.circle.pitch - this.minPitch) / (this.maxPitch - this.minPitch)) * 360; const color = ((this.data.pitch - this.minPitch) / (this.maxPitch - this.minPitch)) * 360;
const brightness = ((this.circle.volume - this.minVolume) / (this.maxVolume - this.minVolume)); const brightness = ((this.data.volume - this.minVolume) / (this.maxVolume - this.minVolume));
sketch.stroke(color, 100, 100, brightness); sketch.stroke(color, 100, 100, brightness);
for (let i = 0; i < spectrum.length + 2; i++) { for (let i = 0; i < this.data.spectrum.length + 2; i++) {
const x = getRandomBetween(0, Math.floor(window.innerWidth / this.GRID_SIZE)) * this.GRID_SIZE; const x = getRandomBetween(0, Math.floor(window.innerWidth / this.GRID_SIZE)) * this.GRID_SIZE;
const y = getRandomBetween(0, Math.floor(window.innerHeight / this.GRID_SIZE)) * this.GRID_SIZE; const y = getRandomBetween(0, Math.floor(window.innerHeight / this.GRID_SIZE)) * this.GRID_SIZE;
sketch.fill(color, 100, 100, brightness * 0.5); sketch.fill(color, 100, 100, brightness * 0.5);