Visualise waveforms on audience given its being pumped through by cli…

…cker
Dermah · Oct 13, 2019 · 7b3255e · 7b3255e
1 parent 531094d
commit 7b3255e
Show file tree

Hide file tree

Showing 6 changed files with 28,850 additions and 9 deletions.
diff --git a/pulsar/assets/js/audience/audience-app.js b/pulsar/assets/js/audience/audience-app.js
@@ -21,15 +21,17 @@ import NoSleep from "nosleep.js";
 
 const noSleep = new NoSleep();
 
-console.log(p5);
-
 new p5(p => {
   const widthPc = widthPercent => (p.width * widthPercent) / 100;
+  const heightPc = heightPercent => (p.height * heightPercent) / 100;
 
-  let tune;
   let pulseSize = 0;
+  let energyData = [];
 
-  channel.on("pulse", ({ size }) => {
+  channel.on("pulse", ({ type, size, energy }) => {
+    if (type === "waveform") {
+      energyData = energy;
+    }
     pulseSize = widthPc(size * 100);
   });
 
@@ -54,6 +56,27 @@ new p5(p => {
       pulseSize--;
     }
 
+    p.push();
+    p.rectMode(p.CENTER);
+    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);
+        p.rect(
+          (j * widthPc(100)) / freqEnergy.length +
+            (1 * widthPc(100)) / (2 * freqEnergy.length),
+          (i * heightPc(100)) / energyData.length +
+            (1 * heightPc(100)) / (2 * energyData.length),
+          // 10,
+          // 10
+          widthPc(100) / freqEnergy.length,
+          (heightPc(100 / energyData.length) * amp) / 255
+        );
+      });
+    });
+
     p.pop();
   };
 

diff --git a/pulsar/assets/js/audience/socket.js b/pulsar/assets/js/audience/socket.js
@@ -57,9 +57,9 @@ socket.connect();
 // Now that you are connected, you can join channels with a topic:
 let channel = socket.channel("audience:lobby", {});
 
-channel.on("pulse", payload => {
-  console.log(payload);
-});
+// channel.on("pulse", payload => {
+// console.log(payload);
+// });
 
 channel
   .join()

diff --git a/pulsar/assets/js/clicker/clicker-app.js b/pulsar/assets/js/clicker/clicker-app.js
@@ -29,15 +29,19 @@ new p5(function(p) {
   let amp;
   let fft;
   let peakDetect;
+  let energy;
+
+  // let energy = { bass: [], lowMid: [], mid: [], highMid: [], treble: [] };
 
   p.preload = function() {
     p.soundFormats("mp3");
     tune = p.loadSound("/music.mp3");
+    energy = p.loadJSON("/ttwaveform.json");
   };
 
   p.setup = function() {
     canvas = p.createCanvas(p.windowWidth, 300);
-    p.frameRate(60);
+    p.frameRate(15);
 
     var myDiv = p
       .createDiv("click to start")
@@ -67,6 +71,10 @@ new p5(function(p) {
 
     fft = new p5.FFT();
     peakDetect = new p5.PeakDetect();
+
+    // tune.onended(() => {
+    //   console.log(JSON.stringify(energy));
+    // });
   };
 
   p.draw = function() {
@@ -82,6 +90,16 @@ new p5(function(p) {
     peakDetect.update(fft);
 
     peakDetect.isDetected && channel.push("click", { size: amp.getLevel() });
+    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
+          )
+        )
+      });
 
     p.push();
     p.translate(-p.width / 2, -p.height / 2);
@@ -128,6 +146,14 @@ new p5(function(p) {
       10
     );
 
+    // if (amp) {
+    //   energy.bass.push(fft.getEnergy("bass"));
+    //   energy.lowMid.push(fft.getEnergy("lowMid"));
+    //   energy.mid.push(fft.getEnergy("mid"));
+    //   energy.highMid.push(fft.getEnergy("highMid"));
+    //   energy.treble.push(fft.getEnergy("treble"));
+    // }
+
     // Waveform
     var waveform = fft.waveform();
     p.noFill();