話題のProcessing.jsを試してみた（あわあわデモ作った）
processingという開発環境があります。
これは、Javaベースの統合開発環境で、グラフィック系の独自のライブラリを搭載することで、イメージ処理が簡単に出来るのが大きな特徴です。メディアアート界隈でよくつかわれています。
エディターも内臓していて、スケッチ的に小さなプログラムを作っていけるのもお手軽でいいですね。完成したプログラムは、アプレットとして生成できます。
【最近作った作品】
→椅子取りゲームシミュレーション
→ゲーム「Amoeba#1」
アプレットが簡単に作れるのはいいのですが、最近はアプレットも冷遇されてるような気がしますし、プラグインインストールしないといけないのが面倒です。
せっかく作っても、プラグイン入れてないから見れないよーって言われたら悲しいですしね。
（でも、プラグインはダウンロードしてインストールするだけだから入れてくれよぅ→Java ソフトウェアの無料ダウンロード）
それは、ともかく・・・
最近ちょっとした話題になっているのが「Processing.js」。
これは、なんとProcessingで作ったJAVAソースをJavaScriptに変換して実行してくれるものなのです（Processingの独自ライブラリも搭載している）。
これなら、JavaScriptが動くブラウザ = IEやFireFoxなどのほとんどのブラウザで、そのまま実行できますよ。
僕は↓のブログの記事で知りました(解説わかりやすい）。
[javascript] ブラウザでお絵描きプログラミング！ Processing.js 登場！
● あわあわデモ作った
それならばと早速作ってみましたよ。
白い画面をクリックすると泡ができて、泡同士がぶつかると弾かれるというデモです。
で、Processing.js をつかった、JavaScript版がこちら。
→Bubbles_JS
まったく同じ動作をしています。すげー！！！
これなら、お手軽に公開できますね。
※プログラムは、HTMLのソースを見てください。
● 問題点
ただ、問題点もなきにしもあらず。
(1) ちょっと遅い、IEだと超遅い
JavaScriptの性能ゆえか、ちょっと遅いです(FireFoxでは)。
でも、FireFoxはまだいいです。IEで動かすと、超絶遅いです。
画像表示にはXHTMLのCanvasっての利用しているのですが、IこれはIEには搭載されていないので、JavaScriptでエミュレートしているのです。遅くないわけがない。
まあ、そんなわけで出来ればFireFoxで見てください･･･。
(2) Processingで用意されている関数以外使えない
Appletでは、Javaのライブラリが利用できますが、Processing.js版ではProcessingで用意されている関数のみしか使えません。
Vectorクラスとかは使えないってこと。
でも、自分でClassの定義はできます。これはびっくり。JavaScriptに、そこまでコンバートできるんだ・・・
マウスやキーボードイベントもちゃんととれます。
(3) デバッグがしにくい
エラーがあってもなにも表示されないので、なにがいけないのか調べるのが大変。
Processingで作ってから、JavaScriptに持ってきたほうがいいかなあ。（でも、互換性の問題でひっかかると厄介ですね）
(4) マウスの座標がうまくとれないことがある
Canvasをテーブルの中とかにいれると、マウスクリックした際の座標がずれることがある
いまのところこんな感じかな。
でも、Java知ってれば、JavaScript使えなくてもお手軽に映像系（ゲームも作れますよ）が作れるのは大きい。
Processing & Processing.js を活用していろいろ作っていきたいと思います。
