diff --git a/pulsar/assets/js/audience/audience-app.js b/pulsar/assets/js/audience/audience-app.js index fd7d4dd..1bf36b0 100644 --- a/pulsar/assets/js/audience/audience-app.js +++ b/pulsar/assets/js/audience/audience-app.js @@ -25,6 +25,8 @@ new p5(p => { const widthPc = widthPercent => (p.width * widthPercent) / 100; const heightPc = heightPercent => (p.height * heightPercent) / 100; + let instrument; + let pulseSize = 0; let energyData = []; let totalAmp; @@ -40,6 +42,7 @@ new p5(p => { p.preload = () => {}; p.setup = () => { + instrument = Math.floor(Math.random() * 5); const canvas = p.createCanvas(p.windowWidth, p.windowHeight); canvas.mouseClicked(function() { @@ -48,11 +51,14 @@ new p5(p => { }; p.draw = () => { + p.background(0, 0, totalAmp * 255 || 0); + + p.textAlign(p.CENTER); + p.fill(255); + p.text(`You are ${instrument}`, p.width / 2, 15); p.push(); p.translate(p.width / 2, p.height / 2); - p.background(0, 0, totalAmp * 255 || 0); - if (pulseSize > 0) { p.circle(0, 0, pulseSize); pulseSize--; @@ -61,22 +67,25 @@ new p5(p => { p.push(); p.rectMode(p.CENTER); p.translate(-p.width / 2, -p.height / 2); - energyData.map((freqEnergy, i) => { - p.fill(250); - 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 - ); - }); + + // energyData.map((freqEnergy, i) => { + const i = 0; + const freqEnergy = energyData[instrument] || []; + const channels = 1; //energyData.length + p.fill(250); + 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)) / channels + (1 * heightPc(100)) / (2 * channels), + // 10, + // 10 + widthPc(100) / freqEnergy.length, + (heightPc(100 / channels) * amp) / 255 + ); }); + // }); p.pop(); };