Motivation#

I build distributed systems at work and often crave more tangible visualizations of the systems I build. I have experimented with UI-based visualizations such as animated sequence diagrams and state diagrams with some success. This project takes that further by exploring physical representations of web system design components.

Expectations#

(to be humbled by reality)

System Design Diagram Cross-section layers

Show/Hide LLM Prompt 1

Create this image: A realistic product-style photograph of a tangible distributed systems simulator table. The table surface is frosted acrylic with a dense grid of tiny white LEDs underneath. On top of the table sit simple wooden blocks representing system components: several wooden cubes with small engraved server icons, a wooden cone representing a load balancer, and a wooden cylinder representing a database with a database icon engraved. The blocks look like natural wood educational pieces (similar to Montessori blocks), matte finish, not glowing.

Between the blocks, thin white LED light paths appear under the acrylic surface, forming clean straight lines directly connecting block to block, visualizing network links. No enclosing shapes or squares, only direct connection lines. The LED grid beneath the surface is faintly visible everywhere, but the active connections are brighter.

Soft lighting, slightly dark environment so the LED lines are visible, realistic materials. Minimalist, clean, educational hardware prototype aesthetic, like an MIT Media Lab interactive learning table.

Show/Hide LLM Prompt 2

Create the image: A cartoon-style, workshop-sketch illustration of a FabAcademy project concept shown in a clean exploded view with four layers floating above each other, drawn in a scrappy maker-lab style (hand-drawn lines, slightly imperfect, friendly engineering sketch aesthetic).

  1. Bottom layer: a CNC-milled wooden board similar to a carrom board. The center area contains an 8×8 grid of large square holes carved into the wood. The holes are deep recessed square pockets, clearly milled, with significant wooden padding between each hole. Each hole is twice the size of the LED grid cells above. Around the carved grid is a solid wooden margin forming an enclosing square frame. No corner pockets or circular holes — the board edges are fully solid wood.

  2. Second layer above: a fine mesh lattice grid similar to a laser-cut or 3D printed interlocking grid (like egg-crate panels). The grid spacing is much finer than the wooden grid below. NeoPixel LEDs are mounted along the grid lines, with one LED positioned at the midpoint of each side of every grid square (not at the corners and not along the outer edges). The LEDs glow in small RGB colors along the lattice structure.

  3. Third layer above: a thin frosted acrylic sheet covering the grid area, slightly translucent, with soft diffused lighting.

  4. Top layer: simple wooden blocks representing distributed system components placed on the acrylic:

one pyramid labeled “Load Balancer” three cubes labeled “Server” one cylinder labeled “Database”

The blocks are arranged to visually represent load balancer → servers → database.

The layers floating apart so the construction is clearly visible.

3D model of the table with labeled node topology

Prior Art#

Example Visualization#

Here is an example visualization of a distributed system (a map-reduce system) that process large number of input files in parallel and writes output files using a coordinator and workers.

Example simulation visualized

Show/Hide LLM Prompt

Draw an interactive traffic flow animation for the distributed systems project mentioned in https://pdos.csail.mit.edu/6.824/labs/lab-mr.html. Place the input files on the left of the animation vertically aligned and output files to the right of it. Make it data driven where I can upload a JSON file with the structure:

{
  "inputSplits": ["pg-tom.txt", "pg-huck.txt"],
  "output": ["mr-out-0", "mr-out-1"]
}

and then the input file names and output file names are derived from that.

Architecture: Smart Table, Simple Blocks#

Three architectures were evaluated:

ApproachVerdictRationale
Smart blocks (MCU per block)RejectedRequires powering each block (batteries or connectors), programming multiple boards, and excessive per-block fabrication.
Smart table, simple blocksSelectedAll intelligence lives in the table. Blocks are passive 3D-printed shells with NFC tags. One controller runs everything.
Machine vision / projectionRejectedFundamentally a software project. No meaningful fabrication element for Fab Academy.

All electronics, wiring, and intelligence are centralized in the table. The blocks are inert physical objects with embedded NFC tags. This eliminates wireless communication, batteries, per-block PCBs, and multi-device debugging.

