「WebPd」で生成した音の周波数データを「p5.sound」で発音させ「p5.js」で描画してみる

投稿日:2021-04-10



ナカジ(@cp_nakajun)です。

ここ最近の取り組みとしてやっている「WebPd」ですが
今のところ「単体」での可能性の追求というより「組み合わせ」ての可能性に興味があります。

その興味の第3弾です。

「WebPdだけで音を鳴らす」のが1つめ

PureData経験者が初めて「WebPD」を使ってみた時に思ったことをDEMO解説と共に書きます。

「WebPdで音の情報を作りtone.jsで鳴らす」が2つめ

「WebPd」をシーケンス的に「tone.js」を音源的に同時に利用できるか試してみた



でした。

今回は「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>

もう1つ、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/

PureDataの貴重な書籍



学習にオススメ


・【NFTアート × Python】全くの初心者でもできるジェネラティブNFTの作成から出品まで icon

・【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】 icon

・改訂版プログラミングで科学を学ぼう! icon

・【JS】ガチで学びたい人のためのJavaScriptメカニズム icon





おすすめのクリエイティブ・コーディング関連カテゴリー


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します