An interactive, browser-based pathfinding visualizer that demonstrates A* and Dijkstra algorithms with side-by-side Rust/WebAssembly vs JavaScript performance comparison.

• 🎯 Interactive Grid Editor: Click and drag to draw walls, place weighted terrain, and set start/goal positions
• ⚡ Dual Implementation: Compare Rust/WASM performance against pure JavaScript
• 🎬 Animated Visualization: Watch the algorithm explore the grid in real-time
• 📊 Performance Metrics: Detailed benchmarks including runtime, nodes explored, path cost, and more
• 🎨 Multiple Heuristics: Manhattan, Euclidean, Octile, and Weighted distance metrics
• 🎮 Multiple Presets: Maze, open field, random obstacles, weighted terrain, narrow corridor

• A* (A-Star): Optimal pathfinding with configurable heuristics
• Dijkstra: Uniform-cost search (A* with zero heuristic)
• Diagonal Movement: Optional 8-directional movement with proper costs
• Weighted Terrain: Support for cells with variable traversal costs

• Animation Controls: Play, pause, step-by-step, variable speed (0.25x to 4x)
• Real-time Rendering: Canvas-based grid with color-coded cell states
• Comparison Mode: Side-by-side Rust vs JavaScript metrics
• Export Options: Save results as JSON or PNG snapshot

• Rust - High-performance pathfinding implementation
• wasm-bindgen - Rust ↔ JavaScript interop
• serde/serde_json - Structured data serialization
• wasm-pack - WASM build tooling

• TypeScript - Type-safe application logic
• React 18 - UI framework
• Zustand - Lightweight state management
• Vite - Fast build tool and dev server
• Canvas 2D - High-performance grid rendering

• Node.js (v18 or later)
• Rust (latest stable) - Install from rustup.rs
• wasm-pack - Install via cargo install wasm-pack

# Clone the repository
git clone <repository-url>
cd rust_pathfinder

# Install JavaScript dependencies
npm install

# Build Rust/WASM module
npm run build:wasm

# Start development server
npm run dev

The app will be available at http://localhost:3000

# Build both WASM and frontend
npm run build:all

# Preview production build
npm run preview

1. Select a Tool (left sidebar):

   • 🧱 Wall - Block pathfinding
   • ⚖️ Weight - Add traversal cost (2.5x)
   • 🧽 Erase - Clear cells
   • 🟢 Start - Set starting position
   • 🔴 Goal - Set goal position

2. Choose Algorithm Settings (right sidebar):

   • Algorithm: A* or Dijkstra
   • Heuristic: Manhattan, Euclidean, Octile, Weighted
   • Weight Factor: Adjust heuristic influence (0.1 - 5.0)
   • Diagonal Movement: Enable/disable 8-directional movement

3. Apply a Preset (optional):

   • Open Field - Clear grid
   • Maze - Recursive division maze
   • Obstacles - Random walls
   • Weighted Terrain - Variable cost regions
   • Narrow Corridor - Winding passage

4. Run & Visualize:

   • Click "Run" to execute pathfinding
   • Watch the animation or adjust speed
   • Use "Step" for frame-by-frame analysis
   • "Reset" to clear results

5. Analyze Performance:

   • View detailed metrics (runtime, expansions, path cost)
   • Compare Rust/WASM vs JavaScript
   • See speedup multiplier

6. Export Results:

   • 📄 Export JSON - Save grid, config, and results
   • 🖼️ Export PNG - Capture grid visualization

• Runtime (ms): Total execution time from start to completion
• Path Length: Number of cells in the final path
• Path Cost: Sum of traversal costs (considers weights and diagonal movement)
• Nodes Explored: Total cells visited during search
• Expansions: Number of times a node was popped from the open set
• Peak Open Set Size: Maximum size of the priority queue

• Optimal: Guaranteed shortest path with admissible heuristic
• Informed: Uses heuristic to guide search toward goal
• Formula: f(n) = g(n) + h(n) where:
  • g(n) = actual cost from start to node n
  • h(n) = estimated cost from n to goal
  • f(n) = total estimated cost

• Optimal: Always finds shortest path
• Uninformed: Explores uniformly in all directions
• Special Case: A* with h(n) = 0

• Manhattan: |dx| + |dy| - Best for 4-directional grids
• Euclidean: √(dx² + dy²) - Straight-line distance
• Octile: Optimized for 8-directional movement
• Weighted: Manhattan × 1.5 - Faster but less optimal

• ⬜ White - Free/unvisited cell
• 🟦 Dark Blue - Wall (impassable)
• 🟧 Orange - Weighted terrain (higher cost)
• 🟦 Light Blue - Visited during search
• 🟪 Purple - Final path
• 🟢 Green - Start position
• 🔴 Red - Goal position

• Ensure wasm-pack is installed: cargo install wasm-pack
• Rebuild WASM: npm run build:wasm
• Check browser console for specific errors
• App will fall back to JavaScript-only mode

• Use a modern browser (Chrome, Firefox, Edge, Safari 14+)
• Enable hardware acceleration
• Reduce grid size for smoother animation
• Try "Timed run" without animation for pure benchmark

• Ensure browser supports Canvas 2D
• Check for browser extensions blocking canvas
• Try different zoom levels

• A* Pathfinding Algorithm
• Dijkstra's Algorithm
• WebAssembly
• Rust and WebAssembly