🕷️ Spidey's Sorting Visualizer

A comprehensive, interactive sorting algorithm visualizer with a vibrant Spiderman theme. This web application demonstrates various sorting algorithms through animated visualizations while providing an engaging user experience.

🚀 Features

🎯 Core Functionality

• 5 Sorting Algorithms: Bubble Sort, Insertion Sort, Selection Sort, Quick Sort, and Merge Sort
• Interactive Visualizations: Animated number bars with real-time sorting demonstrations
• Enhanced Controls: Prominent "Randomize Array" button, pause/resume, and step-by-step mode
• Multi-Colored Bars: Distinctive colors for different states (comparing, swapping, sorted, pivot, minimum)
• Value Labels: Clear numeric labels on bars for better understanding
• Algorithm Information: Detailed complexity analysis and stability information

🎨 Enhanced Spiderman Theme

• Vibrant Color Scheme: Primary colors (red, blue, black) with Spiderman-inspired design
• Custom Spiderman Logo: SVG logo with web-sling animations and interactive effects
• Dynamic Spider Web Backgrounds: Multiple SVG web patterns with parallax effects
• Corner Spider Graphics: Animated spider silhouettes in all four corners
• Day/Night Mode Toggle: Seamless theme switching with enhanced glow effects
• Floating Web Particles: Animated particles that float across the screen

🎭 Advanced Interactive Elements

• Web Shooting Easter Egg: Click the Spiderman logo for a spectacular web-slinging animation
• Parallax Effects: Mouse movement and scroll-based parallax animations
• Enhanced Micro-animations: Web shoot effects, logo glows, and button hover animations
• Card Spider Motifs: Subtle spider web patterns on algorithm cards
• Controls Watermark: Background Spiderman silhouette behind the controls panel
• Mini Visualizations: Interactive mini-demonstrations of each algorithm on the About page
• Pause & Step Mode: Study each sorting step at your own pace with pause/resume and step controls
• Responsive Design: Mobile-friendly interface with modern flat design
• Navigation System: Tab-based navigation between visualizer and information pages
• Keyboard Support: Press SPACE to start sorting when algorithm is selected

🌟 Visual Enhancements

• Page Load Animations: Staggered entrance effects and web unveil animation
• SVG Filters: Advanced glow and blur effects for night mode
• Randomized Patterns: Web patterns change orientation on each page reload
• Performance Optimized: Lightweight SVG graphics with efficient animations
• Accessibility Compliant: Respects prefers-reduced-motion settings

♿ Accessibility Features

• WCAG 2.1 AA Compliant: Full keyboard navigation and screen reader support
• High Contrast Design: Enhanced visibility for color-blind users with icons and patterns
• ARIA Labels: Comprehensive aria-labels for all interactive elements
• Focus Indicators: Clear focus outlines for keyboard navigation
• Screen Reader Support: Live regions and descriptive labels for all visual elements
• Accessible Comparison Table: Color-coded complexity badges with high contrast
• Enhanced Watermark: High visibility and keyboard accessible LinkedIn link

📱 User Experience

• Responsive Layout: Optimized for desktop, tablet, and mobile devices
• Smooth Animations: CSS transitions and JavaScript animations for enhanced UX
• Accessibility: Proper contrast ratios and keyboard navigation support
• Performance Optimized: Efficient rendering and memory management

🛠️ Technologies Used

• HTML5: Semantic markup with modern structure
• CSS3: Advanced styling with CSS Grid, Flexbox, and animations
• Vanilla JavaScript: ES6+ features with async/await for smooth animations
• Web APIs: Local Storage for theme persistence
• SVG Graphics: Scalable Spiderman logo and web patterns

📁 Project Structure

spiderman-sorting-visualizer/
├── index.html          # Main HTML structure
├── styles.css          # Complete CSS styling with themes
├── script.js           # JavaScript functionality and algorithms
└── README.md          # Project documentation

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No additional dependencies required!

Installation

1. Clone or download the project files
2. Open index.html in your web browser
3. Start exploring the sorting algorithms!

Usage

1. Select an Algorithm: Click on any sorting algorithm button
2. Customize Settings: Adjust array size and sorting speed using sliders
3. Generate Array: Create a new random array to sort
4. Start Sorting: Click "Start Sorting" or press SPACE to begin visualization
5. Switch Themes: Toggle between day and night modes
6. Learn More: Visit the "About Sorting" tab for algorithm details

