Outline rectangles with amplitude

Dermah · Oct 13, 2019 · 85caa29 · 85caa29
1 parent 7b3255e
commit 85caa29
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/pulsar/assets/js/audience/audience-app.js b/pulsar/assets/js/audience/audience-app.js
@@ -27,10 +27,12 @@ new p5(p => {
 
   let pulseSize = 0;
   let energyData = [];
+  let totalAmp;
 
-  channel.on("pulse", ({ type, size, energy }) => {
+  channel.on("pulse", ({ type, size, energy, amplitude }) => {
     if (type === "waveform") {
       energyData = energy;
+      totalAmp = amplitude;
     }
     pulseSize = widthPc(size * 100);
   });
@@ -61,9 +63,9 @@ new p5(p => {
     p.translate(-p.width / 2, -p.height / 2);
     energyData.map((freqEnergy, i) => {
       p.fill(250);
-      p.stroke(0);
       freqEnergy.map((amp, j) => {
-        j / freqEnergy.length > 0.5 && p.fill(25) && p.stroke(255);
+        j / freqEnergy.length > 0.5 && p.fill(25);
+        p.stroke(totalAmp * 255);
         p.rect(
           (j * widthPc(100)) / freqEnergy.length +
             (1 * widthPc(100)) / (2 * freqEnergy.length),

diff --git a/pulsar/assets/js/clicker/clicker-app.js b/pulsar/assets/js/clicker/clicker-app.js
@@ -23,20 +23,23 @@ import "p5/lib/addons/p5.dom";
 console.log(p5);
 
 new p5(function(p) {
+  let previewTune;
   let tune;
   let pulseSize;
   let canvas;
   let amp;
   let fft;
   let peakDetect;
-  let energy;
 
+  // let energy;
+  let energy = [[], [], [], [], []];
   // let energy = { bass: [], lowMid: [], mid: [], highMid: [], treble: [] };
 
   p.preload = function() {
     p.soundFormats("mp3");
+    previewTune = p.loadSound("/music.mp3");
     tune = p.loadSound("/music.mp3");
-    energy = p.loadJSON("/ttwaveform.json");
+    // energy = p.loadJSON("/ttwaveform.json");
   };
 
   p.setup = function() {
@@ -60,24 +63,32 @@ new p5(function(p) {
     });
 
     canvas.mouseClicked(function() {
-      if (tune.isPlaying()) {
+      if (previewTune.isPlaying()) {
+        previewTune.stop();
         tune.stop();
         amp = undefined;
       } else {
-        tune.play();
-        amp = new p5.Amplitude();
+        previewTune.play();
       }
     });
 
     fft = new p5.FFT();
+    amp = new p5.Amplitude();
+    fft.setInput(previewTune);
+    // amp.setInput(previewTune);
     peakDetect = new p5.PeakDetect();
+    previewTune.disconnect();
 
     // tune.onended(() => {
     //   console.log(JSON.stringify(energy));
     // });
   };
 
   p.draw = function() {
+    if (!tune.isPlaying() && previewTune.currentTime() > 1) {
+      tune.play();
+    }
+
     p.push();
     p.translate(p.width / 2, p.height / 2);
 
@@ -90,15 +101,33 @@ new p5(function(p) {
     peakDetect.update(fft);
 
     peakDetect.isDetected && channel.push("click", { size: amp.getLevel() });
+
+    energy[0].push(fft.getEnergy("bass"));
+    energy[0].length > 30 && energy[0].splice(0, 1);
+
+    energy[1].push(fft.getEnergy("lowMid"));
+    energy[1].length > 30 && energy[1].splice(0, 1);
+
+    energy[2].push(fft.getEnergy("mid"));
+    energy[2].length > 30 && energy[2].splice(0, 1);
+
+    energy[3].push(fft.getEnergy("highMid"));
+    energy[3].length > 30 && energy[3].splice(0, 1);
+
+    energy[4].push(fft.getEnergy("treble"));
+    energy[4].length > 30 && energy[4].splice(0, 1);
+
     tune.isPlaying() &&
       channel.push("pulse", {
         type: "waveform",
-        energy: Object.keys(energy).map(key =>
-          energy[key].slice(
-            Math.abs(Math.floor(tune.currentTime() * 15) - 20),
-            Math.floor(tune.currentTime() * 15) + 20
-          )
-        )
+        amplitude: amp.getLevel(),
+        energy: energy
+        // energyy: Object.keys(energy).map(key =>
+        //   energy[key].slice(
+        //     Math.abs(Math.floor(tune.currentTime() * 15) - 20),
+        //     Math.floor(tune.currentTime() * 15) + 20
+        //   )
+        // )
       });
 
     p.push();