🔍 Binary Search Interactive Visualization

An engaging, educational web-based visualization tool that demonstrates the binary search algorithm through interactive animations and real-time feedback.

🎯 Overview

This interactive visualization helps students understand the binary search algorithm through:

• Animated step-by-step execution
• Real-time performance metrics
• Customizable parameters
• Visual elimination of search space

✨ Features

🎮 Interactive Controls

• Array Size Adjustment: Generate arrays from 5 to 20 elements
• Custom Target Values: Search for any number within the array range
• Speed Control: Adjust animation speed from 0.5x to 3x
• Reset Functionality: Start fresh with new parameters

🎨 Visual Elements

• Color-Coded Array Elements:
  • 🔵 Blue: Left boundary
  • 🟣 Pink: Right boundary
  • 🔴 Red: Current middle element
  • ⚫ Gray: Eliminated elements
  • 🟢 Green: Found target (with pulse animation)

📊 Performance Tracking

• Step Counter: Number of iterations performed
• Comparison Counter: Total comparisons made
• Efficiency Percentage: Algorithm performance rating
• Real-time Status Updates: Current search progress

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/binary-search-visualization.git
   cd binary-search-visualization

2. Open the visualization

   # Option 1: Open directly in browser
   open index.html
   
   # Option 2: Serve with a simple HTTP server
   python -m http.server 8000
   # Then visit http://localhost:8000

3. Start exploring!

   • Generate a new array
   • Enter a target value
   • Click "Start Search" to watch the algorithm in action

Algorithm Visualization Process

1. Initialization: Set left pointer to 0, right pointer to array length - 1
2. Middle Calculation: Find middle index using Math.floor((left + right) / 2)
3. Comparison: Compare middle element with target value
4. Space Elimination: Remove half of the remaining search space
5. Iteration: Repeat until target is found or search space is exhausted

Visual Feedback System

• Pointer Display: Shows current left, middle, and right positions
• Element Highlighting: Color codes active and eliminated elements
• Comparison Results: Displays each comparison with directional indicators
• Progress Tracking: Real-time statistics and efficiency metrics

🎨 Customization

Modifying Array Generation

// Current implementation in generateArray()
this.array = Array.from({length: size}, (_, i) => (i + 1) * Math.floor(100 / size));

// Add randomness while maintaining sort order
for (let i = 1; i < this.array.length; i++) {
    this.array[i] = this.array[i-1] + Math.floor(Math.random() * 10) + 1;
}

Adjusting Animation Speed

// Speed multiplier affects all delays
await this.sleep(1000 / this.speed);  // Main step delay
await this.sleep(800 / this.speed);   // Highlight delay  
await this.sleep(1200 / this.speed);  // Comparison delay

Styling Modifications

The CSS uses CSS custom properties for easy theming:

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --success-color: #00b894;
  --warning-color: #ff6b6b;
  --info-color: #74b9ff;
}

📚 Technical Details

File Structure

binary-search-visualization/
├── index.html          # Main HTML file with embedded CSS and JavaScript
├── README.md