🎮 RETRO PATHFINDER

An immersive pathfinding visualizer with retro arcade aesthetics

🎮 Live Demo • 📖 Features • 🚀 Quick Start

🎯 Overview

RETRO PATHFINDER is an interactive pathfinding algorithm visualizer that brings the excitement of classic arcade games to algorithm education. Experience 7 different pathfinding algorithms compete in real-time battles, generate complex maze patterns, and enjoy immersive sound design - all wrapped in a nostalgic 80s arcade aesthetic.

✨ Features

🎮 Dual Mode Experience

Single Algorithm Mode: Choose and visualize individual algorithms with detailed performance statistics
Battle Mode: Watch multiple algorithms compete simultaneously with winner detection

🤖 7 Pathfinding Algorithms

Algorithm	Color	Personality	Best For
BFS 🔵	Cyan	Steady Explorer	Shortest path in unweighted graphs
A* ⭐	Gold	Smart Pathfinder	Optimal paths with heuristics
Dijkstra 🟣	Purple	Thorough Searcher	Weighted graphs
DFS 🔴	Crimson	Deep Diver	Maze exploration
Greedy 🟢	Lime	Speed Runner	Fast but suboptimal
Bidirectional 🟣	Magenta	Pincer Attack	Large grids
Jump Point 💠	Electric Cyan	Teleporter	Sparse grids

🏗️ 10 Maze Generators

Random Chaos: Pure randomness with protected start/end zones
Recursive Maze: Classic DFS-generated maze
Spiral Pattern: Hypnotic spiral formations
Vertical Bars: Horizontal movement challenges
Horizontal Bars: Vertical movement challenges
Checkerboard Grid: Alternating pattern maze
Diagonal Stripes: Diagonal movement corridors
Room Network: Connected room structures
Classic Maze: Traditional maze design
Organic Cavern: Natural cave-like formations

🎵 Immersive Audio Experience

Tone.js Integration: Professional audio synthesis
Algorithm Signatures: Unique sound profiles for each algorithm
Battle Soundtrack: Dynamic audio during competitions
Combo System: Audio feedback for wall-breaking combos
Maze Generation: Procedural audio during maze creation

🎨 Retro Arcade Aesthetics

CRT Scanlines: Authentic monitor effects
Neon Glow Effects: Vibrant color schemes
Particle Systems: Visual feedback for interactions
Combo Easter Egg: Rainbow mode at 20+ combo
Responsive Design: Works on desktop and mobile

📊 Performance Analytics

Path Length: Exact number of nodes in solution
Nodes Visited: Total exploration count
Execution Time: Precise millisecond timing
Battle Results: Winner detection and statistics

🚀 Quick Start

Prerequisites

Node.js 16.x or higher
npm or yarn

Installation

# Clone the repository
git clone https://github.com/Ishant9504/retro-pathfinder.git
cd retro-pathfinder

# Install dependencies
npm install

# Start development server
npm start

Visit http://localhost:3000 to experience the visualizer!

Build for Production

# Create optimized production build
npm run build

# Serve the build locally
npx serve -s build

🎮 How to Use

Basic Controls

Set Start/End Points: Click mode buttons, then click grid to place
Create Walls: Select wall mode and click/drag on grid
Generate Mazes: Choose pattern from dropdown and click "GENERATE MAZE"
Run Algorithms: Select algorithm and click "EXECUTE"

Battle Mode

Toggle "Battle Mode" switch
Select multiple algorithms using checkboxes
Click "EXECUTE" to watch them compete
View results in the championship-style modal

Tips & Tricks

Combo System: Break walls quickly to build combos (20+ = rainbow mode!)
Audio: Click anywhere first to enable sound
Performance: Larger grids show algorithm differences more clearly
Maze Balance: All mazes are guaranteed solvable

🏗️ Architecture

Tech Stack

Frontend: React 19.2.0 with Hooks
Audio: Tone.js 15.1.22 for synthesis
Styling: CSS Grid + Custom Properties
Build: Create React App

Project Structure

retro-pathfinder/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── algorithms.js          # 7 pathfinding implementations
│   ├── App.js                 # Main component & state management
│   ├── App.css                # Retro arcade styling
│   ├── mazeGenerator.js       # 10 maze pattern generators
│   ├── SoundEngine.js         # Tone.js audio management
│   ├── index.js              # React entry point
│   └── setupTests.js
├── build/                    # Production build output
└── package.json

Key Components

`algorithms.js`

Implements 7 pathfinding algorithms with consistent interfaces:

export function algorithmName(grid, startNode, endNode) {
  // Returns: { visitedNodes: [...], path: [...] }
}

`SoundEngine.js`

Manages all audio with Tone.js:

Algorithm-specific pitch signatures
Battle mode synchronization
Combo sound effects
Maze generation audio

`mazeGenerator.js`

10 different maze generation algorithms ensuring:

Guaranteed solvability
Protected start/end zones
Balanced difficulty
Visual variety

🎨 Customization

Adding New Algorithms

Implement in algorithms.js following the interface
Add to algorithm registry in App.js
Create CSS classes for visited/path states
Add sound signature in SoundEngine.js
Update UI selectors

Custom Maze Patterns

Add generator function in mazeGenerator.js
Export from module
Add to dropdown in App.js
Ensure consistent return format

Styling Themes

Modify CSS custom properties in App.css:

:root {
  --clr-primary: #00FFF2;    /* Cyan accent */
  --clr-accent: #FFD60A;     /* Gold highlights */
  --clr-bg: #0A0A0A;         /* Dark background */
}

📈 Performance

Algorithm Complexity

Algorithm	Time	Space	Optimality
`BFS`	`O(V + E)`	`O(V)`	Optimal
`A*`	`O(b^d)`	`O(V)`	Optimal
`Dijkstra`	`O((V + E) log V)`	`O(V)`	Optimal
`DFS`	`O(V + E)`	`O(V)`	Not optimal
`Greedy`	`O(b^d)`	`O(V)`	Not optimal
`Bidirectional`	`O(b^{d/2})`	`O(V)`	Optimal
`Jump Point`	`O(b^d)`	`O(V)`	Optimal

System Requirements

Browser: Modern browsers with ES6+ support
Audio: Web Audio API support (all modern browsers)
Performance: Smooth 60fps on grids up to 50x50
Memory: ~50MB for large grids with all algorithms

🤝 Contributing

We welcome contributions! Here's how to get involved:

Development Setup

# Fork and clone
git clone https://github.com/your-username/retro-pathfinder.git
cd retro-pathfinder

# Install dependencies
npm install

# Start development
npm start

# Run tests
npm test

Contribution Guidelines

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

Areas for Contribution

🙏 Acknowledgments

React Team for the amazing framework
Tone.js for professional audio synthesis
Create React App for the solid foundation
Pathfinding Algorithm Research community

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions

Made with ❤️ and lots of neon glow

⭐ Star this repo if you find it helpful!

⬆️ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Ishant9504/RETRO-PATHFINDER

Folders and files

Latest commit

History

Repository files navigation