Processing.js で複数の pde ファイルを読み込む

単発ネタで恐縮です

processing.js 初日です。

f:id:AMANE:20140922133754p:plain

やりたいこと

setup(), draw() らを含むメインの pde ファイルと、 class 定義を含む pde ファイルを分割している Processing (not .js) のサンプルがたくさんあります。

Processing だと、上の写真のように、あるスケッチを構成するファイルはすべて一つのディレクトリに収められ、互いに参照し合い、またグローバルな変数は無条件に共有されます。

Processing.js でも同様にクラス定義などをファイル分割して扱いたいです。

やりかた

たとえば、以下の三つのファイルからならProcessingスケッチなら、

- pde/Reflection2.pde  // setup(), draw() を含むコード。 
                       // この中で、Groundオブジェクトや Orbオブジェクトを利用する
- pde/Ground.pde       // Ground クラスを定義するファイル
- pde/Orb.pde          // Orb クラスを定義するファイル

htmlファイル中、<canvas> タグにおいて「スペース」区切りで複数ファイルを読み込ませることで Processing.js で互いに参照できる記述として展開されます。

// index.html中
<script src="lib/processing.min.js"></script>
<canvas data-processing-sources="pde/Ground.pde pde/Orb.pde pde/Reflection2.pde" id="processing_sketch"></canvas>

ここでは、本家 Processing のサンプルから、example/topic/Reflection2 を使っています

processing-docs/content/examples/Topics/Motion/Reflection2 at master · processing/processing-docs · GitHub

実行するには、ブラウザを選ぶかhttpサーバを立てる

ウェブ系の方は知ってて当然かもしれませんが、一応。

index.html をローカルファイルとしてChromeに突っ込んで再生すると、pdeファイルが読み込まれずエラーになります。 <canvas> タグ内で pde ファイルを読み込んでいるので、以下の様な感じで怒られます。

XMLHttpRequest cannot load file:///C:/***/processing.js/hatena/pde/Ground.pde. Received an invalid response. Origin 'null' is therefore not allowed access. index.html:1

Firefox だと大丈夫 です。

Chromeで開発したい場合は、Nodeを使ってローカルにサーバ立てたりすると良いかと思います。

他のブラウザはよく分かりません。