Processing.jsを試す
Processingの準備
Processing.jsとは、Processingという描画ツールをJavaScriptに移植した描画ライブラリで、John Resig氏らの手によって開発されました。Processingは、コンピュータを使ったメディアアートが多く輩出されてきた背景をうけて開発された、プログラミング言語および統合開発環境です。グラフィクス作成に特化したProcessingの言語は非常に簡単化されており、プログラム初心者にも比較的開発が容易です。
Processing.jsは、このような特徴を持つProcessingをブラウザで実行・開発できるようにJavaScriptにポーティングされたライブラリであり、Processingとほぼ同じメソッド群を持ちます。実装面では、さきに紹介したCanvasをラップするような形で実装されています。
ここでは、先ほどCanvasを用いて実装したことを、Processing.jsを使って再現してみます。まずは以下のようにProcessing.jsを利用可能にします。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script src="jquery-1.5.min.js"></script>
<script src="processing-1.2.3.js"></script>
<script src="processing_1.js"></script>
<title>processing_1</title>
</head>
<body>
<canvas id="main_canvas"></canvas>
</body>
</html>
$(document).ready(function(){
//Processing でラップする Canvas を取得
var canvas = document.getElementById("main_canvas");
//Processing オブジェクトを作成し、初期化
new Processing(canvas, Main.init);
});
var Main = {
init: function(processing) {
}
}
HTMLでは、Processing.jsを読み込みます。ファイル名は、processing-.jsとなっており、サンプルではバージョン1.2.3を利用しています。JavaScriptでは、ドキュメントの読み込み完了を受け、Processingの初期化を行っています。Processingをnewする際、1つ目はCanvas要素を、2つ目にはコールバック関数を引数として渡しており、Processingの初期化が完了すると、Main.initが呼ばれます。
矩形を描こう：Processing.js編
Processingでの描画はとても簡単です。以下に先ほどと同じ矩形を描いています。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script src="jquery-1.5.min.js"></script>
<script src="processing-1.2.3.js"></script>
<script src="processing_2.js"></script>
<title>processing_2</title>
</head>
<body>
<canvas id="main_canvas" style="background-color: gray"></canvas>
</body>
</html>
$(document).ready(function(){
//Processing でラップする Canvas を取得
var canvas = document.getElementById("main_canvas");
//Processing オブジェクトを作成し、初期化
new Processing(canvas, Main.init);
});
var Main = {
init: function(processing) {
//Processing のキャンバスサイズを 400x400 にする
processing.size(400, 400);
//このまま描画すると、ストロークも一緒に描画されるので、ストロークをなくします。
processing.noStroke();
//塗りつぶしの色を赤にする
processing.fill(255, 0, 0);
//矩形
processing.rect(150, 250, 100, 50);
}
}
コールバック関数の引数として渡されるのは、初期化したProcessingのインスタンスです。このオブジェクトを操作して、さまざまな描画を行うことができます。まず、サイズを400px×400pxにして先ほどと同じように矩形を描きましたが、とてもシンプルに描けることが分かります。
注意点は、rectなどで描画を行う際、fillやstrokeの設定をそのまま引きずって、塗りつぶしとストロークの描画を同時に行います。従って、塗りつぶしだけ行いたいときはnoStrokeを、ストロークだけ描画した場合はnoFillをそれぞれ呼び出してから描画を行います。上記の例では、塗りつぶしだけ行いたかったため、noStrokeを呼んでいます。
ここでもサイズ絡みの注意点があります。Processing.sizeメソッドの内部では、引数で渡されたサイズを、自身がラップしているCanvas要素に対しても割り当てます。一方で、CSSで指定してあったwidth、height属性は削除されています（今後変わる可能性もあるかとは思います）。
