FlagTest ブラウザ版を公開しました

Processingで作ったFlagTestをブラウザだけで動くようにしました。
processing.jsというライブラリを使っています。
processingで作ったコードがほぼそのままブラウザで動くようになるというすぐれもののライブラリです。
javascrptの超有名ライブラリjQueryの作者さんが作られているようです。
まだまだ情報が少なく、いろいろと迷ったところをメモします。

(1)processing.jsをダウンロードします。
現在（2013.1.19）のバージョンは、1.4.1です。
解凍するといくつかファイルがありますが、processing-1.4.1.min.jsというものを使いました。

(2)IEではバージョン9でも、canvasが使えないので、excanvas.jsをダウンロードします。

(3)もとになるHTMLファイルを書きます。
最終的には下記のようになりました。
flagtest_web.htmと同じ場所にdataフォルダを作って、そこに、processing-1.4.1.min.jpやexcanvas.jpや画像のpngデータなどを入れます。



(4)Processingで書いたコードをprocessing.jpで動くようにします。
flagtest.pjsというファイルにして、dataフォルダに保存します。
コードは下記のようになります。

■はまった点１
Processingとの違いは、下記を追加したところです。
/* @pjs
preload = "data/flag_1.png,・・・・
実際のコードで確認してください。
これで画像データを先読みしておきます。
これがないと画像が表示されません。

■はまった点２
/* @pjs　で*(アスタリスク)と@(アットマーク)の間に半角スペースがないと動かなかった。

■はまった点３
preloadに変数としてファイル名を代入しようとしたら動かなかった。
下のようなコードはダメでした。

String FileList = "data/flag_1.png";
/* @pjs
preload = FileList

■はまった点４
ライブラリは使えないのではずします。
音は鳴りません。

■はまった点５
読み込んですぐは、ブラウザをクリックしないとキー入力を付けつけない。
明示的にブラウザをアクティブにしてあげないとダメみたいです。
Processing版ではスタートはスペースキーなのですが、マウスクリックに変更してあります。

void mousePressed(){
if(flg == -1){
flg = 0;
}
}

■はまった点６
オフラインだとIE9でも動作しない。
セニュリティ関係のためか、オフラインで動作しませんでした。
ネットにアップしたらちゃんと動きました。？？？？




FlagTest ブラウザ版