{"id":29958097,"url":"https://github.com/anshikarawat14/findmypath-pathvisualizer","last_synced_at":"2026-04-18T04:01:57.375Z","repository":{"id":306813554,"uuid":"1027295620","full_name":"Anshikarawat14/FindMyPath-PathVisualizer","owner":"Anshikarawat14","description":"Visualize maze-solving algorithms in style! Instantly see how BFS, DFS, A*, and Greedy Search find paths—customize mazes, drag walls, and enjoy smooth, modern UI animations.","archived":false,"fork":false,"pushed_at":"2025-07-27T18:55:42.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T22:45:44.412Z","etag":null,"topics":["bfs-algorithm","css3","dfs-algorithm","html5","js","path-planning","pathfinding","pj5s"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Anshikarawat14.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-27T18:13:13.000Z","updated_at":"2025-07-27T19:37:27.000Z","dependencies_parsed_at":"2025-07-27T20:34:51.100Z","dependency_job_id":"540fb895-fb09-4f6b-92f0-a965905f7ae9","html_url":"https://github.com/Anshikarawat14/FindMyPath-PathVisualizer","commit_stats":null,"previous_names":["anshikarawat14/graphsearch-visualizer","anshikarawat14/findmypath"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Anshikarawat14/FindMyPath-PathVisualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshikarawat14%2FFindMyPath-PathVisualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshikarawat14%2FFindMyPath-PathVisualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshikarawat14%2FFindMyPath-PathVisualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshikarawat14%2FFindMyPath-PathVisualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Anshikarawat14","download_url":"https://codeload.github.com/Anshikarawat14/FindMyPath-PathVisualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshikarawat14%2FFindMyPath-PathVisualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31955919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bfs-algorithm","css3","dfs-algorithm","html5","js","path-planning","pathfinding","pj5s"],"created_at":"2025-08-03T20:08:56.120Z","updated_at":"2026-04-18T04:01:57.368Z","avatar_url":"https://github.com/Anshikarawat14.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pathfinding Visualization\n\nAn interactive web-based visualization tool for exploring different pathfinding algorithms. Built with HTML5 Canvas, JavaScript, and the p5.js library, this project allows users to visualize how various search algorithms find paths from a start point to an end point on a customizable grid.\n\n## 🎯 Features\n\n- **Interactive Grid**: Click and drag to create walls, obstacles, and barriers\n- **Multiple Algorithms**: Visualize 4 different pathfinding algorithms:\n  - **Breadth First Search (BFS)**: Guarantees shortest path, explores all nodes at current depth\n  - **Depth First Search (DFS)**: Explores as far as possible along each branch before backtracking\n  - **A* Search**: Most efficient informed search algorithm using heuristics\n  - **Greedy Best First Search**: Uses heuristic function to choose best path at each step\n- **Real-time Statistics**: Track explored grids, time elapsed, and final path length\n- **Maze Generation**: Generate random mazes using a recursive backtracking algorithm\n- **Customizable Start/End Points**: Click to move start (blue) and end (red) points\n- **Wall Management**: Toggle between placing and removing walls\n- **Responsive Design**: Works on desktop and shows mobile-friendly message\n\n## 🚀 Getting Started\n\n### Prerequisites\n- A modern web browser (Chrome, Firefox, Safari, Edge)\n- No additional software installation required\n\n### Running the Project\n1. Clone or download this repository\n2. Open `index.html` in your web browser\n3. The visualization will load automatically\n\n## Demo Screenshots\n### 1.\n\u003cimg width=\"1919\" height=\"889\" alt=\"image\" src=\"https://github.com/user-attachments/assets/633b8605-7587-45e4-a864-f57e2743d2ff\" /\u003e\n\n\n### 2.\n\u003cimg width=\"1919\" height=\"888\" alt=\"image\" src=\"https://github.com/user-attachments/assets/b3e452e3-74a5-49b4-918c-0fd918b8147a\" /\u003e\n\n\n## 🎮 How to Use\n\n### Basic Controls\n- **Drag Mouse**: Create walls by dragging across the grid\n- **Click Start/End Points**: Click on blue (start) or red (end) squares to select them, then click elsewhere to move them\n- **Visualize Button**: Start the selected algorithm\n- **Reset Button**: Clear the grid and reset to default state\n\n### Advanced Features\n- **Algorithm Selection**: Choose from the dropdown menu to switch between algorithms\n- **Remove Walls**: Toggle the \"Remove walls\" button to delete walls instead of creating them\n- **Generate Maze**: Create a random maze using the \"Generate random maze\" button\n- **Wall Animation**: Toggle wall animation during maze generation\n\n\n## 🔧 Technical Details\n\n### Project Structure\n```\nPath-finding/\n├── index.html          # Main HTML file\n├── sketch.js           # Main p5.js sketch and UI logic\n├── Board.js            # Grid board management and maze generation\n├── AI.js               # Pathfinding algorithms implementation\n├── Frontier.js         # Queue and Stack data structures\n├── grid.js             # Individual grid cell class\n├── style.css           # Styling and responsive design\n└── assets/\n    └── favicon.ico     # Website icon\n```\n\n### Key Components\n\n#### Board Class (`Board.js`)\n- Manages the grid structure and cell states\n- Handles maze generation using recursive backtracking\n- Provides neighbor finding and path reconstruction\n\n#### AI Class (`AI.js`)\n- Implements all four pathfinding algorithms\n- Manages algorithm state and visualization timing\n- Handles heuristic calculations for informed search algorithms\n\n#### Frontier Classes (`Frontier.js`)\n- `QueueFrontier`: FIFO structure for BFS\n- `StackFrontier`: LIFO structure for DFS\n\n#### Grid Class (`grid.js`)\n- Represents individual cells with properties for walls, path, exploration state\n- Handles visual rendering of different cell types\n\n### Algorithms Explained\n\n#### Breadth First Search (BFS)\n- **Type**: Uninformed search\n- **Guarantee**: Shortest path\n- **Strategy**: Explores all nodes at current depth before moving to next level\n- **Use Case**: When shortest path is required\n\n#### Depth First Search (DFS)\n- **Type**: Uninformed search\n- **Guarantee**: Does not guarantee shortest path\n- **Strategy**: Explores as far as possible along each branch before backtracking\n- **Use Case**: When any path is acceptable\n\n#### A* Search\n- **Type**: Informed search\n- **Guarantee**: Shortest path\n- **Strategy**: Uses f(n) = g(n) + h(n) where g(n) is cost from start and h(n) is heuristic to goal\n- **Use Case**: Most efficient for finding optimal paths\n\n#### Greedy Best First Search\n- **Type**: Informed search\n- **Guarantee**: Does not guarantee shortest path\n- **Strategy**: Always chooses the path that appears best at the moment using heuristic\n- **Use Case**: When speed is prioritized over optimality\n\n## 🎨 Customization\n\n### Grid Size\nThe grid size is automatically calculated based on window dimensions:\n- Default: 30 rows × 75 columns\n- Responsive to window size changes\n\n### Algorithm Selection\nThe selected algorithm is saved in localStorage and persists between sessions.\n\n### Start/End Positions\nStart and end positions are saved in localStorage and restored on page reload.\n\n## 📱 Browser Compatibility\n\n- **Desktop**: Full functionality on all modern browsers\n- **Mobile**: Shows responsive message recommending desktop use\n- **Minimum Resolution**: 800px width for optimal experience\n\n## 🛠️ Technologies Used\n\n- **HTML5**: Structure and semantic markup\n- **CSS3**: Styling and responsive design\n- **JavaScript (ES6+)**: Core logic and interactivity\n- **p5.js**: Graphics and animation library\n- **Local Storage**: Persistence of user preferences\n\n## 🤝 Contributing\n\nFeel free to contribute to this project by:\n- Adding new pathfinding algorithms\n- Improving the UI/UX\n- Adding new features like different maze generation algorithms\n- Optimizing performance\n- Fixing bugs\n\n\n\n## 👨‍💻 Author\n\n**Anshika Rawat :)** \n\n---\n\n*Enjoy exploring the fascinating world of pathfinding algorithms!*\n\nDon't forget to \u003cspan style=\"color:#ff4d6d\"\u003e\u003cb\u003eSTAR\u003c/b\u003e\u003c/span\u003e ⭐ if it helped!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshikarawat14%2Ffindmypath-pathvisualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanshikarawat14%2Ffindmypath-pathvisualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshikarawat14%2Ffindmypath-pathvisualizer/lists"}