Grid How it works

Building

How it works

Projection

World point (x, y, z) maps to screen with the true 2:1 isometric projection used here:

screenX = (x - y) * scale
screenY = ((x + y) - z) * scale / 2

With a cell size of 32 units the tile diamond is 64 by 32 (2:1). The three axes (x, y, z) project to equal-length vectors, so the foreshortening is true isometric.

Depth sort

Every generated building is sorted by the screen height of its footprint base and drawn back-to-front (painter's algorithm).

Seeded pipeline

A hand written mulberry32 PRNG plus value noise drives the district layout, block types, building sizes, roof pitches and window lighting. The seed comes from the URL hash.

Node count

nodes: ...

drag to pan · scroll to zoom · arrows pan · +/- zoom · 1-4 azimuth · hover to inspect