03. Vice City — Open World City Generator

# 03. Vice City — Open World City Generator

A living city you can watch. That's it. That's the whole thing.

## What to make

A procedurally generated 3D city rendered in isometric or top-down perspective, filling the browser window. Buildings rise from a grid. Streets run between them. A sky hangs overhead. The city populates itself and runs.

A sidebar on the right holds the controls. A stats panel in the corner shows live metrics.

### The city

The city is generated procedurally on load and on demand. Each generation is unique — different building heights, different block layouts, different street grids. The algorithm decides:

- Building count and density
- Street width and grid pattern
- Landmark placement (a plaza, a tower, a park)
- Zoning (residential, commercial, industrial, mixed)

The city must feel like a city. Not a spreadsheet. Not a diagram. A place with presence.

### Sidebar controls

**Regenerate City** — Clears the current city and generates a new one from scratch. Buildings spring up with a brief stagger animation (50ms between each row, for visual effect).

**Toggle Day/Night** — Transitions the sky, lighting, and window glows. Day is bright with long shadows. Night is dark with lit windows, street lights, and a visible moon or city glow on the horizon.

**Earthquake Mode** — Shakes the entire view. Buildings sway. Camera oscillates. After 3 seconds the shaking stops and the city settles. The UI shows an "EARTHQUAKE" badge briefly.

**Toggle Traffic** — Adds moving vehicles on the streets. Cars follow the road grid, stop at intersections, and vary in speed and color. Toggle again to remove traffic.

### Stats panel

Top-left, always visible:
- **Buildings** — count of structures rendered
- **Population** — estimated (buildings × average units per building)
- **Render time** — how long the last regeneration took in milliseconds

## Always-visible HUD

Top-right: FPS counter, updates every second.

Bottom-right: Controls legend ("REGENERATE · DAY/NIGHT · EARTHQUAKE · TRAFFIC · scroll to zoom · drag to pan").

## Hard requirements

- Single `index.html`. No build step.
- No external textures fetched at runtime. All geometry and materials are procedural or drawn to canvas.
- Must regenerate in under 3 seconds on a 2020 laptop.
- Traffic, if enabled, runs at 30fps minimum.
- `prefers-reduced-motion`: no camera shake, no stagger animation, no vehicle movement.

## Visual rules

- Isometric or top-down 3D. Camera can zoom and pan, but angle is fixed.
- Buildings are simple extruded blocks — varied heights, varied window patterns, varied roof shapes. They read as buildings from above.
- Streets are flat planes between buildings.
- Day: warm sun, long directional shadows.
- Night: dark sky, ambient city glow, individual lit windows on buildings.
- Cars are simple top-down shapes that move along streets.
- No photorealism. This is a stylized city, not a GTA clone.
- The palette shifts with day/night: warm gold by day, deep blue and amber by night.