マウスのアクションに追従するインタラクティブなグラフィックスを描く「Paper.js」
Paper.jsはJavaScriptでインタラクティブなグラフィックスを描くライブラリ。
Paper.jsはJavaScript製のオープンソース・ソフトウェア。HTML5によってCanvasタグがデフォルトでサポートされるようになった。これでWeb上でのグラフィックスの表現力が大幅に向上する。だが高度な表現には高度な技術が伴うものだ。
ベジュ曲線が動くデモ
一つの絵を描くだけならばIllustratorのようなドローソフトウェアで描いてSVG出力するという手もあるだろう。だが本来はもっとインタラクティブなグラフィックスを描きたいと思うはずだ。それを可能にするのがPaper.jsだ。
Paper.jsはJavaScriptとCanvasタグを使ってマウスの動きに追従するようなグラフィックスを描くライブラリだ。実に数多くのデモが登録されており、マウスによってベジュ曲線を描くもの、マウスを追従してグラフィカルなラインが描かれるものなどがある。
どう見ても…
ライン以外でもボール同士が有機的にくっつくもの、モザイク画を描くものなど多数ある。もちろんプログラミングは必須だが、実際のソースを見てみると分かる通りコード量は意外と少ない。マウスのポイントを取得したり、ラインをスムーズに描くと言った指定は全てPaper.jsが行ってくれる。
[s2If current_user_can(access_s2member_level1)]
マウスでぐりぐりと動かせる（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
マウスに追従する（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
Canvasを使ったグラフィックスライブラリも増えつつある。主な使われ方としてはペイントやドロー、画像編集を行うWebアプリケーションになっているのが実情だ。だが、これではあまりに一般的ではなく、もっと画像を埋め込むように使われなければ流行らないだろう。
Canvasを使う場合は素材をWebベースで作成できるというのが魅力だ。もっと簡単にグラフィックスを描いて使えるようになれば、Canvasによるグラフィックスが流行る可能性があるだろう。そこにはGIFアニメーションやFlashともまた違う面白さがあるはずだ。