QR City: creative coding to turn a link into a 3D city

It all started with a silly question

That's what creative coding is: letting curiosity take the wheel and using code as a material, not as a means to some "useful" end. I scan QRs every day —a menu, a ticket, a wifi network— without giving a single thought to what they are. Until one day I stopped to look at them: why that specific pattern of little squares? What's inside there? Why are some denser than others?

Pulling on that thread took me much further back than I expected. To understand a QR, I first had to understand where the idea of turning information into marks a machine knows how to read comes from. And that idea is old. Very old.

Before the QR there was Morse

I like Morse. There's something honest about it: it's the absolute minimum of encoding. Just two symbols —the dot and the dash— and a handful of timing rules (a dash lasts as long as three dots, the gap between letters as three, between words as seven). That's enough to send any text down a wire, a flashlight, or a knock on a wall.

The beautiful thing is that Morse already solves the underlying problem of every code that came after it: how to translate an alphabet into a sequence of marks that doesn't depend on language or sight, only on being able to read two states —signal / no signal—.

When you draw it out in full, Morse already looks like a distant cousin of a barcode: a strip of wide and narrow marks. The difference is that Morse is read in time (one after another) and the barcode in space (all at once). That leap —from reading in time to reading at a glance— is exactly what happened in the mid-twentieth century.

From dot and dash to the barcode

Legend has it that one of the barcode's inventors, Norman Woodland, was thinking precisely about Morse when the solution came to him: if you stretch the dots and dashes downward, upward, turning them into vertical lines of different thickness, you get something a machine can read in a single optical sweep. The dot and the dash stop being read in time and start being read in space.

I found it so beautiful that I wanted to see it. A message in Morse that, literally, stretches vertically until it becomes a barcode. And since the QR sits at the end of this story, I let the barcode take one more step and crystallize into one:

A QR is just text disguised as an image

The classic barcode is one-dimensional: it only uses the horizontal axis, so it stores little information (a short number). The QR —Quick Response, invented in Japan in 1994 to track car parts— makes the jump to two dimensions: it uses height and width at once, with its three corner squares to orient itself and its error correction to survive a scratch.

But underneath it's the same idea as Morse, just far denser: a QR is a way of translating an alphanumeric field —a text, a link— into something graphic that software knows how to interpret. Each module (each little square) is a bit: dark or light, one or zero. The pattern you see isn't decorative; it's your link, written in a language of squares.

Understanding that —that a QR is a link made geometry— was the click. Because right around that time I happened to be learning about something completely different.

From the metaverse to a city

I was reading about the metaverse, and one phrase stuck with me: that the metaverse, deep down, is nothing more than addresses. Places you go to. And if every website is an address, and every address is a place you enter… every website is, in a way, a small world. A city.

The two ideas crossed: if a QR is already the geometric representation of a link, and a link is already a kind of city… why not make it literal? Take the QR grid and extrude each dark module upward, each one with a different height, until the black-and-white plane becomes a skyline. The squares stop being bits and become buildings. The link becomes a city.

The best part is that you don't have to choose between "pretty" and "functional": if you look at it from above, with a camera without perspective, the rooftops form the flat pattern of the original QR again. It still scans. The city is the code.

How you bring it to life

A bunch of extruded gray boxes isn't a city; it's a 3D spreadsheet. What makes it feel alive is everything that happens on top of it, and almost none of that is "drawn" by hand: it's procedural, generated by code from the link itself.

• Procedural textures: the rooftops, the lit windows on the sides of the buildings, the ground with its sidewalks, roads, grass and water. They aren't images; they're rules a shader evaluates pixel by pixel.
• Elements that add life: miniature cars roaming the streets, the odd tree, tiny people. Details that give it scale and movement without stealing the spotlight from the code.
• Shaders and light: the light of the sun or the moon, the shadows the buildings cast, and an optional bloom that makes the lit windows glow like a city at night.

And since everything is derived from the link deterministically, the same link always gives exactly the same city. Your address has its skyline, and only its own.

The city, live

Here's the piece running, with the city generated by this very website's link. Change the style (day, sunset, night), turn life, the shaders or the bloom on or off, or touch it so it spins into a top-down view: there it's a QR you can scan with your phone. (This is just the viewer; to feed in your own link and generate your city, head into the project.)

Anatomy of the city

Now that you have the city in front of you, it's worth breaking it down. If a QR is a city, its parts suddenly make sense: it's not all data, much of it is structure —fixed markers that help the scanner orient itself before reading anything—. Hover (or tap) over each zone:

The city can lose buildings

There's something that makes QRs almost magical: they take a beating. You can cover a corner, crumple them, or slap a logo on top, and they still read. It's not luck: every QR stores redundant information via an error-correction system (Reed-Solomon). Translated to the city: you can knock down a few buildings and the link is still there.

From a silly question about some little squares to a city that is, all at once, a link, a sculpture and a scannable code. That, to me, is creative coding: following your curiosity until the code hands you back something you didn't expect.