b12f/vyx-hex
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Lines horizontal

Browse source
This commit is contained in:
Benjamin Bädorf 2019-06-13 21:31:43 +02:00
parent 7194376bc8
commit b841512411
2 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/index.js
View file

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

1
src/index.scss
View file

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