🧩 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/

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

CREATE TABLE algorithm_steps (
    id INT AUTO_INCREMENT PRIMARY KEY,
    session_id VARCHAR(36) NOT NULL,
    step_number INT NOT NULL,
    array_state TEXT NOT 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:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
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

Create a new class in src/Algorithms/
Implement the AlgorithmInterface (for sorting) or SearchInterface (for searching)
Add your algorithm to the dropdown in public/index.php
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!

FilesExpand file tree

README.md

Latest commit

History