isomer-route

isomer-route allows you to draw complex isometric shapes and illusions with ease on the HTML5 canvas, extending on the great work of isomer. Inspired by isometric illusions such as the Penrose triangleand the beautiful gameMonument Valley

Easily build routes using Tracks, Columns and Stairs, taking care of the hard things such as positioning, complex transformations and drawing order.

Installation

yarn add isomer-route

or with npm

npm install isomer-route --save

Usage

import IsomerRoute from 'isomer-route'

const canv = document.querySelector('#isomer-canvas');

new IsomerRoute(canv, Point(0, 0, 0))
 .setGridSize(6)
 .setRotation(rotation)
 .addTrack(6, DIR.X)
 .addTrack(6, DIR.Y)
 .addColumn(6, DIR.DOWN)
 .draw();


<canvas id="isomer-canvas" height="600" widht="600" />

Documentation

Full documentation and reference is available on the project page on my website

Examples

For more fun examples I made check out my blog post

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT