🚀 ALGOTRAIL : YOUR ALGORITHMS VISUALIZER

Welcome to AlgoTrail! A visual playground where you can see algorithms in action. Watch how different pathfinding algorithms work step by step, and get help from our friendly AI assistant whenever you have questions. Perfect for students learning computer science or developers who want to understand algorithms better.

📊 Project Statistics

• Total Files: 1,068
• Source Files (JS/HTML/CSS): 363
• Core Algorithm Implementations: 10+
• Maze Generation Algorithms: 4
• Visualization Speed: 0.5ms to 1000ms (adjustable)
• Grid Size: Configurable from 10x10 to 100x100 nodes
• Dependencies: 15+ npm packages
• Test Coverage: 85%+ (core algorithms)

🎯 Key Features

🧭 Pathfinding Visualization

• 10+ Algorithms: Including A*, Dijkstra's, BFS, DFS, and custom algorithms like Swarm
• Interactive Grid: 20x50 nodes by default (configurable)
• Node Types:
  • Start Node (Green)
  • Target Node (Red)
  • Wall Nodes (Black)
  • Weighted Nodes (Brown)
  • Visited Nodes (Light Blue)
  • Shortest Path (Yellow)

🎮 Interactive Elements

• Drag-and-drop interface for all nodes
• Real-time visualization
• Adjustable animation speed (0.5ms to 1000ms)
• Mobile-responsive design
• Keyboard shortcuts for power users

🏗️ Maze Generation

• 4 Generation Algorithms:
  • Recursive Division
  • Random Maze
  • Weight Maze
  • Stair Pattern
• Custom wall placement
• Weighted node placement

🤖 AI-Powered Chatbot

• Gemini AI Integration: Powered by Google's latest AI model
• DSA Expert: In-depth explanations of algorithms and data structures
• Code Examples: In multiple programming languages
• Learning Assistant: Step-by-step problem-solving guidance
• AlgoTrail-Specific Help: Detailed guidance on using the visualization tool

📊 Performance Metrics

• Real-time step counter
• Path length display
• Execution time measurement
• Node visit count
• Memory usage estimation

🧠 Algorithms

This application supports the following algorithms:

Algorithm	Type	Guarantees Shortest Path
Dijkstra's	Weighted	✅ Yes
A Search*	Weighted	✅ Yes
Greedy Best-first	Weighted	❌ No
Swarm	Weighted	❌ No
Convergent Swarm	Weighted	❌ No
Bidirectional Swarm	Weighted	❌ No
Breadth-first	Unweighted	✅ Yes
Depth-first	Unweighted	❌ No

🏗️ Maze Generation

I've implemented a Recursive Division algorithm for maze generation, along with several other patterns:

• Recursive Division (with vertical/horizontal skew options)
• Basic Random Maze
• Basic Weight Maze
• Simple Stair Pattern

🧩 More about the Swarm Algorithm

The Swarm Algorithm is essentially a mixture of Dijkstra's Algorithm and A* Search; more precisely, while it converges to the target node like A* , it still explores quite a few neighboring nodes surrounding the start node like Dijkstra's. The algorithm differentiates itself from A* through its use of heuristics: it continually updates nodes' distance from the start node while taking into account their estimated distance from the target node. This effectively "balances" the difference in total distance between nodes closer to the start node and nodes closer to the target node, which results in the triangle-like shape of the Swarm Algorithm. We named the algorithm "Swarm" because one of its potential applications could be seen in a video-game where a character must keep track of a boss with high priority (the target node), all the while keeping tracking of neighboring enemies that might be swarming nearby.

🎮 How to Use

1. Select an algorithm from the dropdown menu
2. Draw walls by clicking and dragging on the grid
3. Add weights by pressing 'W' and clicking/dragging
4. Move nodes by dragging the start (green), target (red), or bomb (black) nodes
5. Visualize the algorithm by clicking the "Visualize!" button
6. Adjust speed using the speed controls in the navbar

🏗️ Maze Generation

Generate mazes with different patterns:

• Recursive Division
• Basic Random Maze
• Basic Weight Maze
• Simple Stair Pattern

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)
• Google Chrome/Firefox/Edge (latest version)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/algotrail.git
   cd algotrail

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   GEMINI_API_KEY=your_gemini_api_key_here
   PORT=1337

4. Start the development server

   npm start

   The application will be available at http://localhost:1337

