An isometric city that builds itself and runs through day and night.
The city grows from a seed: a coastline and harbor, a river with bridges, a road grid, and lots zoned into towers, midrises, houses and parks with noise. Every building is extruded in isometric projection and sorted by depth. Cars follow the roads, windows light up at dusk, and a full day and night cycle shifts the light, shadows and sky.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an isometric procedural city with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Use a 20 by 20 tile grid and an isometric projection: a world point (x, y, z) lands on screen at ((x - y) * tileWidth / 2, (x + y) * tileWidth / 4 - z * heightScale), shifted to the middle of the canvas.
- Generate the city from a seeded random number generator: lay roads along every fifth row and column, and treat every other tile as a lot.
- Put a building on most lots: a box with a random height, taller toward the center of the map. Draw only the three faces you can see (the top and the two front walls), each a slightly different shade of the same color so the boxes read as solid.
- Draw the ground first, then the buildings sorted back to front by x + y (the painter's algorithm) so nearer buildings cover farther ones.
- Click to generate a new city from a new seed.
Once that works, make it beautiful:
- Light every face from a sun direction with a simple dot product, plus an ambient sky color, and animate the sun through a day so colors shift from noon blue to golden hour to night.
- Add shadows by projecting each building's top along the sun direction onto the ground and filling the outline.
- Add rows of windows that light up warm yellow at dusk, a few parks with round trees, and a soft sky gradient behind it all.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as cars driving along the roads, a river with bridges, or pitched roofs on the smaller houses.
