Sorting Algorithms Visualizer

Sorting Algorithms Visualizer is a web-based tool that visually demonstrates various sorting algorithms, such as Bubble Sort, Merge Sort, and others, to help users understand how these algorithms work through animation.

Features

• Visualize Sorting Algorithms: Choose from different sorting algorithms and watch them sort a list of numbers step by step.
• Dynamic Array Generation: Generate random arrays of varying sizes and see how different algorithms perform on them.
• Interactive User Interface: Allows users to interact with the visualizer, adjusting the speed and size of the array for a personalized experience.

Technologies Used

• HTML: Used for the basic structure and layout of the visualizer.
• CSS: Used for styling the interface and animating the sorting process.
• JavaScript: Used for implementing the sorting algorithms and controlling the animations.

Setup Instructions

1. Clone the repository:

   git clone https://github.com/YourUsername/Sorting-Algorithms-Visualizer.git

2. Open the project:

   • Simply open the index.html file in a web browser to view and interact with the visualizer.

3. Use the visualizer:

   • Select a sorting algorithm from the dropdown.
   • Adjust the array size and speed as desired.
   • Click "Generate" to start the sorting animation.

Algorithms Visualized

• Bubble Sort: A simple comparison-based algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order.
• Merge Sort: A divide-and-conquer algorithm that splits the array into two halves, recursively sorts them, and merges them back together.
• Insertion Sort: Builds the final sorted array one item at a time, inserting each element into its correct position.

How It Works

1. Select Algorithm: Choose the sorting algorithm you wish to visualize from the dropdown menu.
2. Generate Array: Click "Generate" to create a random array of numbers.
3. Visualize Sorting: The algorithm will sort the array step by step, with each step being animated for easy visualization.
4. Adjust Settings: You can change the array size and speed to see how different algorithms perform with different data.

Contributing

Feel free to fork this repository, make improvements, and submit a pull request. Contributions are welcome!

-Shaik Mohammad Sakeeb