Algorithm Playground

A Working Visualizer

Crafting interview-ready intuition with React, Tailwind CSS, Three.js, and a buttery smooth canvas animation loop. Adjust sliders, swap algorithms, and watch color-coded operations update the pseudocode in sync.

Sorting Lab

3D Array Playground

Full control over array size, playback speed, and algorithm selection. Three.js renders every bar as a lit mesh while pseudocode tracks each comparison or swap.

Pathfinding Lab

Interactive Grid Explorer

Paint walls, reposition the start/end points, and watch BFS, DFS, Dijkstra, or A* animate their search over a canvas-based grid with color-coded states.

Tree & Graph Lab

Structure Visuals

Binary tree traversals, AVL/Red-Black rotations, and graph BFS/DFS all run from one control panel with animated pseudocode and color-coded nodes.

Sorting Playground

3D Sorting Visualizer

Built with React, Tailwind CSS, and Three.js. Includes speed + array sliders, algorithm dropdown, color-coded operations, and animated pseudocode.

Interactive Panel

Algorithm Playground

Tune the array size, playback speed, and algorithm. The canvas uses Three.js to render 3D bars while the pseudocode panel highlights each instruction in real-time.

Step 0 / 0Press play to start animating
Compare
Swap
Pivot
Overwrite
Sorted

Animated Pseudocode

Bubble Sort

  • 1.for i from 0 to n - 1
  • 2. for j from 0 to n - i - 2
  • 3. compare a[j] and a[j+1]
  • 4. if a[j] > a[j+1] swap them
  • 5.array sorted

Pathfinding Playground

Canvas Grid Visualizer

BFS, DFS, Dijkstra, and A* run on the same grid with start/end handles, random walls, playback controls, and animated pseudocode.

Pathfinding Panel

Grid Navigator

Click to drop walls, reposition the start/end nodes, and compare BFS, DFS, Dijkstra, and A* as they animate through the same maze. Every expansion step lights up the grid and pseudocode together.

Step 0 / 0Draw walls or shuffle obstacles, then press Play.
Start
Goal
Frontier
Visited
Path
Walls

Tip: Draw walls (default), then switch to Set Start / Set Goal to reposition nodes. Re-run to compare algorithms.

Pseudocode Sync

Breadth-First Search

  • 1.enqueue start cell
  • 2.while queue not empty
  • 3. current = queue.pop_front()
  • 4. enqueue unseen neighbors
  • 5.repeat until goal found
  • 6.reconstruct path
  • 7.else no path

Tree & Graph Playground

Structure & Traversal Visualizer

Switch between binary tree traversals, AVL/Red-Black rotations, and graph BFS/DFS animations. Each mode syncs with pseudocode so the theory sticks.

Tree & Graph Lab

Structure Playground

Animate traversal orders, watch AVL-style rotations rebalance subtrees, or compare BFS vs DFS on the same graph. Every step highlights the matching pseudocode line to reinforce the theory.

Playback
Step 0 / 0Select a mode to begin.
1725293142586580
Active node
Tree

Pseudocode Sync

Preorder (root-left-right)

  • 1.preorder(node)
  • 2.if node is null return
  • 3.visit(node)
  • 4.preorder(node.left)
  • 5.preorder(node.right)