Sensing Tradeoff: NFC vs Hall Effect#

Two sensing options were considered:

OptionResolutionIdentityVerdict
NFC reader array (RC522, 8x8)Low-res (one reader per grid cell)Built-in: each tag has a unique IDSelected
Hall effect sensor array + magnetsMid-res (denser sensor grid possible)No native identityDeferred

The hall effect approach is cheaper per sensor but doesn’t identify which block is placed — only that something is there. Workarounds for identity were considered:

  • Single NFC reader + manual labeling: tag each block at a separate reader station before placing it on the grid. Adds friction to the interaction.
  • Shape/size detection via hall effect array: use different block footprints and magnet arrangements, then infer block type from the activation pattern. Would need a high-res sensor array and calibration.
  • Capacitive sensing or IR camera with markers: either too expensive or too complex for the scope.

The NFC reader array is simpler and gives identity for free. We’ll validate this approach first.

Plan: Tasks#

  1. Table: CNC-mill a wooden table with recessed grid pockets for NFC readers (8x8)
  2. LED Grid: 3D-print grid with WS2812B NeoPixel addressable LED strips laid along grid
  3. Acrylic sheet: Laser-cut a frosted acrylic top surface to diffuse LED light
  4. Blocks: 3D-print block enclosures for each node type (compute, storage, network)
  5. NFC tags: Embed NFC tags in each block for identity detection
  6. NFC reader array: PCB for NFC reader array and NeoPixel wiring. Wire RC522 NFC readers into grid pockets, routed to the underside.
  7. Firmware: Pico + RP2040, SPI-based NFC reading, LED animation control, WiFi web server
  8. Software: web UI served showing topology, traces, and simulation controls
  9. Integrate everything: blocks to NFC readers to Pico W to LEDs and web UI

Plan: Validations / Experiments#

  • Mar 04 — Computer-controlled machining
    • Assignment: make (design+mill+assemble) something big (~meter-scale)
    • Validation: CNC-mill a section of the table top — a 2x2 grid of recessed pockets with LED channels between them. Verify pocket depth, channel width, and that the acrylic sheet sits flush.
  • Mar 11 — Electronics production
    • Assignment: make and test an embedded microcontroller system that you designed
    • Validation: design and mill a custom PCB that connects a Pico to 2-4 RC522 NFC readers over SPI with individual CS lines. Confirm all readers respond on the shared bus.
  • Mar 18 — Input devices
    • Assignment: add a sensor to a microcontroller board that you have designed and read it
    • Validation: wire up an RC522 NFC reader to PCB and read tag UIDs through different materials (acrylic, wood). Measure reliable read distance and confirm identity detection works through the table layers.
  • Mar 25 — Output devices
    • Assignment: add an output device to a microcontroller board you’ve designed, and program it to do something
    • Validation: drive a WS2812B NeoPixel LED strip from the Pico Program animated patterns (chase, pulse, color-coded flow) that will represent data traffic between grid positions.
  • Apr 01 — Networking and communications
    • Assignment: design, build, and connect wired or wireless node(s) with network or bus addresses
    • Validation: connect the Pico to a web client over WiFi. Send NFC reader state as JSON over WebSocket and receive LED control commands back. Prove bidirectional communication works.
  • Apr 08 — Mechanical design & machine design
    • Assignment: design a machine with mechanism, actuation, automation, function, and UI
    • Validation: ?
  • Apr 22 — Molding and casting
    • Assignment: design a mold, produce it, and use it to cast parts
    • Validation: design and 3D-print a mold for one block type (e.g. compute cube). Cast a few blocks in resin or plaster with embedded NFC tag pockets.
  • Apr 29 — Interface and application programming
    • Assignment: write an application that interfaces a user with an input/output device you made
    • Validation: build the web UI that shows a live topology grid. When blocks are placed/removed, the UI updates in real time.
  • May 06 — System integration
    • Assignment: design and document the system integration for your final project
    • Validation: integrate all subsystems end-to-end — blocks on table trigger NFC reads, firmware updates LED animations, web UI reflects state
  • May 13 — Wildcard week
    • Assignment: design and produce something with a digital process not covered in another assignment
    • Validation: catch up on CNC week during which I was sick. laser-engrave block icons (server, database, load balancer) onto the 3D-printed or cast blocks
  • May 20 — Applications, implications & project development
    • Assignment: plan the final project integrating all units covered
    • Validation: run a full demo scenario — place blocks to build a distributed system, watch data flow animate, interact via the web UI
  • May 27 — Invention, intellectual property, and income
    • Assignment: develop a plan for dissemination of your final project
    • Validation: open-source?

