なぜ？CanvasではなくCSS3を駆使して描くドローライブラリ「Donatello」
Donatelloは幾何学模様をJavaScript/CSS3で描くドローライブラリです。
HTML5を利用すればこれまで画像やFlashを使わざるを得なかった描画がJavaScriptとCSSを組み合わせて実現できるようになります。どれくらい奇麗なグラフィックスを描けるのか、さらにそれをいかに手軽に実現できるかを知るのにDonatelloはぴったりなライブラリです。
サンプルです。時刻に合わせてオブジェクトの描画が変わります。
四角い形が円に沿って描画されていくサンプルです。HTMLの内容を見ると分かりますが、JavaScriptを使ってダイナミックにレンダリングしています。
このような複雑な形も描けます。
時計そっくりな描画も。こちらは実際に針が動きます。
四角が繰り返される描画。JavaScriptで描画内容をコーディングしているので幾何学系のアートが多いです。
実際のコード。複雑ではありますが、Donatelloの使い方を覚えれば同じくらいの描画ができるようになるはず。
Donatelloが描くオブジェクトはペーパーと呼びます。そのペーパーの上に四角や円を描いていくという仕組みになっているので、プログラミングは割合分かりやすそうです。描けるオブジェクトは正多角形、ベジュ曲線、グラデーションなどとなっています。
さらに機能としてjQuery対応、グループ化、クリックサポートなどとなっています。DonatelloはMIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Donatelloが面白いのは描画に際してCanvasタグを使うのではなく、CSS3を駆使していることにあると思います。Canvasタグを使えば同じくらい奇麗なグラフィックスを描けると思いますが、Webデザイナーにとっては習得が面倒かも知れません。Donatelloであれば既存のCSSの知識だけで対応できます。
幾何学系のドローが多いとは思いますが、ビジュ曲線を使えばドローは十分できるでしょう。SVGからDonatelloで描かせる変換ソフトウェアが作られたりすると面白いかも知れません。いずれにせよHTML5はまだまだチャレンジ要素が強くあります。どんどん遊んでいきましょう。