Microphone bars

This commit is contained in:
Benjamin Bädorf 2019-06-07 17:47:04 +02:00
parent d632a1009d
commit 24afe2c3ce
2 changed files with 54 additions and 13 deletions

View file

@ -1,9 +1,16 @@
import p5 from 'p5'; import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
import './index.scss'; import './index.scss';
function getRandomColorValue() { const VOLUME_NORMALIZATION = 1000;
return Math.floor(Math.random() * 256); const THRESHOLD = 10 / VOLUME_NORMALIZATION;
function getColorValue(volume) {
return Math.floor(volume * VOLUME_NORMALIZATION * 256);
}
function getWidth(volume) {
return volume * VOLUME_NORMALIZATION;
} }
function getRandomX() { function getRandomX() {
@ -14,14 +21,47 @@ function getRandomY() {
return Math.floor(Math.random() * window.innerHeight); return Math.floor(Math.random() * window.innerHeight);
} }
async function main() {
const mic = new p5.AudioIn();
mic.start();
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);
}; };
function drawBar(bar) {
sketch.fill(getColorValue(bar.volume));
sketch.rect(bar.x, 0, getWidth(bar.volume), window.innerHeight);
}
let bars = [];
sketch.draw = () => { sketch.draw = () => {
sketch.background(0); sketch.background(0);
sketch.fill(getRandomColorValue());
sketch.rect(getRandomX(),getRandomY(),50,50); const volume = mic.getLevel();
const x = getRandomX();
bars.push({
volume,
// pitch,
x,
});
const newBars = [];
for (const bar of bars) {
bar.volume = bar.volume / 1.5;
if (bar.volume <= THRESHOLD) {
continue;
}
drawBar(bar);
newBars.push(bar);
};
bars = newBars;
}; };
}); });
}
main();

View file

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