Interactive Algorithm Visualizer
An educational visualization engine demonstrating sorting algorithms, graph pathfinding (A*, Dijkstra), and tree balancing with controllable stepping, execution rewind, and spatial complexity analytics.
01 / The Problem & Context
UI Freezing and Inefficient Rendering During Large Graph Traversals
Visualizing algorithms on thousands of nodes frequently blocks the main browser thread, resulting in skipped animation frames, unresponsive controls, and poor comprehension for learners.
02 / Architectural Approach
To address these requirements, the system was decomposed into modular boundaries that prioritize memory efficiency, predictable throughput, and low operational latency:
Web Worker Computation Offload
Decoupled algorithm execution from the UI by running graph and sorting computations in dedicated Web Workers, serializing state snapshots to the main thread.
Hardware-Accelerated Canvas Rendering
Replaced DOM-heavy SVG trees with custom requestAnimationFrame Canvas rendering, maintaining steady 60 FPS across 10,000+ simultaneous node evaluations.
Step-by-Step State Scrubbing
Engineered a time-travel debugger allowing users to pause, step backward, and inspect variable changes at each algorithm decision point.
03 / Key Technical Trade-Offs
Canvas 2D vs SVG DOM Elements
Rendering 10,000 DOM nodes creates layout thrashing. Direct Canvas buffer blitting keeps memory low and framerates at a constant 60 FPS.
Worker Thread Pipeline
Heavy pathfinding (e.g. A* on complex mazes) runs in parallel without starving UI interaction or playback scrub buttons.
04 / Measurable Results & Learnings
↳ sustained at 10,000+ active nodes using Canvas 2D buffer blitting vs. ~8 FPS with SVG DOM trees
↳ A* heuristic & balancing computations 100% offloaded to dedicated Web Workers
↳ smooth interactive graph navigation and rewind stepping without browser layout thrashing