簡単ですね＾＾ というわけで、この Processing をブラウザで使えるようになるのです。わくわくしますね！

Processing とは、ビジュアルデザインのための プログラミング言語 で、 Java のような文法をしています。 ビジュアルデザインのための プログラミング言語 というと難しそうですが、実際はとても簡単です。 たとえば、以下の 2 行を書けば、丸が書けてしまいます。

まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing という プログラミング言語 を実行する JavaScript のライブラリです。 では、 Processing とはどのような プログラミング言語 なのでしょうか。

Processing.js によって Processing 関数が作られているので、 JavaScript から Processing 関数を呼び出します。 引数には、

サンプル ちなみに、 canvas 要素とは、 JavaScript から絵を描ける要素です。また、 IE には canvas 要素はありませんが、 excanvas .js を読み込むことで canvas 要素を使えるようになります。

さっきの HTML ファイルに canvas 要素を挿入します。 width 属性と height 属性で canvas 要素の大きさを指定します。

以下のように、HTML ファイルを作って script 要素の src 属性にさっきダウンロードしてきた processing.js のファイルを指定します。

ちょっとめんどくさそうですが、やってみると簡単です。順番に細かく説明します。

Processing.js を使うための準備をしましょう。 Processing.js を使うには、以下の手順が必要です。

サンプル excanvas .js については、詳しく解説しませんがとりあえず読み込んでおけば間違いありません。 IE 以外の環境では何もしない無害な JS なので、安心です。 ほら、 IE でも動いてますね！

前の項でも、チラっと言いましたが IE は canvas 要素に対応していないので excanvas .js という JavaScript のファイルを読み込んであげる必要があります。 excanvas .js は以下のページからダウンロードできます。 http://sourceforge.net/project/showfiles.php?group_id=163391 ダウンロードした excanvas _0002.zip ファイルを解凍すると、 excanvas .js が入っているので、それを script タグで読み込みます。

サンプル こうしておけば、 Processing の ソースコード が長くなっても可読性を損なわずにすみますね＾＾

Processing の ソースコード を文字列で渡すのはめんどうくさいですね＞＜ というわけで、そんなときは script 要素を使いましょう。 script 要素は、 type 属性に実行できないタイプが指定されると何もしません。逆にそれを利用して script 要素に Processing の ソースコード を書くのです。

基本的な準備は完了ですが、もう 2 個テクニックを追加しておきます。 これは、別にやらなくてもいいです。めんどうな人やメリットを感じない人はこの項は飛ばしてください＾＾；

というわけで、ちょっとアニメーションを書いてみました。コメントを参考にしてください。

サンプル こんな感じになります。 canvas の下に文字列が挿入されていますね。 この仕組みを使うと Processing のアニメーションと、 HTML の連携を簡単に行うことができます。

Processing.js では、 JavaScript のグローバル 変数 やグローバル関数を Processing のグローバル 変数 、グローバル関数として使うことができます。 たとえば、以下のように JavaScript で定義したグローバル 変数 message を Processing から呼び出すことができます。

Processing.js の仕組み

ここからは、 Processing.js の内部の話をします。この項を知らなくても Processing.js は使えるので、全然飛ばしていいです＾＾；

Processing.js の内部を知る意味 Processing の関数名は rect とか ellipse とか直感的なものが多いです。なので、 Processing 関数名から Processing.js を調べれば、「canvas ではこう書くんだー」ってのがすぐ分かって面白いです。

あと、たまに特定のブラウザで動かないときもあるので、それを調べるときには内部の仕組みを知っておいた方がいいですね＾＾

Processing.js は全体で 1700 行くらいしかありません、なので全然読めます。

Processing.js の実行の流れ Processing.js では、以下の流れで処理が進みます。 Processing 関数が呼び出される 内部で Processing 言語のグローバルの名前空間となるオブジェクト p が生成される。 名前空間 p に関数やクラス（実際は JavaScript のプロトタイプ）が追加される。 Processing のソースコードが内部の parse 関数で JavaScript のソースコードに変換される。 名前空間 p が with され、そのスコープ内で JavaScript のソースコードが eval される。 すると、あら不思議。絵が描画される。 では、実際にソースを見てみましょう。

9 - 14 行目: Processing 以下が Processing 関数の全貌です。この関数（実行コンテキスト）では、 this はグローバルオブジェクトになっているので、 Processing はグローバル関数になります。 this .Processing = function Processing( aElement, aCode ) { var p = buildProcessing( aElement ); p.init( aCode ); return p; } ; で、 buildProcessing が Processing のグローバル名前空間 p を生成する関数で p.init が Processing → JavaScript のソースコード変換と実行を行う関数です。

ここで注目すべきは、 p を返してるところですね。Processing のグローバル名前空間 p を返しているので JavaScript で Processing の名前空間をすべて使えるわけです。

Hack し放題です！やっほう！です。

32 - 263 行目: parse この行では、 parse という Processing → JavaScript のソースコード変換を行う関数が定義されています。 window .parse = function parse( aCode, p ) { return aCode; } 第二引数は使ってないです。たぶん、消し忘れですね。

もし JavaScript のエラーが出る場合は、この最後の最後の行に console.log や alert などを差し込むと良さそうですね。

265 - 1693 行目: buildProcessing Processing のグローバル名前空間 p を作る buildProcessing 関数が定義されています。 function buildProcessing( curElement ) { var p = {} ; p.PI = Math.PI; p.TWO_PI = 2 * p.PI; p.RGB = 1; p.HSB = 2; p.ellipse = function (x, y, width, height) { } ; p.init = function (code) { } ; return p; } こんな感じで、ただひたすら p に関数やプロパティを追加しまくります。で、その追加された関数や変数が Processing のグローバル関数やグローバル変数になるわけですね。

この p にはものすごい数の関数や変数が定義されます。とくに重要なものを見て行きましょう。

1565 - 1690 行目: p.init ここでは、実際に変換された JavaScript のコードを eval したり、アニメーションのタイマーを走らせたり、という初期化処理をまとめてする p.init という関数が定義されています。これは、 Processing 関数の中で呼ばれます。 p.init = function init(code) { if ( code ) { ( function (Processing) { with (p) { eval(parse(code, p)); }} )(p); } if ( p.setup ) { inSetup = true ; p.setup(); } if ( p.draw ) { if ( !doLoop ) { p.redraw(); } else { p.loop(); } } } ; アニメーションが始まらない場合や、setup 時の状態をデバッグしたい場合はこの関数からデバッグすればいいです。

1039 - 1058 行目: p.loop アニメーションの開始を行う p.loop も見ておきましょう。 p.loop = function loop() { if ( loopStarted ) return ; var looping = setInterval( function () { try { p.redraw(); } catch (e) { clearInterval( looping ); throw e; } } , 1000 / curFrameRate ); loopStarted = true ; } こんな感じで、シンプルに redraw を読んでるだけですね。