b12f/vyx-hex
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Squares

Browse source
This commit is contained in:
Benjamin Bädorf 2019-06-15 00:58:50 +02:00
parent 013ec58d8a
commit 75aec8bbb2
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/squares.js
View file

@ -12,11 +12,16 @@ export default class SquaresAnimation {
analyser; analyser;
audioProcessor; audioProcessor;
maxX;
maxY;
minVolume = 360; minVolume = 360;
maxVolume = 0; maxVolume = 0;
minPitch = 360; minPitch = 360;
maxPitch = 0; maxPitch = 0;
averageSpectrum = [];
data; data;
fresh = false; fresh = false;
@ -36,7 +41,7 @@ export default class SquaresAnimation {
this.worker = new Worker(); this.worker = new Worker();
this.worker.onmessage = e => this.getAverageData(e.data); this.worker.onmessage = e => this.getAverageData(e.data);
sketch.background('rgb(20, 30, 30)'); sketch.background(0);
sketch.colorMode(sketch.HSB); sketch.colorMode(sketch.HSB);
} }
@ -45,7 +50,10 @@ export default class SquaresAnimation {
this.worker.terminate(); this.worker.terminate();
} }
resize() {} resize() {
this.maxX = Math.floor(window.innerWidth / this.GRID_SIZE);
this.maxY = Math.floor(window.innerHeight / this.GRID_SIZE);
}
getAverageData(data) { getAverageData(data) {
this.minVolume = data.minVolume; this.minVolume = data.minVolume;
@ -53,6 +61,8 @@ export default class SquaresAnimation {
this.minPitch = data.minPitch; this.minPitch = data.minPitch;
this.maxPitch = data.maxPitch; this.maxPitch = data.maxPitch;
this.averageSpectrum = data.averageSpectrum;
} }
audioProcess() { audioProcess() {
@ -86,18 +96,20 @@ export default class SquaresAnimation {
} }
draw(sketch) { draw(sketch) {
sketch.background('rgba(20, 30, 30, 0.02)'); sketch.background('rgba(0, 0, 0, 0.02)');
if (!this.fresh) { if (!this.fresh) {
return; return;
} }
const brightness = ((this.data.volume - this.minVolume) / (this.maxVolume - this.minVolume)) * 80;
const color = ((this.data.pitch - this.minPitch) / (this.maxPitch - this.minPitch)) * 360; const color = ((this.data.pitch - this.minPitch) / (this.maxPitch - this.minPitch)) * 360;
const brightness = ((this.data.volume - this.minVolume) / (this.maxVolume - this.minVolume)); for (let i = 0; i < brightness; i++) {
sketch.stroke(color, 100, 100, brightness); const p = this.data.spectrum[i];
for (let i = 0; i < this.data.spectrum.length; i += 4) { sketch.stroke(color, 100, 100);
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; sketch.fill(color, 100, brightness);
sketch.fill(color, 100, 100, brightness * 0.5); const x = getRandomBetween(0, this.maxX) * this.GRID_SIZE;
const y = getRandomBetween(0, this.maxY) * this.GRID_SIZE;
sketch.beginShape(); sketch.beginShape();
sketch.vertex(x, y); sketch.vertex(x, y);
sketch.vertex(x, y + this.GRID_SIZE); sketch.vertex(x, y + this.GRID_SIZE);