MINI PROJECT ABSTRACT

SORTING ALGORTIHM VISUALIZER

SUBMITTED BY : ARJUN VINOD

RENJITH PR
NIKHIL MURALI
CAINS JHON
Abstract:
Sorting algorithms are fundamental concepts in computer science that are used to
arrange data in a certain order. However, understanding how different sorting
algorithms work can be challenging for beginners. In this project, we developed a web-
based application that allows users to visualize the working of various sorting
algorithms on randomly generated arrays. The application uses HTML, CSS, and
JavaScript as the key technologies and implements a user-friendly interface that lets
users choose the sorting algorithm and the array size. The application then displays the
steps of the sorting algorithm on the array using animations and colors. The main
advantages of this project are that it helps users to learn the logic and efficiency of
different sorting algorithms, and that it demonstrates the use of web development
technologies to create interactive and educational applications. The project can be
further extended by adding more sorting algorithms, more features, and more
documentation.

Introduction:
Sorting algorithms are procedures that take a collection of data, such as an array, and
rearrange it in a specified order, such as ascending or descending. Sorting algorithms
are widely used in computer science for various purposes, such as searching,
merging, and organizing data. There are many types of sorting algorithms, each with
different characteristics, such as time complexity, space complexity, stability, and
adaptability. Some of the common sorting algorithms are selection sort, insertion sort,
bubble sort, merge sort, quick sort, and heap sort.

However, learning and understanding how these sorting algorithms work can be
difficult for beginners, especially when they have to deal with abstract concepts and
mathematical notations. Therefore, it is helpful to have a visual representation of the
sorting algorithms that can show how they operate on the data step by step. This
can enhance the learning experience and the comprehension of the algorithms.

In this project, we developed a web-based application that allows users to visualize the
working of various sorting algorithms on randomly generated arrays. The application
uses HTML, CSS, and JavaScript as the key technologies and implements a user-
friendly interface that lets users choose the sorting algorithm and the array size. The
application then displays the steps of the sorting algorithm on the array using
animations and colors. The main advantages of this project are that it helps users to
learn the logic and efficiency of different sorting algorithms, and that it demonstrates the
use of web development technologies to create interactive and educational applications.
The project can be further extended by adding more sorting algorithms, more features,
and more documentation.

Methodology:
The methodology of this project consists of the following
steps:

- Designing the user interface using HTML and CSS. The user interface consists of a
title, a dropdown menu to select the sorting algorithm, a slider to adjust the array size, a
button to generate a new array, a button to start the sorting, and a canvas to display the
array and the sorting process.
- Implementing the logic of the sorting algorithms using JavaScript. The sorting
algorithms are implemented as functions that take an array as an input and return a
sorted array as an output. The functions also use variables to keep track of the current
index, the pivot, the swap, and the comparison. The functions also use callbacks to
update the canvas and the animation.
- Implementing the animation and the color scheme using JavaScript and CSS. The
animation is implemented using the requestAnimationFrame() method, which executes a
function repeatedly at a certain frame rate. The color scheme is implemented using CSS
variables, which change the color of the array elements according to their state. For
example, the color of the element being compared is red, the color of the element being
swapped is green, the color of the element being sorted is blue, and the color of the
element being finished is gray.
- Testing and debugging the application using the browser's developer tools. The
application is tested and debugged using the browser's console, which displays any
errors or messages from the JavaScript code. The application is also tested and
debugged using the browser's inspector, which allows to inspect and modify the HTML
and CSS elements.
Key Technologies:
The key technologies used in this project are HTML, CSS, and JavaScript. HTML
(HyperText Markup Language) is the standard markup language for creating web pages
and web applications. HTML defines the structure and the content of the web page
using tags and attributes. CSS (Cascading Style Sheets) is the language that describes
the presentation of the web page, such as the layout, the colors, the fonts, and the
animations. CSS can be embedded in the HTML file or written in a separate file and
linked to the HTML file. JavaScript is the programming language that enables the
dynamic and interactive behavior of the web page, such as the logic, the events, the
functions, and the data manipulation. JavaScript can be embedded in the HTML file or
written in a separate file and linked to the HTML file.

System Workflow:
The system workflow of the application is as
follows:

- The user opens the web page and sees the user interface.
- The user selects the sorting algorithm from the dropdown menu. The default
algorithm is selection sort.
- The user adjusts the array size using the slider. The default size is 10.
- The user clicks the generate button to create a new array. The array is randomly
generated using the Math.random() function and displayed on the canvas using the
drawArray() function.
- The user clicks the start button to begin the sorting. The sorting algorithm function is
called with the array as an argument and the animation function as a callback. The
sorting algorithm function performs the sorting on the array and updates the canvas and
the animation using the callback. The animation function uses the
requestAnimationFrame() method to execute the sorting algorithm function repeatedly at
a certain frame rate. The color scheme function changes the color of the array elements
according to their state using the CSS variables.
- The user can see the steps of the sorting algorithm on the array using the
animations and the colors. The user can also see the time taken by the sorting
algorithm to sort the array using the console.log() function.
- The user can repeat the process by generating a new array or selecting a different
sorting algorithm.
Advantages:
The advantages of this project are as
follows:

- It helps users to learn the logic and efficiency of different sorting algorithms by
visualizing them on randomly generated arrays.
- It demonstrates the use of web development technologies, such as HTML, CSS,
and JavaScript, to create interactive and educational applications.
- It enhances the user experience and the user interface by using animations and
colors to display the sorting process.
- It can be easily accessed and used by anyone with a web browser and an internet
connection.

Benefits:
The benefits of this project are as
follows:

- It improves the understanding and the application of sorting algorithms, which are
fundamental concepts in computer science and data structures.
- It develops the skills and the knowledge of web development technologies, which
are widely used and demanded in the software industry.
- It stimulates the interest and the curiosity of users in learning more about sorting
algorithms and web development technologies.
- It provides a fun and engaging way of learning and practicing sorting algorithms.

Conclusion:
In conclusion, this project is a web-based application that allows users to visualize the
working of various sorting algorithms on randomly generated arrays. The application
uses HTML, CSS, and JavaScript as the key technologies and implements a user-
friendly interface that lets users choose the sorting algorithm and the array size. The
application then displays the steps of the sorting algorithm on the array using animations
and colors. The main advantages of this project are that it helps users to learn the logic
and efficiency of different sorting algorithms, and that it demonstrates the use of web
development
technologies to create interactive and educational applications. The project can be
further extended by adding more sorting algorithms, more features, and more
documentation.