Isomer - Canvas上に等角図で立体を描くJavaScriptライブラリ
平面で立体を表現する手法の一つに等角図があります。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