Table Design#

Physical Dimensions#

Hand sketch of table dimensions

Interactive isometric simulator prototype (v0.2)

  • Overall size: 75 cm x 75 cm (carrom board sized)
  • Board thickness: 18 mm
  • Raised edge: 5 cm wide border around all sides, full 18 mm height
  • Inner square area: 65 cm x 65 cm with 5mm recessed depth
  • Grid squares: 5mm below inner square, so 10mm below the raised edge surface (leaving 8 mm floor thickness)

Material#

  • Body: wood, CNC-milled
  • Top cover: frosted acrylic sheet, laser-cut to fit inside the raised edges

CNC Features#

The inner 65 cm x 65 cm area has two types of CNC-milled features:

  1. Square recesses. Pockets where blocks sit, sized to hold one block plus an NFC reader module underneath. Arranged in a grid layout (likely 12 to 16 positions).
  2. Narrow channels (10 to 12 mm wide, few mm deep). Run between the square recesses in a grid pattern, forming pathways for NeoPixel LED strips. These represent network connections between nodes.

Through-Holes#

Each square recess has a small (approximately 5 mm) hole drilled through the base of the pocket, going all the way through the board. NFC reader wires drop through these holes to the underside where all wiring and the controller live.

The LED strip also drops through one hole to connect to the Pico W on the underside.

Underside#

  • All wiring runs underneath the board
  • Pico W mounted on the underside
  • NFC reader wires routed and connected here
  • LED strip power and data connections here
  • Bottom is either open (with legs raising the board off the surface) or has a removable access panel

Layer Stack (Top to Bottom)#

  1. Frosted acrylic sheet. Sits on top, rests within the raised edges. Diffuses LED light. Blocks are placed on this surface directly above the NFC reader pockets.
  2. NeoPixel LED strips. Sit in the narrow channels between recesses, under the acrylic. Light shines up through the frosted acrylic.
  3. NFC readers (RC522). Sit in the square recess pockets, facing upward. Read NFC tags through the acrylic. NFC at 13.56 MHz passes through wood, acrylic, and glass (anything non-metallic).
  4. Wood board body. The structural piece with all CNC features.
  5. Wiring. Drops through to the underside via drilled through-holes.
  6. Pico W and connections. Mounted underneath the board.

Sensing: NFC#

Why NFC Over Hall-Effect#

Hall-effect sensors are cheaper per unit but require different magnet arrangements in each block to identify block type. This is fiddly and offers limited identity resolution.

NFC (RC522 modules) give identity for free. Each tag has a unique ID, so the table instantly knows which specific block is in which position. At approximately $2 to $3 per reader, the cost for 12 to 16 readers is $25 to $50.

Wiring#

The NFC readers communicate using a protocol called SPI (Serial Peripheral Interface). SPI uses a shared bus of three wires (called MOSI, MISO, and SCK) that all readers connect to. To talk to a specific reader, the controller activates that reader’s individual “chip select” (CS) wire, a dedicated line per reader that tells it “you’re the one I’m talking to right now.”

  • All RC522 modules share a single SPI bus (3 shared pins)
  • Each module gets its own CS pin on the Pico W
  • The Pico W has 26 usable GPIOs. Minus 3 for SPI bus, minus 1 for NeoPixel data = approximately 22 available CS pins
  • This is enough for 12 to 16 NFC readers with no multiplexer needed

NFC Through Materials#

NFC at 13.56 MHz reads through wood, acrylic, plastic, and glass. Only metal blocks the signal. A few millimeters of acrylic between reader and tag is well within the RC522’s 2 to 5 cm read range.

