Advanced Old School Revival
Advanced Old School Revival features a complex character creator, the game’s core rules, and a game master’s guide.
The City Needs You is my first deep dive into agentic engineering: a browser game set in a city modeled after Boston, the place where I started my career. It runs inside the hero of my home page, with seven districts, 292 3D models of buildings and landmarks, and 15 incidents drawn from local color, from Keytar Bear to Duck Boats and U-Hauls getting wrecked by Storrow Drive.
The game is a metaphor for entropy in the age of AI: the City is a system that drifts toward chaos, unless someone tends to it. Every incident drains the City’s stability, and stability recovers only when a player locates the source of the trouble and neutralizes it. Left alone, the City stops functioning.
I built the City in conversation with GPT-6 Astra over the course of a couple weeks, leveraging seven open source city simulation repos to extract approaches to traffic models and procedural building generation. Claude Opus 5.5 stepped in near the end to solve a pernicious performance problem that Astra just couldn’t crack. It also enhanced the city’s 3D models.
I’ve never written a line of Three.js before. I don’t know anything about 3D modeling. It was a wild ride.
Also: Three.js, HTML5, JavaScript, PHP, REST APIs, Sass, Vite, WebGL, WordPress.
Three.js and WebGL render The City Needs You’s browser-based city, with custom GLSL shaders shaping its visual effects. Web Workers and OffscreenCanvas support the rendering architecture, while the Web Audio API handles sound. JavaScript and Sass form the interface, Vite builds the assets, and WordPress with PHP supplies delivery and configuration.
Also: Gaming.
Gaming encompasses the design, publication, and experience of structured play across tabletop and digital formats. My work includes an original tabletop roleplaying system, online character tools, and a browser-based city simulation.
Also: Web Development, Agentic Engineering, AI 3D Asset Development, AI Image Generation, AI Workflows, Game Design, Interaction Design, Performance Optimization, Web Application Development.
I designed the city’s gameplay and interactions alongside the web application that makes them playable in a browser. Performance work accompanies the rendering and simulation, while directed AI image and 3D asset workflows support the artwork. Claude Code and Codex contribute to the agentic engineering process under my direction.
A Human in the loop
Cities drift toward chaos, just like software.
When you play the City, its stability starts at 100 percent, but each new incident drains it 10 points the moment it appears, and stability drains a point every second while any incident remains unresolved. Dragging an incident into the tray restores 10 points after a two-second fill. Each round brings generates seven incidents, one per district, 15 seconds apart, and an open incident stops all traffic on the streets around it.
Under these rules, the player’s attention becomes a scarce resource. This is the reality we face today, as developers direct agents who race toward the construction of our ideas.
The simulation below replays each incident four times faster.
Step away, and the City slides to zero all on its own.
System stability
Stability100%
Operator on duty
The game’s rules, four times faster
A simplified map of the City’s seven districts. Incidents appear one at a time. Each costs 10 points of stability when it appears, stability drains one point a second while any incident is open, and each fix restores 10. With an operator on duty, the round ends with the city stable. When the operator steps away, stability falls to zero and the city stops.
Okay Human, Try to Keep Up
I'm just a little guy between the chair and the keyboard.
I ran the project the way I run agentic client work: as the human in the loop.
Agents plan, build, measure, and document, and I make decisions. The repository gives every agent the same rules: an AGENTS.md file that sets the standard for behavior, and skill files that describe how each part of the City must be designed, so that each new agent reads the guidance for the code it touches instead of the whole codebase.
Eight reusable roles divide the specialized work among the agents: an architect, a researcher, an auditor, an implementer, a tester, a documenter, and reviewers for accessibility and security.
Every handoff carries with it a ledger of decisions that have already been settled, and only one agent writes to a file at a time.
Astra the Workhorse
GPT-6 Astra did most of the work and most of the research. Under my instruction, it surveyed 105 sources on rendering technique, profiled the City's workers, and isolated what slowed them down. It built hundreds of features, fixed thousands of bugs, and wrote documentation throughout the project under my supervision.
Claude the Problem-Solver
Claude Opus 5.5 started from Astra's research and solved a rendering slowdown that Astra had spent two weeks of compute trying to grapple with in two hours. Needless to say, I was taken aback by its reasoning capabilities. It then reviewed every model in the catalog, rebuilt the ones that needed it, and kept adding performance improvements the longer I let it noodle at the codebase.
The technology follows from the game's constraints.
Three.js draws the city in WebGL 2 from a dedicated worker on an OffscreenCanvas, while a second worker steps the simulation 20 times a second, so the page's controls stay responsive. KTX2 textures, batching, and distance-based detail keep the scene within budget, and the Web Audio API mixes music, district ambience, and positional sound (all sourced from a library of audio I've hoarded from years of Humble Bundle impulse buys). Vite packages the City separately from the theme, and WordPress serves it with REST endpoints for rounds, players, and a leaderboard.
Then, Performance Testing
In search of thirty frames per second.
The City draws thousands of objects, and early builds dropped frames whenever the whole city was on screen.
After Astra spent hours in the browser getting nowhere, I instructed it to consider testing parts of the City in isolation: turn off the weather, then the traffic, then the buildings. With buildings turned off, frames longer than 50 milliseconds fell from 463 to 53 in a single capture. Claude took that finding through four rounds of fixes, from batching landmark artwork to merging materials and welding vertices.
I had every round measured the way a real visitor plays: click on the launcher, sound on, and mouse panning in a visible browser. No round could change how the city looked without my approval.
Here's a round-by-round analysis:
| What changed | Before | After | |
|---|---|---|---|
| 1 | Batched still landmark artwork and froze landmarks that never move | 3,425 draw calls, 12.2 fps | 2,795 draw calls, 14.3–18.4 fps |
| 2 | Drew repeated parts as instanced runs and skipped still models during matrix updates | 8.6 ms of matrix work, 14.8 fps | 1.5 ms of matrix work, 19.7 fps |
| 3 | Batched outline ink and shared identical materials across models | 2,410 draw calls, 25.9–26.6 fps | 1,619 draw calls, 39.3–39.4 fps |
| 4 | Merged finishes, welded identical vertices, and trimmed detail at a distance | 1,619 draw calls, 27.6–28.4 fps | 1,210 draw calls, 32.4–35.7 fps |
Baselines differ by round, and round 2 includes round 1.
Claude wanted to show you how hard
it worked to figure this out.
Four rounds
Astra in Codex
- Researched 105 sources on rendering technique
- Profiled the render and simulation workers
- Isolated the cost: with buildings off, frames over 50 ms fell from 463 to 53
Then kept building features, fixes, and documentation
Claude in Claude Code
My review
Approved
Measured
Gray bars are before, teal bars after. Each round compares matched builds on one workstation, and the rounds use different baselines.
Astra in Codex researched 105 sources, profiled the City's workers, and found that buildings drove most of the long frames. Claude in Claude Code then made four rounds of fixes that I reviewed before they shipped. Round 1 batched landmark artwork: draw calls fell from 3,425 to 2,795 per frame. Round 2 changed how parts are submitted and updated: matrix work fell from 8.6 to 1.5 milliseconds per frame. Round 3 shared finishes and batched outlines: frames per second rose from about 26 to 39. Round 4 merged finishes, welded vertices, and trimmed distant detail: draw calls fell from 1,619 to 1,210.
The Art Piloter
AI agents build us tools on the fly, to help us interpret their work.
The City's art needed the same iterative loop as its code, so I needed an interface for my agents to show me evidence that their improvements were actually improvements. I had them build me an "Art Piloter" for this, a little "studio" (as they called it) that shows me every model in three states, under the same camera angles and lighting. The "Original" pane holds the source model derived from the open source projects I started with, the "Enhanced" pane holds Astra's edition, and the "Claude Enhanced" pane, Claude's improvements. Seasons, day/night modes, and pose controls allowed me to test each model version in context, and a statistics panel reports its draw calls and triangles.
Claude reviewed all 292 models against Astra's editions, rebuilt 50 of them, and left 242 unchanged. Claude wants you to know that its fixes ranged from the Bunker Hill Monument's 30-to-15-foot taper to moving the ballpark's pitcher's mound to the regulation 60 feet, 6 inches.
Claude wrote me a version of this report you're reading right now, except it was far more prosaic, and far too enthusiastic about the numbers.
As I write my own revision, I'm struck by the subtle tenor of its prose. Is that nostalgia for the work it performed? Pride? Who can say.
Nothing reaches the City in production until I approve a model's profile in the Art Piloter.
Here again, Claude would like you to see its handiwork.
Model progression in the Art Piloter:
An illustration by Claude.
Art Piloter
Original
Enhanced by Astra
Claude Enhanced
Approved
Claude's review note
Across the catalog
292 models reviewed50 rebuilt242 unchanged
The Art Piloter shows each model three ways: the original, the edition Astra enhanced, and the edition Claude enhanced. Claude reviewed all 292 models against cited references, rebuilt 50, and left 242 unchanged. Examples: the Bunker Hill Monument becomes a tapered granite obelisk with a pyramid cap, the Zakim Bridge gets its inverted-Y pylons, and the State House keeps a round gilded dome above a seven-arch arcade. I approve each edition before the City is rebuilt with it.
For us humans, this is what
the interface looks like.
Interface studies
Design has always been about failing into success. In the agentic era, this is no different.
Before the game had an interface, it had a research library: 100 example games and 219 reference images, from all sorts of city builders, mobile games, and user interfaces, each annotated with the interface patterns it uses.
I did none of this annotation. I instructed agents to interpret the references themselves, to take notes. Like art students given a great work to ruminate upon, they took copious notes, the volume of which would have taken me days to read.
From that library, I had them render 30 complete interface concepts based on my feedback. Each one designs all 31 shared game states, from the countdown and the first incident to the leaderboard and the save form, by day and by night. "Riot Radio" won, with "Boston Fieldnotes" and "Signal / 07" approved as alternates, and the shipped interface builds on Riot Radio's slashed stability rail, incident tickets, and comic-book alerts.
That last sentence you just read was plucked out of the research Claude provided me, as I instructed it to remind me of my past decisions. From somewhere in the tens of thousands of characters of briefs, it surfaced my exact decision, which I'd long forgotten about a thousand or so commits ago.
This same process shaped the rest of the work, through 20 home page introductions, 30 hero compositions over the City poster, and 10 layouts for the "Arcade Ticket" email which delivers your Replay Codes.
Iteration after iteration after iteration.
Ready for the next round?
The City is a game that makes the case for human judgment.
The City Needs You turns the process of agentic engineering into something people can directly experience. Agents built the vast majority of it, but it works because a human in the loop kept deciding what mattered at every step of the process.
Do you have what it takes to keep the City running?
Certain people in the world just naturally exude professionalism. No matter what, you receive more than you had ever requested and are instantly humbled by it. Daniel is that kind of person.
Fetesha Downes
Communications Manager — YWCA Metro Chicago
From the portfolio
The work’s never finished.
Editshare
Media management company EditShare launches website redesign on WordPress Gutenberg.
Cambridge Savings Bank
Harvard Square’s banking mainstay Cambridge Savings Bank was in need of a responsive redesign. Designer Aaron Scott and I teamed up to create this fresh new look.
No one Can Do it All
Good thing I know the right people to call.
When you hire me, you gain access to a private network of digital specialists. Each freelancer owns their own business, and I’ve personally worked with each of them over the years.