An axonometric grid environment implemented with javascript, css, and html

This javascript class allows an axonometric grid of any dimensions and aspect (isometric, dimetric, and trimetric) to be rendered by the browser using html dom elements. Mouse movements over the grid are tracked and the current grid cell beneath the cursor is calculated based on the y-intercepts of the vertical and horizontal grid axis.

var grid = AP.axonometric.makeGrid({ x : 5, y : 5, aspect : { xx : 20, xy : -5, yx : 18, yy : 9 }, element : document.getElementById('example1') });

fig 1. Dom elements are positioned within the environment according to the vertical and horizontal offsets of the grids isometric perspective View example

Grid cells can be styled using css sprites.

fig 2. Grid cells styled to look like a two-dimensional plain in perspective. View example

A grid-item class allows each cell of the grid to have a type, and for type-specific dom elements to be rendered into the grid cells dom element.

fig 3. A grid representing a landscape with a few tree items View example

A demonstration of the same basic principle applied to hexagonal tiles in an axonometric environment. This is accomplished by adding a z-axis and calculating the mouse-hover over the hex grid based on the x,y,z rows.

fig 4. A trimetric projection of a hexagonal grid with precise tracking of the mouse position within the hex coordinate space. View example

View Adam Portilla's portfolio website