diff --git a/src/index.js b/src/index.js index 5af581d..a4bbffc 100644 --- a/src/index.js +++ b/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(); }; }); diff --git a/src/index.scss b/src/index.scss index 5548e4b..4221350 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,5 +1,4 @@ body { margin: 0; overflow: hidden; - transform: rotateY(180deg); }