「WebPd」で生成した音の周波数データを「p5.sound」で発音させ「p5.js」で描画してみる
ナカジ(@cp_nakajun)です。
ここ最近の取り組みとしてやっている「WebPd」ですが
今のところ「単体」での可能性の追求というより「組み合わせ」ての可能性に興味があります。
その興味の第3弾です。
「WebPdだけで音を鳴らす」のが１つめ
「WebPdで音の情報を作りtone.jsで鳴らす」が2つめ
でした。
今回は「WebPdで音の情報を作りp5.soundで鳴らしてp5.jsで描画する」です。
これも
「tone.js」や「P5.sound」などと併用できたり共用できたりすると面白いかな～と思っています。
と書いたのでやってみたのですが
「WebPdで音の情報を作りtone.jsで鳴らす」ができた以上
やり方というか要領は同じです。
では、さっそく
WebPd and p5.js
今回の試みも前回の流れをくんでるので
- WebPD：出す音の周波数とタイミングを作る
- p5.sound：音源とエフェクトを作り、発音させる
- p5.js：音を描画する
という概要になります。
WebPDの「出す音の周波数とタイミングを作る」部分については「WebPd only」も「WebPd + tone.js」も同じ処理のパッチを使ってます。
ただ今回は発音のp5.sound部分は音源数を減らしたりと少し簡易的にしています。
また、描画部分は以前作った「Midi Number Tools」を流用しました。
WebPd and p5.js Demo
せっかくなので見てやってください！
デモページURL：https://creative-plus.net/webpd-demo/webpd-p5js-Demo1.html
制作時のポイント
そう言えば、今までの記事にはポイント的なことを書いてないことに、いまごろ気がつきました。
まずはライブラリの読み込みが必要です。
<!-- P5js --> <script type="text/javascript" src="./js/p5.js"></script> <script type="text/javascript" src="./js/p5.sound.js"></script> <!-- WebPd --> <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="./js/webpd-latest.min.js"></script>
ディレクトリは任意です。
これに加えてもちろんp5.jsで制作したファイルの読み込みも必要です。
PureDataパッチの読み込みは
<script>
var patch
$.get('patches/myPatch.pd', function(patchStr) {
patch = Pd.loadPatch(patchStr)
Pd.start()
})
</script>
もう１つ、PureDataパッチの[send]から受け取る方法
Pd.receive('someName', function(args) {
console.log('received a message from "someName" : ', args)
})
PureDataパッチとp5.jsのコード
PureDataパッチ
p5.jsコード
let polySynth;
let canvas;
var outMidiNo;
var dispfreq;
function canvasSetup(){
polySynth = new p5.PolySynth();
delay = new p5.Delay();
fft = new p5.FFT();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
canvasSetup();
}
function setup() {
canvas = createCanvas(windowWidth,windowHeight);
canvasSetup();
}
function draw() {
frameRate(30);
blendMode(BLEND);
background(0, 0, 0, 50);
noFill();
blendMode(SCREEN);
let waveform = fft.waveform();
beginShape();
stroke(10);
for (let i = 0; i < waveform.length; i++){
let x = map(i, 0, waveform.length, 0, width);
let y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
for (var i = 1; i < 8; ++i) {
strokeWeight(i * 0.5);
stroke(164 - (i * 14), 240, 245, 250 - (i * 10));
}
endShape();
fill(9);
noStroke();
textSize(windowWidth/14);
text(dispfreq, 40, windowHeight*0.9);
}
function soundPlay() {
userStartAudio();
Pd.receive('midiNo', function(args) {
outMidiNo = args*1.0;
dispfreq = "Frequency：" + Math.floor(args*100)/100 + " Hz";
document.getElementById("pdMidi").innerHTML = dispfreq;
polySynth.play(outMidiNo, 0.3, 0, 0.2);
polySynth.play(outMidiNo*6, 0.4, 0.2, 0.6);
delay.process(polySynth, 0.32, .5, 2300);
});
}
まとめ
前回も書きましたが、まだ試してみたいことがあるので出来たらまた共有させて頂きます。
WebPdのデモサイトは以下のリンクからご覧いただけます。
・https://creative-plus.net/webpd-demo/
