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