Isomer.js Isometric graphics with Javascript.

November 30, 2016

Preface

Isomer.js seems like a very cool javascript library for adding some nice isometric graphics to your project, let’s try figuring it out…

Step 1: Include Isomer.js in a pen and display a cube

See the Pen Isomer Step 1. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 2: Display a grid with Isomer.js to figure out units and placement

See the Pen Isomer Step 2. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 3: Add irregular shaped prisms

See the Pen Isomer Step 3. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 4: Add color

See the Pen Isomer Step 4. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 5: Other Shapes

See the Pen Isomer Step 5. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 6: Use Methods: Translate, Scale, Rotate

See the Pen Isomer Step 6. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 7a: Animate Rotations

See the Pen Isomer Step 7. by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 7b: Animate Translations

See the Pen Isomer Step 7b by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 7c: Animate Scaling

See the Pen Isomer Step 7c by Eugenio - Keno - Leon (@k3no) on CodePen.

Step 8: Make something pretty

See the Pen Isomer Part 8. by Eugenio - Keno - Leon (@k3no) on CodePen.

Caveat Emptor ( buyer beware ) Isomer.js is not a full fledged Isometric or 3D tile engine, there are no shadows, lights or interactions of any kind, although it makes for a nice foundation if you decide to build on top of it. Look at three.js if you want more, although it is considerably larger in size and complexity.

Parting words

Isomer.js is a cool little library for making isometric graphics, the best thing about it ? the library itself is around 9K minimized, so it is super easy to include it on your projects and add some simple isometric elements, you can also use it as the basis for more complex isometric projects, this was just the tip of the iceberg : )

Best,

Keno.