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