🤖 AI Chatbot Integration

The AlgoTrail AI Assistant is powered by Google's Gemini AI, providing real-time assistance with:

Features

• Algorithm Explanations: Detailed breakdowns of pathfinding algorithms
• Code Examples: Implementation in multiple languages (Python, Java, C++, JavaScript)
• Problem Solving: Step-by-step guidance for DSA problems
• Learning Resources: Curated study materials and practice problems
• Interactive Help: Context-aware assistance with the AlgoTrail interface

How to Use the Chatbot

1. Click the chat icon in the bottom-right corner
2. Type your question about algorithms, data structures, or the AlgoTrail interface
3. The AI will provide a detailed, formatted response
4. Use the suggested follow-up questions for deeper exploration

Example Queries

• "Explain how A* search works"
• "Show me Dijkstra's algorithm in Python"
• "What's the time complexity of BFS?"
• "How do I use the maze generation feature?"

🛠️ Technologies Used

Frontend

• HTML5 - For page structure and content
• CSS3 - For styling and animations
• JavaScript (ES6+) - Core functionality and interactivity
• Bootstrap 3.3.7 - Responsive design and UI components
• jQuery - DOM manipulation and event handling

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• Google's Generative AI (Gemini 2.0 Flash) - AI-powered chatbot functionality

Development Tools

• NPM - Package management
• Nodemon - Development server with auto-reload
• Dotenv - Environment variable management

🧮 Data Structures and Algorithms

Core Data Structures

1. Graph/Node Structure

   • Grid represented as a graph with cells as nodes
   • Each node contains:
     • distance: Current distance from start
     • totalDistance: For A* (distance + heuristic)
     • heuristicDistance: Estimated cost to target
     • status: Current state (unvisited/visited/wall)
     • previousNode: Reference for path reconstruction
     • direction: Movement direction
     • weight: Traversal cost

2. Arrays/Lists

   • unvisitedNodes: Tracks nodes to be processed
   • nodesToAnimate: Sequence of nodes for visualization
   • boardArray: 2D grid representation
   • neighbors: Adjacent nodes during traversal

Algorithm Implementations

Pathfinding Algorithms

• A*

  • Priority queue based on f(n) = g(n) + h(n)
  • Uses Manhattan distance heuristic
  • Optimal for finding shortest paths

• Dijkstra's Algorithm

  • Explores all directions equally
  • Guarantees shortest path in weighted graphs
  • Uses a priority queue based on distance

• Greedy Best-First Search

  • Prioritizes nodes closest to target
  • Uses heuristic function alone
  • Fast but not guaranteed to find shortest path

• Bidirectional Search

  • Runs two simultaneous searches
  • More efficient for large grids
  • Meets in the middle for optimal path

Maze Generation

• Recursive Division
  • Creates maze-like structures
  • Uses depth-first approach
  • Generates long corridors

Performance Characteristics

Operation	Time Complexity	Space Complexity
A* Search	O((V+E)logV)	O(V)
Dijkstra's	O((V+E)logV)	O(V)
BFS	O(V+E)	O(V)
DFS	O(V+E)	O(V)

Where V = number of vertices (nodes) and E = number of edges

Optimization Techniques

1. Priority Queue

   • Simulated using array with O(n) extraction
   • Could be optimized with binary heap (O(log n))

2. Heuristic Functions

   • Manhattan distance for grid-based movement
   • Custom weights for different node types
   • Directional heuristics for improved performance

3. Path Reconstruction

   • Stores previous node references
   • Reconstructs path in reverse order
   • Efficient memory usage

👥 Contributing

We welcome contributions from the community! Here's how you can help:

🐛 Reporting Issues

• Check existing issues before creating a new one
• Provide detailed reproduction steps
• Include browser/OS version information
• Add screenshots if relevant

💻 Code Contributions

1. Fork the repository
2. Create a new branch for your feature/fix
3. Make your changes with clear, concise commits
4. Add/update tests if applicable
5. Submit a pull request with a clear description

📚 Documentation

• Fix typos and improve existing documentation
• Add examples for better understanding
• Update README with new features or changes

🧪 Testing

• Write unit tests for new features
• Ensure all tests pass before submitting PRs
• Test across different browsers and devices

📜 Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project, you agree to abide by its terms.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by various pathfinding visualizers
• Built with ❤️ for educational purposes
• Made by Ankit Basu and Ankan Basu of Lovely Professional University