This is an HTML5 version of my earlier Java creation, Frax.

As with Frax, the landscape is calculated on a 33x33 grid. Unlike Frax, you cannot specify a landscape number. This is because Javascript's random number generator cannot be seeded with a specific value.

Having calculated the landscape, the colours of each square are calculated according to some simple rules:

• If all four corners of the square are below sea level, it is coloured a shade of blue according to its depth (water).
• If three corners of the square are below sea level and one is above, it is coloured yellow (sand).
• If the highest corner of the square is above a certain level, it is coloured between grey and white (snow) according to its height.
• All other squares are coloured a shade of green according to its height and steepness of slope (grass/trees).

Despite appearing to be 3D, the entire grid is actually rendered in 2D. There is no perspective, so it's more of a rotating isometric drawing.

The grid is drawn from the back, forwards. This eliminates the need to calculate hidden line removal. Hidden lines are simply overwritten.