Lines horizontal

src/index.js

@@ -4,7 +4,7 @@ import './index.scss';
 const FFT_SIZE = 256;
 const VOLUME_THRESHOLD = 20;
 const LINE_MARGIN = 20;
-const MAX_LINES = 60;
+const MAX_LINES = window.innerWidth / LINE_MARGIN;
 
 function getRMS(spectrum) {
   let rms = 0;
@@ -42,7 +42,8 @@ async function main() {
   analyser.smoothingTimeConstant = 0.2;
   analyser.fftSize = FFT_SIZE;
 
-  let lines = [];
+  let line;
+  let fresh = false;
   let maxPitch = 0;
   let minPitch = 0;
 
@@ -60,11 +61,11 @@ async function main() {
     
     const volume = getRMS(spectrum);
     const pitch = getPitch(spectrum, volume);
-    lines.unshift({
+    line = {
       spectrum,
       volume,
       pitch,
-    });
+    };
 
     if (pitch > maxPitch) {
       maxPitch = pitch;
@@ -74,45 +75,52 @@ async function main() {
       minPitch = pitch;
     }
 
-    if (lines.length > MAX_LINES) {
-      lines.pop();
-    }
+    fresh = true;
   }
 
   const input = audioCtx.createMediaStreamSource(microphone);
   input.connect(analyser);
   analyser.connect(audioProcessor);
   // audioProcessor.connect(audioCtx.destination);
-  const baseHeight = window.innerHeight * 0.8; 
-  const spectrumPointWidth = window.innerWidth / analyser.frequencyBinCount;
+  const baseWidth = 2; 
+  const spectrumPointHeight = window.innerHeight / analyser.frequencyBinCount;
 
   const instance = new p5(( sketch ) => {
     sketch.setup = () => {
       sketch.createCanvas(window.innerWidth, window.innerHeight);
       sketch.colorMode(sketch.HSL, 255);
+      sketch.background(0);
     };
 
     sketch.draw = () => {
-      sketch.background(sketch.color(0, 0, 0));
-      for (let l = 0; l < lines.length; l++) {
-        const lineBaseHeight = baseHeight - (l * LINE_MARGIN);
-        const line = lines[l];
-        sketch.fill(`rgba(255, 255, 255, 0.2)`);
-        sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
-        sketch.strokeWeight(1);
-        sketch.beginShape();
-        sketch.curveVertex(-10, lineBaseHeight);
-        sketch.curveVertex(-10, lineBaseHeight);
-        sketch.curveVertex(0, lineBaseHeight);
-        for (let i = 1; i < line.spectrum.length - 1; i++) {
-          const point = line.spectrum[i];
-          sketch.curveVertex(i * spectrumPointWidth, lineBaseHeight - point);
-        }
-        sketch.curveVertex(window.innerWidth, lineBaseHeight);
-        sketch.curveVertex(window.innerWidth + 10, lineBaseHeight);
-        sketch.curveVertex(window.innerWidth + 10, lineBaseHeight);
-        sketch.endShape();
+      if (!fresh) {
+        return;
       }
+
+      fresh = false;
+
+      const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - LINE_MARGIN) * 2, window.innerHeight * 2);
+      sketch.drawingContext.putImageData(image, LINE_MARGIN * 2, 0);
+      sketch.noStroke();
+      sketch.fill(0);
+      sketch.rect(0, 0, LINE_MARGIN, window.innerHeight);
+      
+      const lineBaseWidth = baseWidth;
+      sketch.fill(`rgba(255, 255, 255, 0.2)`);
+      sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
+      sketch.strokeWeight(1);
+      sketch.beginShape();
+      sketch.curveVertex(lineBaseWidth, -10);
+      sketch.curveVertex(lineBaseWidth, -10);
+      sketch.curveVertex(lineBaseWidth, 0);
+      for (let i = 1; i < line.spectrum.length - 1; i++) {
+        const point = line.spectrum[i];
+        sketch.curveVertex(lineBaseWidth + point, i * spectrumPointHeight);
+      }
+      sketch.curveVertex(lineBaseWidth, window.innerHeight);
+      sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
+      sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
+      sketch.endShape();
     };
   });
 

src/index.scss

@@ -1,5 +1,4 @@
 body {
   margin: 0;
   overflow: hidden;
-  transform: rotateY(180deg);
 }