Learn algorithms by watching them

AlgoViz

An interactive 3D playground for sorting, searching, graph and tree algorithms. Step through every comparison, swap and visit — or let them play — rendered live with WebGL.

Browse Families
28algorithms4families3DWebGL scenes

The Studio

Sorting Algorithms

Watch comparison and distribution sorts order a field of glowing 3D bars, step by step.

comparisons 0swaps 0writes 0
idle
Unsorted
Comparing
Swapping
Writing
Pivot
Minimum
Key
Sorted

The catalog

Four families, one engine

The rendering engine, playback controller and UI are category-agnostic. Each family plugs in through the same contract — and they are all live today.

Sorting

13 live

Watch comparison and distribution sorts order a field of glowing 3D bars, step by step.

Bubble SortInsertion SortSelection SortShell SortComb SortCocktail ShakerMerge SortQuick SortHeap SortRadix Sort (LSD)Gnome SortOdd-Even SortPancake Sort

Searching

6 live

Hunt for a target value across a sorted field, with live search windows and probes.

Linear SearchBinary SearchJump SearchExponential SearchInterpolation SearchTernary Search

Graphs

4 live

Traverse and find shortest paths over a 3D node-link network as frontiers expand.

Breadth-First SearchDepth-First SearchDijkstra'sA* Search

Trees

5 live

Build, search and traverse a binary search tree laid out in space.

BST InsertionBST SearchIn-order TraversalPre-order TraversalPost-order Traversal

How it works

A studio built for understanding

Step through every operation

Play, pause, scrub, or single-step forward and back. Backward seeking replays a deterministic timeline from the start, so what you see is always exactly correct.

Real 3D, not charts

Every family renders as living WebGL geometry with bloom-lit highlights — orbit the camera, watch frontiers expand and pivots glow. Built on raw Three.js, wrapped in clean OOP.

Read the complexity

Each algorithm ships its best/average/worst time and space bounds, stability, and a plain-language explanation — alongside live counters for comparisons, swaps and visits.

Tune the input

Resize the dataset, grow the graph, regenerate a fresh tree, and change playback speed on the fly. Keyboard shortcuts (space, ← →) keep you in flow.

One engine, every family

Sorting, searching, graphs and trees all run on a single category-agnostic engine. The architecture is the lesson: steps are the only contract between logic and rendering.

Built to extend

Adding an algorithm is a new class and one line; adding a whole family is a model, a visualizer and a factory case. Open, modular, and ready for the community.