平面のものを立体に見せる方法は幾つかありますが、その一つに等角投影図があります。英語ではアイソメトリックビューといい、斜め上方からの視点でXYZ軸を120度ずつに分けて描画するのが一般的です。 そんな等角投影図をWeb上、Canvasを使って手軽に描けるのがObelisk.jsです。

Obelisk.jsのデモ

まずはデモの画像をご覧ください。

任意の文字を等角投影図で描画。

ズームしたり高さを変えたりできます。

Flappy Bird。

すごくシンプルなブロック。色や大きさを自由に変更できます。

Obelisk.jsの使い方

コードは次のようになります。

var point = new obelisk.Point(200, 200);
var pixelView = new obelisk.PixelView(canvas, point);
var dimension = new obelisk.CubeDimension(80, 100, 120);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);
var cube = new obelisk.Cube(dimension, color, true);
pixelView.renderObject(cube);

canvasにポイントを作り、そこにキューブを起きます。後は色を決めてレンダリングすると言った具合です。これを繰り返していくことで細かな描画も可能になるといった具合です。平面な物体を色をちょっと変えることで立体的に見せる、面白いライブラリです。

Obelisk.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

nosir/obelisk.js