Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.com

iso

A JavaScript library that lets you draw isometric 3D like images using isometric blocks.

Example Code

window.onload = function() {

	iso = new Iso('isoCanvas', 53);

	iso.draw(-1, 0, 0, 'grass.png');
	iso.draw(0, 0, 0, 'grass.png');
	iso.draw(1, 0, 0, 'grass.png');
	
}

Example Image

Here's a screen shot of an example image drawn on an HTML page using this library.

Coordinates

iso uses a 3D coordinate system using the x, y, and z axis. (0, 0, 0) is the center point. Here's a graphical drawing of the coordinate system.

Block Images

Each block is actually a png image file. You can use various image files to represent different types of tiles such as glass, dirt, rock, brick, etc.

Browser Support

I've now tested the library in FireFox 8.0 and Chrome 15 (both under Linux). But I imagine it works with most current browsers and operating systems. The HTML 5 canvas element is new to HTML 5, however, so older browsers do not support it.

Files and Source

The iso files are hosted on github.

License

This source code is distributed under the MIT License.

Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.com
comments powered by Disqus
iso.txt · Last modified: 2011/12/31 21:29 by Joel Dare