🌜
🌞
isomer

isomer

v0.2.6

A simple isometric graphics library for HTML5 canvas

npm install isomer

README

isomer

An isometric graphics library for HTML5 canvas.

View the official project page or try it out.

About

Isomer is an easy-to-use graphics library for drawing isometric scenes.

var Shape = Isomer.Shape;
var Point = Isomer.Point;
var Color = Isomer.Color;
var red = new Color(160, 60, 50);
var blue = new Color(50, 60, 160);

iso.add(Shape.Prism(Point.ORIGIN, 3, 3, 1));
iso.add(Shape.Pyramid(Point(0, 2, 1)), red);
iso.add(Shape.Prism(Point(2, 0, 1)), blue);

output

Getting Started

First, grab a copy of Isomer here. You can also pay for it. Then, include the script wherever you see fit:

<script src="/path/to/isomer.min.js"></script>

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.

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

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.

#art {
  width: 400px;
  height: 300px;
}

At this point we can finally instantiate an Isomer object. Pass it a reference to your canvas like so:

var iso = new Isomer(document.getElementById("art"));

Now you're ready to start drawing!

Build

Isomer uses Gulp as a build tool. To build the project, first install the dependencies.

$ npm install

Then run npm run dist:

$ npm run dist    # or, alternatively, `gulp dist`

> [email protected] dist /Users/jordan/Projects/isomer
> gulp

[gulp] Using gulpfile ~/Projects/isomer/gulpfile.js
[gulp] Starting 'dist'...
[gulp] Version: webpack 1.7.3
           Asset     Size  Chunks             Chunk Names
./dist/isomer.js  23.1 kB       0  [emitted]  isomer
[gulp] Version: webpack 1.7.3
               Asset     Size  Chunks             Chunk Names
./dist/isomer.min.js  9.33 kB       0  [emitted]  isomer
[gulp] Finished 'dist' after 911 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 6.2 μs

To generate isomer.js and isomer.min.js in the dist/ directory.

Develop

Isomer is developed using Webpack. 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 a unminified bundle with source maps.

The test script (accessible via npm test) uses webpack-dev-server to automatically rebuild Isomer on any file changes. This script also opens the testing page (located at http://localhost:2992/webpack-dev-server/) in your default browser. The testing page includes a live reload script to refresh when Isomer is rebuilt and notify if the code is not conform the styling conventions for Isomer.

$ npm test

> [email protected] test /Users/jordan/Projects/isomer
> gulp test

[Isomer] listening on http://localhost:2992/
webpack: wait until bundle finished: /webpack-dev-server/
Hash: ************
Version: webpack 1.8.2
Time: 432ms
    Asset     Size  Chunks             Chunk Names
isomer.js  59.5 kB       0  [emitted]  isomer
chunk    {0} isomer.js (isomer) 20.1 kB [rendered]
    [0] ./index.js 83 bytes {0} [built]
    [1] ./js/isomer.js 3.86 kB {0} [built]
    [2] ./js/canvas.js 729 bytes {0} [built]
    [3] ./js/color.js 2.68 kB {0} [built]
    [4] ./js/path.js 3.77 kB {0} [built]
    [5] ./js/point.js 2.44 kB {0} [built]
    [6] ./js/shape.js 5.47 kB {0} [built]
    [7] ./js/vector.js 1.05 kB {0} [built]
webpack: bundle is now VALID.

With node-canvas

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 = new Canvas(400, 400);
var Isomer = require('isomer');   // npm install isomer
var fs = require('fs');
var out = fs.createWriteStream('output.png');

var iso = new Isomer(canvas);
iso.add(Isomer.Shape.Prism(Isomer.Point.ORIGIN));

canvas.pngStream().pipe(out);

More Info

For more info, check out the official project page.

MIT Licensed

Release Notes

0.2.4
By Jordan Scales • Published on July 26, 2014

Isomer now supports both bower:

$ bower install isomer

and component:

$ component install jdan/isomer

Isomer also lists copyright information when built. You can see it in action here. Our build and test processes are also far simpler.

To buid:

$ npm run dist     # or, simply, gulp dist

To test:

$ npm test

The test command uses beefy to automatically rebuild the project when any files have changed. The command also opens a browser window with a testing page that automatically refreshes when the project is rebuilt.

Simply run npm test and leave it in the background as you develop. Everything will build automatically for you.

With <3, @jdan

0.2.1
By Jordan Scales • Published on May 4, 2014

Isomer is now built with Browserify!

Browserify allows you to use traditional require() statements in your code, which is then bundled. Development is now significantly easier and cleaner.

There are now two gulp tasks, build & release.

  • gulp build bundles the project using Browserify and produces build/isomer.js
  • gulp release minifies the build to build/isomer.min.js

The test page references isomer.js, and includes a livereload script to be used with beefy.

This means that you will need to rebuild the project with every change, but you can have beefy do this for you, as well as reload the testing page automatically.

$ npm install -g beefy
$ beefy index.js:build/isomer.js --live
listening on http://localhost:9966/

Navigate to http://localhost:9966/test/ to check it out.

This pattern also makes it easy for Isomer to work with node-canvas for generating isometric graphics on the command line.

var Canvas = require('canvas');
var canvas = new Canvas(400, 400);
var Isomer = require('isomer');   // npm install isomer
var fs = require('fs');
var out = fs.createWriteStream('output.png');

var iso = new Isomer(canvas);
iso.add(Isomer.Shape.Prism(Isomer.Point.ORIGIN));

canvas.pngStream().pipe(out);

With <3, @jdan

0.1.1
By Jordan Scales • Published on April 28, 2014

Releasing a new patch that includes a few bug fixes from the community. Big props to everyone that contributed so early in Isomer's development.

  • @rcmaniac25 (#1, #3)
  • @igpay (#4)
  • @amejias101 (#5)
  • @Hermanya (#10)
  • @zya (#13)

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,801
Community Interest
2,996
Number of Forks
149

Maintenance

Commits
11/2110/2201
Last Commit
Jul 25, 2017
Open Issues
23
Closed Issues
37
Open Pull Requests
5
Closed Pull Requests
23

Versions

Versions Released
11/2110/2201
Latest Version Released
May 8, 2016
Current Tags
latest0.2.6

Contributors

jdan
jdan
Commits: 55
whoeverest
whoeverest
Commits: 8
mattheath
mattheath
Commits: 4
rcmaniac25
rcmaniac25
Commits: 3
manuq
manuq
Commits: 2
njj
njj
Commits: 2
LaughingSun
LaughingSun
Commits: 1
cryptoquick
cryptoquick
Commits: 1
csun
csun
Commits: 1
allofthenorthwood
allofthenorthwood
Commits: 1
CrokinoleMaster
CrokinoleMaster
Commits: 1
Hermanya
Hermanya
Commits: 1
marinintim
marinintim
Commits: 1
tkers
tkers
Commits: 1
ooflorent
ooflorent
Commits: 1