An interactive, high-performance pathfinding visualizer built with native C++ graph search algorithms compiled to WebAssembly (WASM) and rendered through a modern React + Tailwind CSS dashboard.
This project combines the computational efficiency of low-level C++ algorithm design with the reactive flexibility of modern web development.
- ⚡ Native Speed Execution: Core graph traversal and priority queue evaluations are executed natively in WebAssembly compiled via Emscripten.
- 🧮 Custom Pathfinding Algorithms:
- Dijkstra's Algorithm: Guarantees the shortest path using distance-weighted exploration.
- A Search Algorithm:* Optimized informed heuristic search using Euclidean distance calculations.
- 🎨 Modern UI Dashboard: Built with React, Vite, and Tailwind CSS featuring dynamic grid wall toggling, step delay configuration, and real-time state visualization.
- 🔄 Memory Bridge Architecture: Emscripten
embindintegration transferring flattened integer arrays between JavaScript and C++ linear memory for minimal heap overhead.
┌──────────────────────────────────────────────────────────────────┐
│ React UI Layer │
│ • Grid Interaction & Obstacle Placement (React State) │
│ • Animation Timer Loop & Node Color Rendering (Tailwind) │
└─────────────────────────────────┬────────────────────────────────┘
│ Flat 1D Matrix Pass
▼
┌──────────────────────────────────────────────────────────────────┐
│ WebAssembly Glue (Emscripten) │
│ • Memory Allocation & emscripten::val Array Marshalling │
└─────────────────────────────────┬────────────────────────────────┘
│ Native Call
▼
┌──────────────────────────────────────────────────────────────────┐
│ C++ Engine Core │
│ • STL Priority Queue (std::priority_queue) │
│ • Distance Vector Tracking & Path Reconstruction │
└──────────────────────────────────────────────────────────────────┘