Algoscape

Interactive sorting and pathfinding visualizer built in plain HTML, CSS, and JavaScript—no dependencies, no build step, works offline.

Features

• Sorting lab with Bubble, Insertion, Merge, and Quick sort; adjustable array size and animation speed; random, nearly-sorted, and reversed presets.
• Pathfinding lab with BFS, Dijkstra, and A*; click-to-paint walls, move start/goal, random maze generator, and adjustable playback speed.
• Modern, responsive UI with clear visual cues for comparisons, swaps, visited nodes, and shortest paths.

Quick Start

cd /Users/mo/Downloads/algoscape
# Option 1: open the file directly
open index.html
# Option 2: serve locally (helpful for CORS-safe devtools)
python -m http.server 8000

Then visit http://localhost:8000 and interact with the controls.

Usage

• Sorting lab
  • Set array size and speed sliders, pick an algorithm, choose a preset (Shuffle, Nearly Sorted, Reverse), and hit Run.
  • Colored bars show comparisons (active) and swaps/placements (swap) in real time.
• Pathfinding lab
  • Pick a mode (Paint Walls, Set Start, Set Goal) and click cells to edit the grid.
  • Choose an algorithm, adjust the speed, optionally generate random walls, and press Run.
  • Blue cells = visited frontier; gold = reconstructed shortest path.

Algorithms

Area	Algorithms	Notes
Sorting	Bubble, Insertion, Merge, Quick	Animated in-place with async delays; stable vs unstable highlighted in UI copy
Pathfinding	BFS, Dijkstra, A* (Manhattan)	4-direction grid, uniform edge weights

Architecture

• index.html — semantic layout for hero, sorting lab, and pathfinding lab sections.
• style.css — gradient-driven theme, responsive grid/bars, state-driven classes for active/visited/path cells.
• main.js — all logic:
  • Sorting: array generator + per-algorithm async runners (bubbleSort, insertionSort, mergeSort, quickSort) updating DOM bars.
  • Pathfinding: grid state, interaction modes, algorithms (bfs, dijkstra, astar), and animation pipelines for visited + path reconstruction.

Design Choices

• Pure vanilla JS to keep the bundle tiny and transparent.
• Explicit speed/size sliders to encourage experimentation with algorithm complexity.
• Clear color language (active vs swap vs visited vs path) to separate algorithm phases.

Roadmap

• Add heap/selection sort and bidirectional BFS.
• Export/import grid layouts and arrays.
• Toggle diagonal movement and weighted terrain presets.

License

MIT — see LICENSE for details.