Initializing Parallel Sort Engines...
Master DSA Through Visual Execution.
Experience microsecond-level execution tracking. Our asynchronous engine yields to the DOM in real-time, allowing you to pause, inspect, and analyze 20+ algorithms—from standard Bubble Sort to advanced parallel Bitonic networks.
Parallel Execution
Yielding Execution Contexts.
Standard JavaScript execution blocks the main thread. We built a custom `SortContext` engine using asynchronous generators. Every `await ctx.compare()` and `await ctx.swap()` yields control back to the React rendering engine, preventing browser lockup even during $O(N^2)$ backward-forward passes in Cocktail Shaker sort.
Adjacency Mathematics
Heuristic Graph Engines.
Our `useGraphEngine` architecture manages massive grid states efficiently. Watch pathfinding algorithms like A* Search evaluate $f(n) = g(n) + h(n)$ heuristic costs in real-time. Understand how nodes are expanded and how intelligent search space pruning guarantees shortest-path optimality without exhaustive memory consumption.
Architecture Modules
7 DOMAINSComprehensive Domains.
A minimalist interface hiding a highly complex engine. Dive into precise implementations across 6 computational domains.
Search Architecture
Interact with our unified `SearchVisualizer` component. Toggle between iterative and recursive logic in Python, JS, Java, and C++ instantly while analyzing corresponding visual states.
Parallel Sorting
Beyond basic Quick/Merge sort, explore parallel array execution models.
Graph Engine Hooks
Powered by `useGraphEngine.ts` to manage complex graph adjacency matrices and priority queues.
Machine Learning
Iterative visualization of K-Means clustering centroid convergence and Voronoi tessellations.
Topological Data
Simulate Topological sorting via Kahn's algorithm.
Memory References
Visualize in-place pointer manipulation.
Sorting Engine
16+ Algorithms. Context-aware yielding. Real-time DOM repaints.
Micro-Architecture
Execution Lifecycle.
Deep dive into a single parallel comparison event inside Bitonic Sort.
1. Network Creation
For a Bitonic Sort, a parallel comparator network is generated based on the array length (must be power of 2). The step and distance (k) are initialized.
2. Comparator Check
The algorithm isolates indices i and i+k. It calls the asynchronous context comparator, passing control back to the visualizer engine.
3. Async State Yield
The React engine takes over. It parses the 'compare' event, updates the DOM to highlight indices i and i+k in red, and awaits user playback speed.
4. Swap & Flush
Control returns to the algorithm. If out of order based on `dir`, the context swap is called, physically transposing the array elements and re-rendering.
Performance Metrics
Complexity Matrix.
Real-world performance estimates for N=1,000 elements.
Engineering Architecture
Escaping the
Event Loop.
Building a real-time algorithm visualizer in React presents a profound technical challenge: algorithms are synchronous, CPU-blocking operations.
If you execute a standard `while(true)` loop in JavaScript to run an A* Search on a 10,000 node graph, the browser's main thread locks up. The DOM cannot paint, inputs freeze, and the visualizer becomes useless. SortStory solves this by entirely rewriting algorithms into asynchronous generator patterns.
The Async SortContext
- 0x1Yielding State: Every array access (`ctx.compare`) returns a Promise. This forces the algorithm to yield control to the React reconciler, allowing Framer Motion to animate the exact structural changes.
- 0x2Thread Unblocking: By awaiting these promises, even an $O(N^2)$ algorithm like Odd-Even sort can process thousands of swaps without dropping a single 60FPS animation frame.
"It's not just a UI change. The algorithms themselves have been fundamentally rewritten to be state-aware."
— SortStory Engineering
Full Catalog
Module Index.
Interactive visualizer modules across computer science domains.