自由な描画ができて便利なProcessingをWebアプリでも積極的に使っていきたいところです。
ところがいざHTMLに埋め込んでも動的な値を渡したり、任意の関数を呼んだりできないと使い道が限られるので、標題の通り調べました。
日本語コメント入れながらソース引用します。
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Controlling Processing from JavaScript</title>
<script src="processing-1.3.6.min.js"></script>
</head>
<body>
<!-- ここまでは必須項目
Processingアプリケーションのjavascriptモードでも自動的にエクスポートされます -->
<canvas id="sketch" data-processing-sources="controlling.pde"></canvas>
<!-- インターフェースが必要ならここでボタン等を設置します -->
<button onclick="startSketch();">
Start</button>
<button onclick="stopSketch();">
Stop</button>
<!-- ここでスクリプトを追加します -->
<script type="application/javascript">
var processingInstance;
// 上記ボタンが押された時の処理
function startSketch() {
switchSketchState(true);
}
function stopSketch() {
switchSketchState(false);
}
function switchSketchState(on) {
if (!processingInstance) {
/*
Processing.getInstanceById()を呼んで
自分のProcessing.pdeの名前を指定します。
(上のcanvasタグのidと同じ名前になるはずです)
これでProcessingのインスタンスが取得できます。
*/
processingInstance = Processing.getInstanceById('sketch');
}
if (on) {
/*
JS側でインスタンスが取得できたら、あとは任意の関数を呼ぶだけです。
Processing独自の関数や自分が作った関数が呼べます。
引数でProcessing側に値を送ることも出来ます。
(あまり調べてませんが静的メンバ変数は呼べないみたいです)
*/
processingInstance.loop();
processingINstance.myFunction("from js message");
} else {
processingInstance.noLoop();
}
}
</script>
</body>
</html>