LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-10

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5