From 75aec8bbb2632c63036dedeaa4274090b9056e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Sat, 15 Jun 2019 00:58:50 +0200
Subject: [PATCH] Squares

---
 src/squares.js | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/squares.js b/src/squares.js
index db7b1d6..24f93e6 100644
--- a/src/squares.js
+++ b/src/squares.js
@@ -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);