nightcity — project detail

Side projectNight City

An endless pixel-art street at night that you walk along while the city quietly gets on with being alive around you. Built as an experiment in how much life you can give a picture that is mostly standing still — and in getting two dozen separately generated images to look like one place.

play it ↗ view on GitHub ↗

The Night City title screen: the words NIGHT CITY over a pixel-art skyline at night, with a moon, lit windows and a neon MOTEL sign. — The title screen sits on the skyline; pressing start pans the camera down to the street.

What it is

You walk right, and the place carries on without you. Windows go dark in towers a mile away, a lamp stutters, a police car tears past, a bus pulls in at a shelter and waits, pigeons scatter off a rooftop, rain lands on the kerb and splashes. None of it is scripted — it is a set of small systems each deciding for itself when to do something.

The target was that roughly a tenth of the screen is changing at any one moment and the rest is perfectly still. That sounds unambitious, and it is the entire difference between a city at night and a screensaver.

Street level in Night City: a character walking past lit shopfronts and neon signs, pedestrians on the pavement, a police car on the road behind railings. — Street level. Pedestrians, traffic, neon, reflections on wet asphalt — and a police car going past, siren and all.

How it works

The world is painted onto a canvas just 320×180 pixels and then blown up four times with smoothing switched off. That second step is the whole trick: every pixel becomes a crisp block, and nothing can land on half a pixel. Draw straight onto a big canvas instead and everything shimmers the moment it moves.

The city is seven parallax layers, each a handful of tiles repeated forever in both directions. Walk far enough and you meet the same building again — but never the same lit building, because each tile asks a seeded random number generator "what am I?" using its own position as the seed. For any tile to be able to follow any other, the outer eight pixels of every tile are left empty. You cannot see the seams because there is nothing at them.

Nobody marked where the windows are. A tool reads each piece of artwork and finds the rectangles darker than the wall around them — those are windows. The same pass finds rooftop parapets to hang signs from, ledges for pigeons to land on, and shopfronts to spill light onto the pavement. The city's behaviour comes out of its own picture.

The art pipeline

Every image started as a written prompt, and none of them went straight into the game. Image generators cannot actually produce pixel art — they produce a large picture that resembles it, with blocks roughly square and colours roughly right. "Roughly" is fatal at four times magnification: a block 3.8 pixels wide instead of 4 is a ragged edge.

So everything passes through a conforming tool that snaps the art to the pixel grid, forces every colour onto a locked 23-colour palette, hardens the transparency and checks the gutter rule — then prints the numbers, so a bad generation is something you can measure rather than a vague feeling that something looks off. The prompt pack is half the project.

Engine: Vanilla JavaScript and one canvas — no framework, no build step, no dependencies
Art: AI-generated from a written prompt pack, then conformed to the grid and palette by a Python tool
Audio: Streaming beds for music, rain and city ambience; overlapping one-shots for footsteps, sirens and buses
Mobile: Touch controls with auto-run, and a taller portrait viewport that uses art already sitting above the landscape view
Hosting: Vercel

A detail I like

Most of these systems run alongside each other without ever noticing each other; the traffic has no idea the pavement exists. The bus is the exception. It reads the very same data that decides where the shelters go, picks the next one ahead of it, eases to a stop, waits a few seconds, and pulls away. It is a small thing, and it is the moment the city stops being several effects layered on top of one another and starts being a place.