Synapse

• 

  Synapse cover photo

Inspiration

What is the stupidest problem a smart city can have? Traffic.

While massive metropolises boast advanced, AI-driven traffic management, smaller and older cities, like Rolla, are left stuck at red lights. Their infrastructure is aging, and upgrading it usually means pouring millions of dollars into new concrete. We realized that cities don't always need new roads; they need better software. We wanted to build a system that could tap into existing stoplight infrastructure and instantly reduce congestion, lower emissions, and get people home faster.

What it does

Synapse is a traffic node management and optimization platform designed to overhaul a city's existing traffic grid and make it genuinely smart.

It is split into two core components:

1. GraphOS (The UI): A web-based interactive canvas where city planners can overlay directed graphs directly onto real-world maps (like OpenStreetMap data of Rolla). This translates physical roads and intersections into a precise mathematical model, instantly generating an adjacency matrix and interconnecting many nodes into a centralized UI.
2. The Synapse Engine: A powerful optimization engine that calculates the absolute, mathematically optimal traffic flow using a Model Predictive Control (MPC) system. It calculates the relative density of cars on any given road segment and dynamically adjusts stoplights to keep traffic flowing perfectly.

How we built it

We built the project using a modern web stack coupled with advanced control theory mathematics.

Frontend: Built with React 18, Vite, and Tailwind CSS. We used React-Konva to build an infinite-panning, interactive canvas that allows users to draw nodes and directed edges. State management was handled smoothly via Zustand. Backend & Data: A Node.js/Express backend handles our REST API (/api/solve-traffic), which manages the state of the graph and processes the simulation steps. The Solver: We utilized GRAMPC (a gradient-based MPC framework) to crunch the complex optimization math in real-time.

The Mathematics Behind Synapse

Instead of relying on simple, static timers, Synapse calculates the relative density of cars on any given road segment. We define the dynamic state vector as:

$$ \rho_e(t) = \frac{\text{cars on edge } e}{\text{max cars edge } e \text{ can hold}} $$

Where the number of cars is continuously updated via simulated sensor data ($\Sigma(\text{inflow}) - \Sigma(\text{outflow})$), and the physical maximum capacity of an edge is a static constraint calculated by:

$$ \text{max cars} = \frac{l_e \cdot A_e}{\bar{L}} $$ (Where $l_e$ is edge length, $A_e$ is lane count, and $\bar{L}$ is average car length).

Challenges we ran into

Our biggest challenge was bridging the gap between theoretical mathematics and real-world physical engineering.

GRAMPC calculates the mathematically optimal traffic flow for the network. However, the math outputs a continuous variable ($u_e \in [0,1]$—essentially telling a stoplight to be "70% green"). But real-world stoplights are discrete/binary—they are just red or green.

We had to design a smart translation layer. We map the continuous policy to discrete stoplight actuations using a thresholding decision:

$$ s_{\text{node}} = \begin{cases} 1 & \text{if } u_e \text{ exceeds threshold (e.g., 0.5)} \ 0 & \text{otherwise} \end{cases} $$

If we just applied this instantly, the lights would rapidly flicker back and forth to maintain the optimal fraction. To solve this, we implemented strict real-world physical constraints. Synapse samples the MPC's optimal policy at a fine time step but holds the actuator state until minimum green times and yellow-light clearance times have passed. You get the optimal network policy without unrealistic, rapid-fire light switching.

Accomplishments that we're proud of

• Successfully translating a highly complex Model Predictive Control algorithm into a format that works for discrete, real-world city infrastructure.
• Building GraphOS: The React-Konva canvas is incredibly smooth. Overlaying an interactive directed graph on top of an OpenStreetMap tile engine and having it dynamically generate an adjacency matrix felt like magic.
• Creating compelling Manim animations to visually explain our system

What we learned

• Advanced Control Theory: We learned how Model Predictive Control works and how to frame traffic flow as an optimization problem minimizing network density.
• Canvas Rendering: We learned how to manage complex spatial states, panning, zooming, and directed edge connections using React-Konva.
• System Architecture: We learned how to decouple an interactive frontend from a heavy, math-intensive backend solver.

What's next for Synapse

The next step is to move from simulated traffic flow to real-world data ingestion. We want to integrate Synapse with computer-vision traffic cameras (using YOLO or OpenCV) to feed live inflow/outflow data directly into our density formulas. Furthermore, we could use the mesh network created by the installed synapse nodes for other distributed sensing problems.

Built With

• javascript
• python
• react
• typescript
• vite