読者です 読者をやめる 読者になる 読者になる

自習室

こもります

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

.JavaScript .Processing

単発ネタで恐縮です

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を使ってローカルにサーバ立てたりすると良いかと思います。

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

紆余曲折

英語力不足の悲しみ

この記事を書き始める直前に気がついてちょっと恥ずかしくなったのですが、上記の内容は、公式チュートリアルの冒頭に書いてありました。 ...orz

Processing Quick Start | Processing.js

私の場合は暫くいろいろ検索してそれらしいものが見つからずうなっていたのですが、当該コードに data-processing-sources と「複数形」で属性名が定義されていたので、複数突っ込めるんじゃないか?と思い闇雲に試してみたところ、ヒットした感じです。

検索力不足の悲しみ

更に後から悔しくて検索し直してみたところ "processing.js multiple pde files" でぐぐったら、一番上に本記事ジャストな stackoverflow が出てきました。

processing.js - Using Processing Sketches With Tabs In Processing JS - Stack Overflow

がんばっていきましょー > わたし