From a printed map to a living city

A map that comes alive

The starting point: a printed map that turns into a 3D city on the phone.

The card's back is a real map of downtown Brampton, built from OpenStreetMap and NRCan's 1 m LiDAR elevation, and it doubles as the AR tracking target. The QR code opens a web app where the same streets rise as a 3D twin with wind, rain and crowd simulations. The model grew to 552 × 840 m around the card's 420 × 240 m frame, and the first phone-test preview went up on 3 Oct.

The first version

On the phone (left) the city sits small in the middle of the screen under large control panels. Up close (right) the buildings are plain boxes on a flat ground.

Make the 3D unmistakable

Two treatments of the same city in one day.

The brief was sharpened: this is a showcase meant to impress, so exaggerated height, colour and light are welcome, and an exact replica is secondary. Brighter light, raised relief, a proper rail line with its train, and panning made the showcase build in the morning. By the afternoon the city had a second treatment, an illustrated miniature with broad cel-shaded bands and crisp silhouettes.

Showcase → illustrated

The first pair shows the whole model, the second a street corner. In the illustrated version, look at the flat colour bands and outlines, and at the dense window grids that later turned out to be too busy on a phone.

→

→

Nine directions in one evening

Two rounds of art directions, all rendered on the real 330-building city. None was picked, and that settled what the look should be.

Round 1Three directions

Only light, palette and interface change here; the buildings are the same in all three.

Round 2Six “professional” directions

These go further: building hierarchy, facade detail, trees, framing and interface all change, from an architect's white model to a bronze monument.

One building first

Instead of another whole-city set, the new language was tried on a single building, approved, then rolled out the same night.

Step 2The same style across the city

Every building in the new language; six landmarks get colours of their own: the Rose Theatre, City Hall, St Paul's United Church and three Algoma University buildings.

Storybook RPG, then Wuthering Waves

The landmarks were made to look like the real buildings, and the whole city got more colour.

The morning pass borrowed from painted storybook phone RPGs. The landmarks still did not look enough like the real buildings, so the next trial followed the environment art of Wuthering Waves and used many more reference photos, from the front, the side and the air. It started, again, with one building.

Step 1One building: the Dominion Building, 8 Queen St E

The photos showed the earlier corner-clock version was wrong: the clock tower is a centred shaft facing Queen Street, over five arches and a brick front. First trial left, checked version at dusk right.

→

Step 2The other landmarks, storybook → Wuthering

Same building, before and after the photo check. Look at the proportions: the Rose Theatre's tall arched glazing and stage tower, City Hall's clock tower, St Paul's square tower and slate roof.

→

→

→

Step 3The vivid city, published that evening

Stronger greens, coral and blue roofs, brighter clothes and cars, with each landmark's material colours kept.

A day in the life of the city

Instead of buttons for wind, rain and crowds, the city plays a whole day by itself.

Three control modes and the tutorial text gave way to a self-running guided day. On 6 Oct it became one continuous 24-hour story, and Brampton's nickname, the Flower City, added flower beds across its parks and plazas.

The day in seven frames

Read left to right. It opens as a flat map for three seconds and tilts up into 3D. Wind arrives and people shelter, rain runs off the roofs into the streets, the sky clears to a rainbow, a crowd gathers for the evening event, and night falls.

Like a movie director

The camera should behave like a director telling a real story, in a live film of about three minutes.

Every camera hand-off had to come from a character's action. A 30-second prototype came first: a bird descends from the map and lands, the camera hands over to a walker, drops to eye level in the street, then rises to reveal the Dominion Building's clock.

The 30-second prototype

The clip plays the whole opening. The stills are its three hand-offs: the bird in flight, the bird landing beside the walker, and the eye-level street.

A day in Flower City

The first full film, then a second build with the camera lifted higher.

The agreed screenplay became a 180-second live film: a blossom drifts down into a flowerbed, a walker's journey to campus, wind and rain over the roofs, a rainbow and Garden Square, then a car through the lit evening streets and a crane up to the whole city.

Build 2Close shot → 20–30 m up

The same moments in the two builds. Left of each arrow, the close shot; right, the elevated build, where neighbouring buildings and the street flow fill the frame instead of one figure.

→

→

Matching the real buildings

Three accuracy passes measured each landmark against the 2023 LiDAR survey and camera-matched photos, then rebuilt what was off.

Before | after, same camera

Each image puts the old model on the left and the rebuilt one on the right. City Hall, renovated in 2015, gains its east-end clock tower, stepped wings and octagonal atrium crown. The Dominion Building gets a taller clock stage and its chimney where a 2008 photo shows it.

Measured against LiDAR

For City Hall: the survey's heights, the model's heights and their difference, before (top) and after (bottom). Red means the real building is taller than the model; after the rebuild almost none is left. Mean height error: 7.94 m → 0.73 m (the Dominion Building: 2.57 m → 0.91 m).

Storyboards, a diorama and a reset

