3Dブロック的グラフィックライブラリObelisk.jsを試す

3Dブロック的なピクセルアートが書けるようになるObelisk.jsを試してみました。

使いかたとしては、Canvasを用意して、

<canvas id="demo" width="800" height="600"></canvas>

JSでは次のようにすると、箱が描けます。

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

これを応用したピラミッドの描画例はこちらになります。

当り前ですが、タイマーと組み合わせるとアニメーションもできたりします。 フレームの最初にpixelView.clear();とすればよいみたいです。 というわけでサンプルとしてライフゲームをつくってみました。

• ライフゲーム (アニメーションなし)

  

• ライフゲーム (アニメーション付き)。こちらはChromeでの実行を推奨。

  

おわりに

Obelisk.jsを試してみました。

公式サンプルであるGIFアニメの変換が一件の価値ありです。

関連リンク

• Obelisk.js
• 等角図 - Wikipedia