🧩 Algorithm Visualizer

Interactive visualization of sorting and searching algorithms built with PHP, MySQL, and JavaScript

---

📸 Preview

---

✨ Features

Feature	Description
🎯 Multiple Algorithms	Bubble Sort, Quick Sort, Merge Sort, and Binary Search
🎨 Interactive Visualization	Real-time animated bar charts showing algorithm execution
⏯️ Playback Controls	Play, Pause, Reset with adjustable speed (100ms - 1000ms)
🎮 Keyboard Shortcuts	Press Space to toggle play/pause
📊 Step-by-Step Tracking	Watch each comparison and swap in detail
🔍 Search Support	Binary Search with target value input
💾 Database Persistence	All steps stored in MySQL for review
📱 Responsive Design	Works on desktop and mobile devices
🎨 Modern UI	Clean, colorful, and user-friendly interface

---

🚀 Quick Start

Prerequisites

• PHP 7.4 or higher
• MySQL 5.7 or higher
• Web server (Apache/Nginx) or XAMPP/WAMP/MAMP
• Composer (optional, for autoloader)

Installation

# 1. Clone the repository
git clone https://github.com/Bendz07/algorithm-visualizer.git
cd algorithm-visualizer
# 2. Set up the database
mysql -u root -p < database/schema.sql
# 3. Configure environment
cp .env.example .env
# Edit .env with your database credentials# 4. Install dependencies (optional)
composer install
# 5. Start your web server# For PHP built-in server:
php -S localhost:8000 -t public/
# For XAMPP/WAMP:# Place the project in htdocs/www folder

Quick Access

Open your browser and navigate to:

http://localhost:8000/

or

http://localhost/algorithm-visualizer/public/

---

🎯 Usage Guide

1️⃣ Choose an Algorithm

Select from the dropdown menu:

• Bubble Sort - Simple adjacent comparison sort
• Quick Sort - Divide and conquer with pivot
• Merge Sort - Recursive merge-based sorting
• Binary Search - Find target in sorted array

2️⃣ Enter Your Data

For Sorting:

[5, 3, 8, 1, 2, 7, 4, 6]

For Binary Search:

[10, 20, 30, 40, 50, 60, 70, 80]

Then enter a target value (e.g., 50)

3️⃣ Visualize & Interact

Button	Action
🟢 Visualize	Generate algorithm steps
▶️Play	Start animation
⏸️ Pause	Pause animation
🔄 Reset	Go back to first step
🎚️ Speed Slider	Adjust animation speed

---

🧮 Supported Algorithms

Sorting Algorithms

Bubble Sort - O(n²) Time Complexity

• Compares adjacent elements and swaps if they're in wrong order
• Largest elements "bubble" to the end
• Visual: Red bars indicate comparisons/swaps

Quick Sort - O(n log n) Average

• Uses divide-and-conquer approach
• Selects a pivot and partitions around it
• Visual: Red bar shows pivot element

Merge Sort - O(n log n) Time

• Divides array into halves recursively
• Merges sorted sub-arrays
• Visual: Shows merging process

Search Algorithms

Binary Search - O(log n) Time

• Requires sorted array
• Repeatedly divides search space in half
• Visual: Red bar shows current middle element

---

🏗️ Project Structure

algorithm-visualizer/
├── config/
│ └── database.php # Database configuration
├── public/ # Web root
│ ├── index.php # Main entry point
│ ├── css/
│ │ └── style.css # Stylesheets
│ └── js/
│ ├── visualizer.js # Main visualization logic
│ └── api.js # API calls
├── src/
│ ├── Controllers/
│ │ ├── AlgorithmController.php
│ │ └── HomeController.php
│ ├── Models/
│ │ ├── StepModel.php
│ │ └── SessionModel.php
│ └── Algorithms/
│ ├── AlgorithmInterface.php
│ ├── BubbleSort.php
│ ├── QuickSort.php
│ ├── MergeSort.php
│ ├── BinarySearch.php
│ └── SearchInterface.php
├── logs/ # Application logs
├── .env # Environment variables
├── composer.json # Composer dependencies
└── README.md # This file

---

🛠️ Technology Stack

---

📊 Database Schema

CREATETABLEalgorithm_steps (
id INT AUTO_INCREMENT PRIMARY KEY,
session_id VARCHAR(36) NOT NULL,
step_number INTNOT NULL,
array_state TEXTNOT NULL,
active_indices TEXT,
message VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
INDEX idx_session (session_id)
);

---

🎮 Keyboard Shortcuts

Key	Action
Space	Toggle Play/Pause
Enter	Start Visualization

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

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

Development Setup

# Clone your fork
git clone https://github.com/Bendz07/algorithm-visualizer.git
# Install dependencies
composer install
# Run tests (if any)
phpunit
# Start development server
php -S localhost:8000 -t public/

Adding New Algorithms

1. Create a new class in src/Algorithms/
2. Implement the AlgorithmInterface (for sorting) or SearchInterface (for searching)
3. Add your algorithm to the dropdown in public/index.php
4. Update the controller's switch statement

---

🐛 Troubleshooting

Database Connection Error

• Ensure MySQL is running
• Check credentials in .env file
• Verify database exists: CREATE DATABASE algorithm_visualizer;
• Run the SQL schema to create tables

Composer Autoloader Missing

• Run composer install in the project root
• Or use the manual autoloader (see public/index.php)

Blank Page / No Visualization

• Check PHP error logs
• Enable error reporting: error_reporting(E_ALL); ini_set('display_errors', 1);
• Verify all files are in correct locations
• Check browser console for JavaScript errors

---

📝 License

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

---

🙏 Acknowledgments

• Inspired by various algorithm visualization tools
• Built with ❤️ for the developer community
• Thanks to all contributors and open-source libraries

---

📬 Contact

X and Gmail - @b_abdelali - abdel.contact@gmail.com

Project Link: https://github.com/Bendz07/algorithm-visualizer

---

Made with ❤️ and PHP

Features • Quick Start • Usage Guide • Algorithms • Contributing

---

📸 Screenshots Gallery

---

⭐ Star History

---

Don't forget to ⭐ star this repository if you found it helpful!