A simple isometric graphics library for HTML5 canvas
Isomer is an easy-to-use graphics library for drawing isometric scenes.
var Shape = IsomerShape;var Point = IsomerPoint;var Color = IsomerColor;var red = 160 60 50;var blue = 50 60 160;isoaddShapePrismPointORIGIN 3 3 1;isoaddShapePyramidPoint0 2 1 red;isoaddShapePrismPoint2 0 1 blue;
After which you'll need to place a canvas in your document that we can later refer to. Be sure to give it a width and height.
Note (Optional): To improve the look of your canvas on retina displays, declare the width and height of your canvas element as double how you want it to appear. Then style your canvas with CSS to include the original dimensions.
At this point we can finally instantiate an Isomer object. Pass it a reference to your canvas like so:
var iso = documentgetElementById"art";
Now you're ready to start drawing!
Isomer uses Gulp as a build tool. To build the project, first install the dependencies.
$ npm install
npm run dist:
$ npm run dist # or, alternatively, `gulp dist`> firstname.lastname@example.org dist /Users/jordan/Projects/isomer> gulp[gulp] Using gulpfile ~/Projects/isomer/gulpfile.js[gulp] Starting 'dist'...[gulp] Finished 'dist' after 8.35 ms[gulp] Starting 'default'...[gulp] Finished 'default' after 6.52 μs
isomer.min.js in the
Isomer is developed using Browserify. Install dependencies and build the project like so:
$ npm install$ npm run dist
test/index.html contains a basic testing page that draws various shapes. This page will load the unminified bundle.
test script (accessible via
npm test) uses beefy to automatically rebuild Isomer on any file changes. This script also opens the testing page (located at
http://localhost:9966/test/) in your default browser. The testing page includes a live reload script to refresh when Isomer is rebuilt.
$ npm test> email@example.com test /Users/jordan/Projects/isomer> open && ./node_modules/.bin/beefy index.js:dist/isomer.js --live -- --standalone Isomerlistening on200 30ms 1.18KB /test/200 8ms 508B /test/style.css200 1ms 5.48KB /test/test.js200 704ms 48.5KB /dist/isomer.js -> ./node_modules/.bin/browserify ./index.js --standalone Isomer -d
Isomer also accepts the canvas provided by node-canvas, meaning you can generate isometric graphics on the command line.
var Canvas = require'canvas';var canvas = 400 400;var Isomer = require'isomer'; // npm install isomervar fs = require'fs';var out = fscreateWriteStream'output.png';var iso = canvas;isoaddIsomerShapePrismIsomerPointORIGIN;canvaspngStreampipeout;
For more info, check out the official project page.