Visualization: NeoPixel LED Strips#

LED strips in the channels between grid positions visualize data flow paths. They light up to show requests traveling between nodes, replication traffic, heartbeats, and errors.

Color Coding#

ColorMeaning
BlueRead request
GreenWrite request
YellowHeartbeat / health check
RedError / timeout
WhiteReplication traffic

Wiring#

NeoPixels (WS2812B) daisy-chain: one data-in, one data-out per LED. A single continuous strip snakes through all the channels on the board surface. Only three wires drop through one hole to the underside:

  • 1x data line to a single GPIO pin on Pico W
  • 1x 5V power
  • 1x GND

No complex wiring on the top surface. The strip lays in the CNC channels.

Blocks#

Design#

  • 3D-printed shells: simple geometric shapes (cubes, cylinders, or rounded boxes)
  • Passive NFC tag embedded in the base of each block
  • Color differentiation by block type:
    • Compute nodes: blue
    • Storage nodes: green
    • Network nodes: clear/orange
  • No electronics, no batteries, no wiring in the blocks

Interaction#

  • Place a block on the table: NFC reader in that grid position detects the tag, table knows which node type is where
  • Remove a block: simulates a node crash or failure
  • LEDs between occupied positions animate to show data flow

Controller#

Primary: Raspberry Pi Pico W#

  • Built-in WiFi for serving the web UI
  • 26 usable GPIOs: enough for SPI bus + 16 CS pins + LED data line
  • Cheap (approximately $6)

Secondary (If Needed): Second Pico W#

  • Connected via UART or I2C
  • Provides additional GPIO pins if the grid exceeds approximately 16 NFC readers
  • Can handle LED driving to offload the primary

Web UI#

  • Served directly from the Pico W over WiFi
  • Shows topology view, time-step controller, distributed trace view
  • Bidirectional: physical changes update the UI, UI controls (play/pause/step) drive the physical LEDs

Bill of Materials#

ItemQtyUnit CostTotal
Raspberry Pi Pico W1 to 2$6$6 to $12
RC522 NFC modules12 to 16$2 to $3$24 to $48
NFC tag stickers (NTAG213)20 to 30$0.30$6 to $9
WS2812B NeoPixel strip (5 m)1$10 to $15$10 to $15
Wood board (for CNC)1$15 to $30$15 to $30
Frosted acrylic sheet1$10 to $20$10 to $20
3D printing filament (PLA)1 roll$20$20
Wire, connectors, miscvariesvaries$10 to $15
Totalapproximately $100 to $170

Open Questions#

  • Grid count. How many NFC positions? 12 is comfortable, 16 is feasible, more requires a second Pico or multiplexing.
  • Grid cell size. Depends on block size and NFC reader footprint. RC522 modules are approximately 40 mm x 60 mm, so grid cells likely need to be 8 to 10 cm squares.
  • Channel routing pattern. Straight grid lines between all adjacent cells, or a more selective topology? Affects how much LED strip is needed.
  • Outer board dimensions. With 5 cm edges on a 75 cm board, the inner area is 65 cm x 65 cm. Consider bumping to 80 cm x 80 cm for a clean 70 cm x 70 cm inner area.
  • Bottom panel. Open underside is easier for prototyping; enclosed looks more finished.
  • Block form factor. Cubes, cylinders, or other shapes. Must be large enough to handle comfortably but small enough for the grid.

Appendix A: Alternatives Considered#

Smart Blocks Architecture#

The original design placed a microcontroller in every block, with each block containing its own display showing live metrics (latency, RPS, error rate). Blocks communicated with a Raspberry Pi 4 orchestrator via I2C, UART, or ESP-NOW.

This was rejected because:

  • Each block requires its own power source (battery or physical connector)
  • Per-block PCB design, fabrication, and programming multiplies the workload
  • Debugging communication between many independent microcontrollers is complex
  • The number of blocks needed makes this approach impractical within Fab Academy timelines

View Archived Design Explorations

Machine Vision / Projection Approach#

Using a camera to detect block placement and a projector for visualization was considered. Rejected because it is fundamentally a software project with no meaningful fabrication element.