Processing and canvas

Processing.js

比較的シンプルな言語の記述で、イメージからアニメーションまでを描画することができるうえに、デバイスのコントロールまでも可能にするProcessingは、コードを書くことでデザインするための開発環境として、一部のデザイナーからメディアアーティストまで、強い支持を受けています。
HTML5の新要素として、HTMLで図形を描くことができる<canvas>が策定されました。その<canvas>を経由して、processingによる描画を実現したのが、Processing.jsです。JQueryの作者でもあるJohn Resig氏が公開したJavascriptライブラリで、通常ではJava Appletとしてブラウザで動かすしかなかったProcessingとほぼ同じ挙動を実現しています。
記述方法としては、まず<canvas>の中でProcessing.jsを稼働させるための準備をするJavaScriptを用意します。（右ソースコード参照）次に、<script id="processing-code" type="application/processing">と書き、そこにProcessingのコードを直に書くことができます。Processing上で確認して、最後にペーストするとよいでしょう。

Internet Explorerへの対応

IEは最新のバージョン8でも、<canvas>に対応していません。そこで、IEで<canvas>を使用するために、Googleが配布しているexcanvas.jsを利用します。これはIEのみで動作するjsライブラリで、それ以外のブラウザでは何もしません。
以下のように記述してください。

<script type="text/javascript" src="excanvas.js">
</script>

追記：現状ではexcanvas.jsをそのままロードしても<canvas>が認識されず、残念なことにprocessing.jsがInternet Explorerでは動作しないようです。
document.clearElement("canvas");と書いて要素を認識させようとしてもだめでした。
おそらく回避方法があると思われます。引き続き検証を続けたいと思います。

Processing.jsの現状の問題点

Processingでできることはだいたい可能ですが、注意点があります。

外部からの画像読み込みが不可能
これは<canvas>経由で読み込むことを想定しているためと思われます。
FireFox3.x以外でのテキスト出力が不可能
<canvas>で出力することを想定しているようですが、FireFox3.x以外のブラウザの<canvas>はテキスト表示に対応していません。
細かいパターンなどの実行速度が非常に遅い
このページのドットグラデーションもProcessingで生成していますが、ブラウザによってはjsが止まったと判断してアラートが出ます。
html5.jsとのコンフリクトが起こることがある
これに関してはdocument.clearElement("要素名");とjsを書いて、<article>や<section>など、HTML5で追加された新しい要素をIEに認識させる必要があります。

まだ試していないことが幾つかありますが、アニメーションなどは描画するオブジェクトが多くない限り、比較的高速で動くようです。また、インタラクションのあるプログラムも問題なく走ります。ただし、外部デバイスをコントロールできるかどうかは分かりません。おそらく、あまりそういった部分は期待しない方がいいような気がします。
自分自身のProcessingの使用法が、手描きでは時間のかかるパターンやグラフィックを記述するためにしか使用したことがないので、アニメーションをまだ試していません。徐々に練習して、面白いものが書けたら、メインビジュアル部分を差し替えてみようと思います。

Processing.jsを稼働させる準備

<script language="javascript">
window.onload = function() {
  var canvas = document.getElementsByTagName('canvas')[0];

  // Processing のソースコードが書かれた script 要素
  var codeElm = document.getElementById('processing-code');
  // 要素の内容を取得
  var code = codeElm.textContent || codeElm.innerText;

  Processing(canvas, code);
};
</script>

Processingのソースコードを記述

<script id="processing-code" type="application/processing">
// Processing のソースコード

float[][] distances;  
float maxDistance;  
  
size(1024,400);  
background(0);  
maxDistance = dist(width/100, height/100, width, height);  
distances = new float[width][height];  
for(int i=0; i<height; i++) {  
  for(int j=0; j<width; j++) {  
    float d = dist(width/2, height/2, j, i);  
    distances[j][i] = d/maxDistance * 255;   
  }  
}  
  
for(int i=0; i<height; i+=2) {  
  for(int j=0; j<width; j+=2) {  
    stroke(distances[j][i]);  
    point(j, i);  
  }  
} 

//以下はFireFoxのみで有効

fill(#FFFFFF);
PFont testfont = loadFont("Osaka");
textFont(testfont,48);

</script>

HTMLの記述


<canvas width="1024" height="400"></canvas>

参照元

Processing.js
excanvas.js
HTML5.jp Canvasの使い方