![見出し画像](https://assets.st-note.com/production/uploads/images/29580066/rectangle_large_type_2_11fa3eefa1dda8936318d91f25dd5126.png?width=800)
p5.jsで音を拾う
音を表現したいと思いました。
今、勉強しているCanvasでやろうと音を表現したいと思ったのですが、私の技術力ではできませんでした。
以前、ちょっとだけ勉強していたp5.jsでやってみました。
音を拾う
音は私の手拍子です。
p5js.org内のこのページを参考にしました。
コードはこちら↓
let mic;
function setup() {
let canvas = createCanvas(640, 335, P2D);
canvas.parent('myContainer');
colorMode(HSB, 360, 100, 100, 100);
noStroke();
mic = new p5.AudioIn();
mic.start();
}
function draw() {
background(0, 0, 100, 100);
micLevel = mic.getLevel();
let y = height - micLevel * height * 5;
fill(343, 85, 92, 100);
rect(width / 2, y, 10, height);
}
p5.AudioInでマイクで音を拾うようです↓
そして、getLevel()で拾った音を得ます。
0.0111111とか小さな数値なので、heightなどの数字を掛けて大きくします↓
今後、コードを音で表現することをやっていきたいと思います。
この記事が気に入ったらサポートをしてみませんか?