🕷️ Easter Eggs & Hidden Features

1. Web Shooting: Click the Spiderman logo for a spectacular web-slinging animation with "THWIP!" sound effect
2. Parallax Effects: Move your mouse around to see the corner spiders follow your cursor
3. Scroll Parallax: Scroll the page to see background elements move at different speeds
4. Randomized Patterns: Refresh the page to see different web pattern orientations
5. Enhanced Glow: Hover over the Spiderman logo for enhanced glow effects
6. Card Motifs: Hover over algorithm cards to see spider web motifs animate
7. Value Labels: Hover over the array container to see numeric values on each bar
8. Mini Demonstrations: Click play buttons on the About page for algorithm mini-demos
9. Step-by-Step Learning: Use pause and step controls to study each sorting operation
10. Accessible Navigation: Tab through all elements or use screen reader to explore

🎮 Controls

Keyboard Shortcuts

• SPACE: Start sorting (when algorithm is selected)
• Tab: Navigate between elements

Mouse/Touch Interactions

• Algorithm Buttons: Select sorting algorithm
• Sliders: Adjust array size and speed
• Theme Toggle: Switch between day/night modes
• Spidey Watermark: Click to visit LinkedIn profile
• Navigation Tabs: Switch between pages

🧮 Sorting Algorithms

Bubble Sort

• Time Complexity: O(n²)
• Space Complexity: O(1)
• Stability: Yes
• Best Use: Educational purposes, small datasets

Insertion Sort

• Time Complexity: O(n²)
• Space Complexity: O(1)
• Stability: Yes
• Best Use: Nearly sorted data, small arrays

Selection Sort

• Time Complexity: O(n²)
• Space Complexity: O(1)
• Stability: No
• Best Use: Memory-constrained environments

Quick Sort

• Time Complexity: O(n log n) average, O(n²) worst
• Space Complexity: O(log n)
• Stability: No
• Best Use: General-purpose sorting, large datasets

Merge Sort

• Time Complexity: O(n log n)
• Space Complexity: O(n)
• Stability: Yes
• Best Use: Stable sorting required, external sorting

🎨 Theme System

Day Mode

• Light background with subtle spider web patterns
• High contrast text for readability
• Warm color palette with red and blue accents

Night Mode

• Dark background with enhanced web glow effects
• Reduced eye strain with darker surfaces
• Enhanced glow effects on interactive elements

📱 Responsive Design

The application is fully responsive and optimized for:

• Desktop: Full feature set with hover effects
• Tablet: Touch-optimized controls and layout
• Mobile: Simplified interface with stacked elements

🔧 Customization

Adding New Algorithms

1. Add algorithm info to the algorithms object in script.js
2. Implement the sorting function following the existing pattern
3. Add the algorithm button to the HTML
4. Update the switch statement in startSorting()

Modifying Themes

• Edit CSS variables in :root and [data-theme="night"]
• Add new theme variants by creating additional data-theme selectors
• Customize colors, animations, and effects as needed

Performance Tuning

• Adjust animationSpeed calculation for different devices
• Modify array size limits based on performance requirements
• Optimize rendering frequency for smoother animations

🤝 Contributing

Contributions are welcome! Here are some ways to contribute:

• Add new sorting algorithms
• Improve animations and visual effects
• Enhance mobile responsiveness
• Add accessibility features
• Create additional themes
• Improve performance optimizations

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

spidey - Initial work - LinkedIn

🙏 Acknowledgments

• Inspired by the amazing Spiderman character and Marvel universe
• Sorting algorithm implementations based on standard computer science principles
• CSS animations inspired by modern web design trends
• Thanks to the web development community for inspiration and resources

🔮 Future Enhancements

• Add more sorting algorithms (Heap Sort, Radix Sort, etc.)
• Implement sound effects for sorting actions
• Add comparison mode to compare multiple algorithms
• Create algorithm explanation animations
• Add data structure visualizations
• Implement PWA features for offline use
• Add algorithm performance benchmarking
• Create educational quiz mode

---

Made with ❤️ and 🕷️ by spidey

"With great sorting algorithms comes great responsibility!" 🕸️