BuildGuide

01 / URBAN LOGIC

The concept

Trace City treats a motherboard as an urban plan rather than a decorative texture. Solder mask becomes terrain; copper traces become avenues; IC packages are dense municipal districts; capacitor cans are public parks; and the broad ground-plane river supplies the city's return path. The metaphor drives the data as well as the look: population is expressed as pin count, exports as bus width, and district temperament as signal noise. Day mode reads like silkscreen on green board stock. Night mode reveals the same routes as cyan commuter current.

02 / SIGNAL CONSTRUCTION

Visual technique

The city map is one inline SVG in index.html. Its named groups - traceLayer, districtLayer, capacitorLayer, routeLayer, and packetLayer - behave like fabrication layers. In main.js, drawNetwork() converts a link list into orthogonal copper paths, underlays, vias, and weighted graph edges. drawDistricts() builds every chip and its physical pin rows from the district records. drawCapacitors() stacks circles, ellipses, and polarity marks into cylindrical parks. The irregular river is an SVG path beneath the transit network.

The commute is genuine routing, not a canned animation. shortestPath() applies a weighted graph search; buildRoutes() turns the winning node sequences into visible dashed paths; and placePackets() samples those paths with getPointAtLength(). Each packet also carries a short luminous tail, so traffic reads as directional electron convoys. Pan and zoom update a transform matrix on mapViewport. Pointer drag changes translation; the wheel and toolbar change scale around the cursor or map center. The rush-hour range control calls updateRushConsole(), translating clock time into throughput, trace load, headway, oscilloscope gain, and live packet velocity. triggerPeakSurge() conducts the console straight to the 07:42 maximum. The frame loop halts when the document is hidden, while reduced-motion mode keeps a static route diagram.

03 / FABRICATION TOKENS

Palette and type

Orbitron carries display type, chip codes, and navigation; IBM Plex Mono carries datasheets, ledgers, and body copy. Tight uppercase tracking evokes board registration marks, while the mono copy stays generous enough to read as civic documentation. Atmosphere comes from CSS grid laminations, copper diagonals, SVG noise, pad shadows, and restrained cyan bloom. No raster artwork is involved.