Edited at

Proessing.js でJavaScript側からProcessingの任意の関数を呼ぶ or 値を渡す方法

More than 3 years have passed since last update.

自由な描画ができて便利な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>