ITエンジニア/デザイナ向けにオープンソースを毎日紹介

平面で立体を表現する手法の一つに等角図があります。120度ずつのY字型でXYZ軸を表現します。工作の図面を描くのに使ったり、コンピュータであればドット絵を描く際にも使われます。面の色を変えるとぐっと立体的に見えるのが面白いです。

そんな等角図をWeb上、HTML5のCanvasで表現するのがIsomerです。等角図を用いた立体物が容易に描けるので様々なオブジェクトの描画に使えるでしょう。

Isomerの使い方

まずは一番シンプルなデモです。

var Shape = Isomer.Shape;
var Point = Isomer.Point;

iso.add(Shape.Prism(new Point(0, 0, 0)));

こんな感じのコードで次のように描画されます。
こんな感じのコードで次のように描画されます。

グリッドも一緒に表示するとこんな感じ。
グリッドも一緒に表示するとこんな感じ。

var Shape = Isomer.Shape;
var Point = Isomer.Point;

/* add() also accepts arrays */
iso.add([
  Shape.Prism(Point.ORIGIN, 4, 4, 2),
  Shape.Prism(new Point(-1, 1, 0), 1, 2, 1),
  Shape.Prism(new Point(1, -1, 0), 2, 1, 1)
]);

オブジェクトを連結して表示もできます。
オブジェクトを連結して表示もできます。

オブジェクトの形状は四角に限りません。
オブジェクトの形状は四角に限りません。

色も変更できます。
色も変更できます。

こんな感じにカスタムした形にも対応しています。
こんな感じにカスタムした形にも対応しています。

ブロックを単に積み重ねるだけでないのは面白いですね。
ブロックを単に積み重ねるだけでないのは面白いですね。

Isomerを使うとオブジェクトを立体的に描画し、さらにそれをプログラマブルに動かすこともできるようです。ドット絵風のゲームなどを作るのに使えそうです。

IsomerはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Isomer – an isometric graphics library for HTML5 canvas

jdan/isomer

 

MOONGIFTの関連記事

  • DevRel
  • Com2