【cables gl】でビジュアルとサウンドの生成するデータを「WebPd」から受け取るデモ
ナカジ(@cp_nakajun)です。
ここのところ取り組んできた「WebPdで生成したデータを基に連携させてみる」の第4弾です。
この「WebPdから何かに」という方向を試すのは今回でとりあえずひと段落するつもりです。
最後の今回はこれまでと同じPureDataパッチを「WebPd」でうごかしてそのデータをブラウザで開発できるノードベースのビジュアルコンテンツ制作環境のcables.glで受け取って音を鳴らしビジュアライズします。
これまでは基本的に「JavaScriptのライブラリーを読み込んで…」というライブラリーの組み合わせでしたが
「cables.gl」は制作・開発環境の部類に入るので基本的にそれ自体でほとんどのことを行える為、ブラウザで利用する開発環境で作ったものをエクスポートしてコンテンツとして公開することが基本的な使い方です。
なので今回やろうとしている「外部からデータを送る」ようなことをするには「cables.gl独自の方法(仕様)」を使います。
とは言え、結果的にcables.glは良くできていて「簡単」だったので安心してください。
ではデモを紹介しながら、その方法も簡単に解説したいと思います。
その前に
「cables.gl」って何？という方はこちらで簡単に紹介しています。
また、「WebPd」についてはこちらになります。
WebPd and cables GL
今回のデモの概要は
- WebPD：出す音の周波数とタイミングを作る
- cables：サウンドとビジュアルの生成
という割り振りになり「WebPD」の役割はこれまでと全く同じになるのですが
実はcablesの部分は本記事の解説だけでは再現できなくて申し訳ないところになります。
それはサウンド生成部分でTone.jsのPolySynthをcables内部で使っているからです。
この部分については「現状どの程度の解説を僕ができるようになるかわかりません」が別途ご紹介できればと思います。
ちなみに英語になりますがcables公式のドキュメントページのURLは以下です。
・https://cables.gl/docs/5_writing_ops/webaudio/webaudio
ビジュアルの生成についてはもっとも簡単にできると思ったので
- Ops.WebAudio.AudioAnalyzer：音量変化を取得
- Ops.Gl.Textures.GraphTexture：値をテクスチャー化
というだけのものにグローっぽくエフェクトかけてごまかしてます。
デモ動画とURL
デモページURL：https://creative-plus.net/webpd-demo/webpd-cables-Demo1.html
WebPdとcables.glの連携方法
WebPdで生成した値をcables.glで利用する方法です。
- JavaScriptコードでcablesの変数を設定する
- cablesのオペレータ「VarGetNumber」で受け取る
の2ステップになります。
JavaScriptの記述
これについてのcables公式のドキュメントページが以下になります。
今回はこのページの以下の記述部分を参考にしました。
CABLES.patch.setVariable("IsInteracting",true);
今回のデモでは変数名を「webPd_1」にしましたので、実際は
CABLES.patch.setVariable("webPd_1",args);
と記述してます。
また「args」前回までと同様にWebPdから受け取る値用の変数です。
WebPdから受け取り続け、cablesに送り続ける為にリスナー内部に上記を記述します。
（という説明の仕方が正しいかわからないのは僕の知識と理解不足です）
僕の力不足ではありますが、結果的に以下のような記述をhtmlにします。
<script>
document.getElementById('glcanvas').addEventListener('touchmove', (e)=>{ e.preventDefault(); }, false);
function patchInitialized(patch) {
}
function patchFinishedLoading(patch) {
}
//WebPdのロード
var patch
$.get('./asset4/myPatch.pd', function(patchStr) {
patch = Pd.loadPatch(patchStr)
})
document.addEventListener('CABLES.jsLoaded', function (event) {
CABLES.patch = new CABLES.Patch({
patch: CABLES.exportedPatch,
prefixAssetPath: '',
glCanvasId: 'glcanvas',
glCanvasResizeToWindow: true,
onPatchLoaded: patchInitialized,
onFinishedLoading: patchFinishedLoading,
});
Pd.receive('midiNo', function(args) {
CABLES.patch.setVariable("webPd_1",args);
})
});
</script>
上記のこのコードの使い方については、以前「WEBサイトの背景を「cables.gl」で作って埋め込む方法」という記事を書いてますのでそちらをご確認ください。
オペレータ「VarGetNumber」で受け取る
こちらは簡単です。
上記の画像のように
cablesの開発画面でオペレータ「VarGetNumber」を配置し、引数名を設定するだけです。
PureDataパッチとcablesのパッチ
PureDataパッチ
cablesパッチ
まとめ
以上で4回にわたって試してきた「WebPdで生成した値を使って…」という方向を試すのは一回終わります。
WebPdを使った試みをまた思いついたらやってみようと思いますのでよろしくお願いいたします。
WebPdの試みデモは以下のURLにありますのでよかったらご覧いただけたら嬉しいです。
