Part VII · AlgoLens Whitepaper

Visualization Engine

Rendering algorithm dynamics without coupling to algorithms.

“The Visualization Engine does not draw arrays or graphs. It stages algorithmic ideas.”

Single-section article

Structure-first rendering

Most visualizers draw each algorithm directly: Bubble Sort animation, Merge Sort animation, QuickSort animation, Dijkstra animation. AlgoLens rejects that model. The renderer draws structures, states, cursors, highlights, labels, overlays, and transitions. It does not know whether the underlying algorithm is Bubble Sort, Heap Sort, or a custom user implementation.

The Visualization Engine introduces a Scene Graph between the Universal Trace and the graphics backend. The trace describes what happened; the scene graph describes what should exist on screen; the backend decides whether to draw it through SVG, Canvas, WebGL, WebGPU, static export, or a future renderer. This separation protects the platform from web-graphics changes.

Universal renderers cover arrays, matrices, trees, graphs, stacks, queues, heaps, memory, timelines, and complexity curves. A layout engine computes responsive placement, a camera system supports zoom and focus, overlays add invariants and explanations, and exporters reuse the same scene for SVG, PNG, GIF, video, Markdown, PDF, and HTML replay.

Universal Trace
  ↓
Scene Graph
  ↓
Renderer
  ↓
Animation
  ↓
Interaction
  ↓
Export

Animations are computed by interpolating State A to State B rather than hardcoding React state transitions.

Design tokens make themes such as dark, light, high contrast, color-blind, presentation, and print possible.

The same scene can feed interactive playback, thumbnails, exports, and presentation mode.

Performance relies on virtualization, incremental rendering, geometry caching, layout memoization, and fine-grained invalidation.

PreviousSemantic Execution Engine NextWeb Application Architecture