A detailed plan for an edited film was storyboarded and partly rendered, then set aside the same evening.

Film v2 was planned as 30–45 short shots, cut on action, with the blossom guiding the viewer through the day and a tilt-to-drain flood game after the storm.

The planA storyboard of real engine stills

Board 1 (left) shows the opening shots, with props not yet built marked as mock-ups. The flood-game board (right) is where the tilt game first appears: tilt the phone to pour the flood off the map.

“Hello, I'm Brampton”

A new idea instead of a patch: the city itself talks to the person holding the card.

In short captions, the city asks for the viewer's help in a storm (tilt me toward the creek) and ends on the card in their hand. Algoma University's campus runs through the story.

Step 1The storyboard, as real engine stills

8 of the 16 frames, in order. The film starts and ends on the card's map; the storm and the viewer's turn sit in the middle.

One route through downtown

The film was given one calm route, then slowed down and finished with brighter fireworks.

Routes were audited for what makes a good one: no doubling back, calm turns, each landmark seen clearly. The film became one arc, then a downtown loop, with people arriving by GO train and the flood game capped at 15 seconds.

PlanningThe route and the fireworks

Left: the film's path as one arc through downtown, coloured by chapter. Right: two rounds of fireworks side by side; round 9 came out dimmer than round 8, and round 9b put the brightness back.

ResultThe slower film, 9 Oct

The opening (“Hi. I'm downtown Brampton.”) with the GO train, the first version of the flood game with its two meters, and the rainbow after the storm.

An app around the film

Where the film ends, and how the rest of the app is laid out.

The app took a simple shape: AR or screen; inside either, the film or Look around; inside Look around, small games for the flood, wind, rain, crowds and roads. One-finger drag always looks around, in every mode, and the same action never means different things. The film went to the card's main address that day.

Three end pages

Where the film stops and hands over: A, the card in your hand; B, the map at night; C, a map key. B was built.

On the card, on the table

The city stands on the printed card, or on a table, on Android and iPhone, with nothing to install.

AR on the printed card: the phone finds the map side and stands the city on it, smoothed and fading out when the card is lost. Then table-size AR on Android, fitted with two fingers and locked. iPhones get Apple's AR Quick Look from a USDZ model of the same city. The first production release went out on 11 Oct, and the card became the door to every NCoE demo through a shared hub.

Two kinds of AR

Left: a tracking test on a recorded video of the card; the green outline is where the app has found it. Right: the web city beside the USDZ model that iPhones open in AR Quick Look (no outlines or cel shading there, but the same buildings, colours and traffic).

Ink and cel

A look review of the film led to a drawn finish, the look the card still has.

Ink outlines in a darker shade of each surface, three flat light bands with violet-blue shadows and warm highlights, one rule for buildings, trees, people and cars, and weather that stays colourful.

Before and ink, same frame

Drag the gold line across each frame. Left of the line is the earlier look, right is the ink look.

BeforeInk

BeforeInk

How many lines?

Four line treatments on the same frame: A no lines, B every edge in black, C the outer outline only, D softer lines. Black lines everywhere were too much; C or D were acceptable, and in the end outlines went only on the heroes (landmarks, people, trees and cars).

The first eight seconds

What someone sees right after scanning became a timed opening, like a game's opening scene.

The map from above, a move to the Rose Theatre, street life, the GO train crossing behind it, then the name card. Two things had to change in the city for that to work.

Change 1Lowering the Rose Theatre's stage tower

At 27 m the tower hid the rail line, and a train crosses a portrait screen in about a second. It was lowered to 20.3 m, then 19 m with the view tilted to 25°, so the train passes clearly behind.

Change 2New people, designed from concept art

Two AI concept sheets in the city's style; “Rounded citizens” was chosen and modelled. Below: the same street with the old and the new people.

→

Sound, all generated in code

An original score and city sounds, with no recordings: everything is synthesised in the browser.

The music is in the spirit of classic JRPG town themes. The city's sounds are composed into it: the clock-tower chime and the GO train whistle are tuned to the chords, and the name card rises on the opening's final chord.

The small things visitors touch

Each round of phone feedback became a small redesign.

1The flood game's meter

The old meter grew as the water left, so it read the wrong way round. Now one “Water left” meter starts full and empties as you pour, with one instruction for your device.

2The card and the loading screen

The card was cut down to the contact alone and folds away as soon as you touch the city above it. The start screen says “Loading my card…” until the city can answer a tap, because people kept tapping a screen that could not respond yet.

3Where the Menu lives

Two placements were mocked up for the card view. The Menu became the middle button of the folded tab, and it fits a phone without scrolling.

Ready for print and every phone

The latest release: print files, Android AR and every AR control tested.

The print sheet got cut marks at the four corners only, with no line along the trim on the back. A Chrome update had stopped Android table AR from drawing the city; switching back to the classic WebXR layer fixed it. Every control was then tested in table AR, and phones gained a second button on the start screen: “AR · City on your table”.