📊 Sorting Algorithm Visualizer

AlgoVision is an interactive, web-based educational tool designed to visualize classic sorting algorithms in real-time. Built with a Python (Flask) backend and a vanilla JavaScript frontend, this application helps users understand the mechanics of sorting through dynamic animations, audio sonification, and step-by-step code execution.

---

🚀 Key Features

1. Interactive Visualization

• Dynamic Canvas: Vertical bars represent integer values.
• Color-Coded States:
  • 🟡 Yellow: Comparison
  • 🔴 Red: Swap action
  • 🟢 Green: Sorted/Locked state
  • 🟣 Purple: Pivot element (QuickSort)

2. Supported Algorithms

• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Quick Sort

3. Advanced Controls

• Custom Inputs: Users can input specific comma-separated arrays (e.g., 10, 45, 2, 99) via the "Apply Array" feature.
• Dynamic Generation: A modal prompts users to define the specific size of a random array (N=5 to N=100).
• Speed Control: Adjustable slider to control animation delay (10ms - 1000ms).

4. Educational Metrics

• Audio Sonification: Distinct sound frequencies play during swaps, creating an auditory representation of the sorting process.
• Real-Time Stats: Live counters for Total Comparisons and Total Swaps.
• Code Inspection: A "Show Code" modal displays the actual Python implementation of the selected algorithm.
• Complexity Analysis: dynamically updates Big-O notation for Time and Space complexity.

---

🛠 Tech Stack

• Backend: Python 3, Flask (RESTful API architecture)
• Frontend: HTML5, CSS3 (Modern Dark Mode), JavaScript (ES6+)
• State Management: Asynchronous fetch requests with JSON-based step parsing.

---

📂 Project Structure

├── static/
│   ├── css/
│   │   └── style.css       # Main stylesheet (Dark Theme)
│   ├── js/
│   │   └── script.js       # Animation logic & API handling
│   └── sounds/             # (Optional) Static audio assets
├── templates/
│   └── index.html          # Main application interface
├── app.py                  # Flask server & Sorting logic
├── requirements.txt        # Python dependencies
└── README.md               # Project documentation

⚙️ Installation & Setup Follow these steps to run the project locally.

Prerequisites Python 3.x installed

pip (Python package manager)

1. Clone the Repository Bash git clone https://github.com/your-username/algovision-visualizer.git cd algovision-visualizer
2. Create a Virtual Environment (Recommended) Bash

Windows

python -m venv venv venv\Scripts\activate

Mac/Linux

python3 -m venv venv source venv/bin/activate 3. Install Dependencies Bash pip install flask 4. Run the Application Bash python app.py 5. Access the App Open your browser and navigate to: http://127.0.0.1:5000/