Spanning Tree Protocol: Loop Prevention (2D)

Root Bridge

Topology

Redundant links 3

Animate BPDU convergence pulses

Network State

Root bridge

Diameter (cost)

Forwarding links

Blocked links

Layout kinetic energy

–

Root port (forwarding) Designated port (forwarding) Blocking port (loop broken)

How it works

This is an independent 2D companion to the 3D STP simulator: instead of a fixed sphere layout viewed with an orbiting camera, switch positions here come from a live force-directed graph layout (a Fruchterman-Reingold-style spring-electrical model) that runs every frame — every switch repels every other switch like like charges, every cable pulls its two switches toward a natural rest length like a spring, and a light centering force keeps the whole graph on-screen. The same real IEEE 802.1D Spanning Tree Protocol then runs on top of whatever topology you build:

Per-frame 2D layout physics (each switch i):
  F_repel = Σ_j  k_rep / |pᵢ−pⱼ|² , direction away from j
  F_spring(edge) = k_spring · (|pᵢ−pⱼ| − rest) , pulling toward rest length
  F_gravity = −k_g · pᵢ                          (keeps graph centered)
  v ← (v + F·dt) · damping        p ← p + v·dt

STP root path cost (unchanged science, IEEE port costs by link speed):
10 Mbps→100  100 Mbps→19  1 Gbps→4  10 Gbps→2
Root Path Cost(switch) = min over neighbors N of
   [ Root Path Cost(N) + cost(link to N) ]

Each switch then still gets a real port role: Root Port (its cheapest path back to the root), Designated Port (the lowest-cost switch on each segment), or Blocking Port (every other port on a segment — it drops data traffic to break the physical loop). Drag any switch to reshape the layout live — the spring-electrical forces immediately pull the graph back toward equilibrium — pick a different root bridge or add redundant links to watch the spanning tree, and which links get blocked, recompute in real time.

Click a switch to make it root · drag a switch to reshape the layout