Sorting Visualizer

Description

Sorting Visualizer is an interactive web application that visualizes various sorting algorithms. This project is aimed at helping users understand how different sorting algorithms work through animation. The visualizer is built using JavaScript, HTML, and CSS.

Features

• Visualizes Popular Sorting Algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and more.
• Adjustable Speed Settings: Control the speed of the visualizations with a slider.
• Real-time Comparisons and Swaps: Watch how algorithms compare and swap elements in real time.
• User-Friendly Interface: Intuitive controls for selecting algorithms, adjusting speed, and generating new arrays.
• High-Quality Look: Clean and modern design for an enhanced user experience.
• Use of Colors for Better Clarity: Different colors are used to highlight comparisons, swaps, and sorted elements.
• Refresh Ability: Easily generate new arrays to visualize sorting algorithms repeatedly.
• Responsive Design: Works well on various screen sizes, including mobile devices.

Usage

Upon opening the application, you will be greeted with the main interface where you can:

1. Select a Sorting Algorithm: Choose from a dropdown menu of various sorting algorithms.
2. Adjust the Speed: Use the slider to adjust the speed of the visualization.
3. Generate a New Array: Click the button to generate a new random array of numbers.
4. Start the Visualization: Click the "Start" button to begin the sorting animation.

Example usage:

1. Select "Bubble Sort" from the algorithm dropdown.
2. Adjust the speed to your preference.
3. Click "Generate New Array" to create a new set of numbers.
4. Click "Start" to see the Bubble Sort algorithm in action.

GUI System

The graphical user interface (GUI) of the Sorting Visualizer is designed for ease of use and clarity. Key components include:

• Algorithm Dropdown: Select the sorting algorithm you want to visualize.
• Speed Slider: Adjust the speed of the sorting animation.
• New Array Button: Generate a new array of random numbers to sort.
• Start Button: Begin the sorting visualization.
• Visualization Area: Displays the array and the sorting process with animations.

High-Quality Look

The application features a modern and clean design, ensuring a pleasant visual experience. The use of smooth animations and clear typography enhances readability and user engagement.

Use of Colors

Colors play a crucial role in the visualizer:

• Comparisons: Elements being compared are highlighted in one color.
• Swaps: Elements being swapped are highlighted in another color.
• Sorted Elements: Elements that are sorted are highlighted in a distinct color, making it easy to follow the progress of the algorithm.

Refresh Ability

The application allows users to generate new arrays quickly, enabling repeated visualizations and better understanding of different sorting algorithms. The "Generate New Array" button is easily accessible for this purpose.

Screenshots

Technologies Used

• HTML
• CSS
• JavaScript

Contributing

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

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

Credits

• Author: Rajdeep Mondal
• GitHub: nrkkR
• LinkedIn: Rajdeep Mondal