Howsort: Algorithm Visualizer Application

Harsh Jain Shreya Sharma

Computer Science Engineering Computer Science Engineering
Faculty of Engineering & Technology Bengaluru, India Faculty of Engineering & Technology Bengaluru, India
Aj2769466@gmail.com Sharmashreya958@gmail.com

Prateek Arora Kiran Kumar

Computer Science Engineering Computer Science Engineering
Faculty of Engineering & Technology Bengaluru, India Faculty of Engineering & Technology
Aroraprateek.pa@gmail.com Bengaluru, India
Kiransunku538@gmail.com

Abstract— Computer Science is a field of not process or steps or set of rules to be followed in
just creating solutions to day-to-day activities but calculations, or problem-solving operations. So,
also to optimize it to the fullest. Algorithms are the the algorithms are meant to a set of rules or
core operational unit for optimizing any activity that instructions that define how a work is to be
offers work with certain efficiency, and to get executed upon in order to get the expected
increase the efficiency of a task, optimization is
outcomes. Algorithms must be highly optimized
required to come up with highly scalable units to
widen up the operational fields to whatever the to achieve the best time & space complexity
extent we desire. In this process, we achieve some possible. Time complexity in layman terms is a
great algorithms which are highly optimized that generalized version of the time taken by the
they provide us the best possible efficiency for those algorithm or the program written using it takes.
tasks. Sorting is the key component in Data These time complexities are one of the key
Structures and Algorithms; hence the best optimized values that decide the efficiency of an algorithm.
versions of those algorithms have to be understood So, lesser the time taken by the program for
better. But that process is complicated and couldn’t execution, greater the efficiency of that program
be understood on the first time we see the whole
or the gist algorithm. Space complexity is similar
algorithm or code. To provide a solution for this
problem, we have realized an interesting to time complexity but in memory and how does
psychological line “we remember and understand the memory storage gets affected with respect to
better what we see than what we hear or learn”, the input size. This factor is less valuable
hence we have to find a way to make these sorting compared to time complexity for the purpose of
algorithms more appealing by introducing any efficiency but not negligible as if we consider
interesting aspect that our brain understands faster large scale applications, they will have their data
and remembers better. So, we decided to visualize stored in multiple data centers various regions
these algorithms in the form of some geometric and also some replication technologies that
shapes and designs and animation among them to
amount to a lot of overhead to the overall system
depict the mechanism behind the algorithms.
and application served will also be affected.

II. OVERVIEW
I. INTRODUCTION
A. Problem Defination
Computer Science is a field completely build of
building more efficient tools and logics. In a The main problem we are discussing here is
computer, as in hardware each electrical about the way we approach to study or
component works and works a mechanism to understand or modify an algorithm which could
support and provide the computer, software also end up taking a lot more time than it deserves to
plays a vital role to make a computer function as be given. This is because we prefer to use code
we desire. Software is nothing but sets of right away to see what algorithm is for and what
programs which were written with logics and it does, but seeing the result and thinking we
tools to support various ranges of platforms using understand the mechanism is not logical enough,
libraries, and its dependencies. These programs better approach is that understanding the logic
and logics are written by taking certain measures behind it. The best possible way is to divide the
and used various techniques to achieve the final algorithm into small logical chunks and
outcome which should be highly efficient which understanding what each logic does to follow
are called algorithms. Algorithms are the each step of the designed algorithm without
underlying logics and mechanism on which getting compromised on the efficiency of both
software is built on. If any of evaluation metrics times taken for any amount of input size and
like the efficiency which is the head of all the space complexity also. To understand these
metrics applicable for an algorithm should be as algorithms better, we need a method to make
optimized as possible. Algorithm means that a things easier and interesting for better time
management and explore more variants. So, we be consuming more time for learning phase of
got many questions such as what method are we the languages we needed to study and understood
using to achieve the result? Who are the target and code sample applications for understanding it
users? What are the main benefits? How does we practically. So, the summarized procedure is
offer the solution? Does this also make sure that listed in terms of our phases that we divided
usual theoretical learning method retains? Does based on the work we committed to complete in
this avail the major part of algorithms, specified timestamps:
complexities? We are going to address all these
questions in our project as a part of providing  Learning phase: Mostly starting to gather as
overall solution for making the algorithms as a much of information as possible, and get the
cup of tea for all those who wish to explore the data to start the learning arc for those new
interesting and high potential field of Algorithms. tools. We understood the technologies and
tools we committed to work in through
B. Objectives various sources and courses.

Project "Howsort” has its main objective to  Wireframe phase: To achieve a good and
create a tool to facilitate the flow of learning understandable application, we have to
much easier and reduce the time spent on design the best User Interaction as possible
understanding through smaller logic chunks that so that, we could be effectively establish a
amount to the complete complex algorithmic good navigation structure of our application.
logic. This application aims its users to be ones So, for that, we need to create a skeleton of
that getting started with learning the popular the application to effectively measure the
sorting algorithms out there for upgrading changes might be required and minimize
themselves to be a better software engineer and them through different available User
also highly useful for interviewing at top tech Interface components. This phase is more of
companies like Google, Amazon, and others for an application interface planning one and to
better way of contributing to the tech industry. avoid any changes later.
The work explains all the major problems that we
addressed and provide solutions with the features
and methods that we propose as the solution for  Foundation phase: In this phase, we created
the problem statement we defined. This is the the setup required for the technologies we
main objective of the project and added were going to work on and also the
supporting modules to make it complete. So that dependencies needed for our project.
the target users will be able to understand Database setup is also done in this phase
algorithms effectively as possible by using the using Firebase’s Authentication and Fire
visual representation of the algorithm mechanism store for storing user details on
and answering some questions after going authentication.
through its theoretical aspect and learning the
major steps used for making that visualizer work  Animation phase: In this phase, we
and depict. configured how to create different
geometrical shaped components and use
C. Methodology them inside a Flutter application as we wish
and achieve some physics animation
properties like move along the axis, scale,
We have drafted a procedure following etc. Also implemented algorithms that were
appropriate functions required to work with a modified to facilitate the movement of the
model that has many obstacles in the way and shapes for visual depiction of internal
build the way out. We have built this application mechanism of the algorithms. Bubble sort,
as a cross-platform application based on Flutter Insertion sort, and Selection sort algorithms
technology from Google. This tool enables us to were introduced for the application.
support both major mobile operating systems iOS
and Android. Also because of the recent
announcement by Google, we are potentially  Development phase: We have started to
looking at an application that can run on any merge both the tried and tested modules i.e.,
platform, almost any operating system from graphical visualization and algorithms. In
mobile to web to windows applications. The plan this phase, we integrated both and created
was for implementing sorting algorithms which the intended result that on hitting the sorting
includes Bubble sort, Insertion sort, Selection button, starts to sort on selecting number of
sort, and also others if we could manage to pull numbers, sorting algorithm, and delay for
of our requirements early. And in initial stages, each term sort. Also started to build
we prepared to use React-Native as our building supporting modules such as Authentication,
tool for cross-platform facility but turned out to
 Quiz, Theory, etc. to make the application  Incompatibility in visualization tools and the various
complete. cross-platforms on which the E-learning applications are
build.
 Testing phase: This is the final phase and we  It displays movement of the bars without displaying any
are currently working on this phase along comparison of data. The user has no option to adjust the
with the development phase to fix whatever speed of visualizer according to his/her pace. The sound
we feel inappropriate and any bugs. We effects are static to the visualizer so as the sorting
started to find many bugs in our exceeds a particular time, the sound tends to repeat.
implementation and started to solve each
module related bugs each time. So, this
phase works along with the previous one to
constantly keep track of bugs and needed
111. System Design
fixes.

D. Related Work

Algorithm Animations for Teaching and Learning the Main

Ideas of Basic Sorting [7]. - The authors try to implement
bloom’s taxonomy and have an efficient model to represent
algorithms and educational content to amplify the impact of
visualization. In implementation phase they use an
interesting card view approach to represent the elements on
which algorithm works. Visualizing Sorting Algorithms
[4] - The web-based platform uses sound effects along
with visual aid to provide better interaction with the
users. It tends to achieve a better impartation of sorting
techniques among the students
The starting point of any mobile application will be its boot,
E. Existing Work which is the phase that occurs on triggering the application
to start its lifecycle processes. Authentication module is an
E-learning platform usual have theoretical content for optional feature that a user can either opt to get authenticate
explanation of concepts. It brings minimal user interaction himself/herself if they’re willing to access profile feature
any not be successful in imparting knowledge. E-learning is inside the application else it will not be accessible to non-
becoming a part of our lives day-by-day and a large part of authenticated users. If user decides to get authenticated, then
information available may not be accurate and in structured we have added authentication by email address and
format. In existing sorting visualizer, the existing password method of making an account using Firebase’s
animations techniques used have not made significant authentication feature which can also be used for account
difference. The main aim is to have a visualization details storage purposes later on while we deal with adding
technique which make learning easy and fast. Sorting Name and other details to the database. Once user enters
algorithms are not mere just a few straightforward authentication module, he can either sign in into the
topics to be learned. A computer science student application or sign up depending upon the history whether
user has already used the application and made an account
should know full working of the algorithms and be able
before else create a new one using sign up section.
to scale and invent new algorithms. If user has already had an account, then he can opt to use
sign in feature and enter his email address which is a unique
F. Problem in Existing Applications identifier for our purpose and enter the password that should
match in Firebase’s authentication database to get sign in
 Interaction with the user is limited. The visualization has process a success. In case user is signing up, then he must
one kind of view for every algorithm performed. follow set of rules that Firebase has in place for security
reasons and these are applied using Form Validation
 The limited screen size adds a challenge in technique to make user enter validated details into the fields
development. The demonstration lacks styling of that he desires to create an account with. Form Validation is
components to make it appealing to the user. used for all the text fields used in sign in module such as
Name, Email, Password and applied respective conditions
 The prototype work with Dijkstra path finding algorithm like name shouldn’t be short e.g. < 3 letters, email should
only. It can be used for creating networks, graphs and have a ‘@’ symbol and a ‘.’ period to validate email, and
other algorithms password should be of at least 6 letters and can optionally
enable other validations like should have a combination of
lowercase, uppercase letters, digits, special characters like
‘@’ or ‘$’ or ‘_’, etc., these enable more secure passwords
to be stored in the database. The main dashboard is
Visualizer screen with multiple options to ease the flow of
internal algorithm mechanism which should be understood
by the user. In this screen, user can choose type of algorithm
in top row, numbers count to sort which will be generated
dynamically and values are mostly random with float type,
and time delay between each operation of algorithm’s loops.
The numbers generated can be seen if the count is less
than10, just below each bar. If count exceeding 10, then just
have to hover over the bars, then a popup appears showing
the value that particular bar is representing. The current
element and the element used for comparison are depicted
using two arrow icons just below the bars which current
sorting algorithm’s iteration is taking place and also shows
the particular operation’s description below main visualizer
component to facilitate real-time understanding. Once the
sorting completes, the bars will be aligned in an increment
manner representing increasing order of values for their
respective value. Users can navigate to profile screen to
check the details they’ve entered while signing up to the
application for the first time. Quiz module is a bonus to the
application to make sure that users have properly understood
the concepts by testing themselves in this module and
answering various algorithmic based of multiple-choice
questions. Explanation module is the core of this V. TOOL DESCRIPTION
application, even though it mostly has static content, for this
application that is the most important aspect after visualizer.
Users are able to understand and see what exactly we were
showing them in the previous screens and can join the dots A. Hardware Requirement-
themselves. We have offered algorithm in steps, basic As project Howsort is entirely software based, hence the
definition and approach used, and code in three different hardware requirements are insignificant and a basic mobile
languages which has prominent amount of community handset running either Android or iOS operating systems
which are python, java, and C programming languages. can support the basic specifications required for this
application. So, it is an acknowledgement as well as a sense
of stating the obvious, that the hardware used are bare
minimum to be able to support the specifications like RAM,
Storage, Internet, etc. Some of the Hardware requirements
1V. BUSINESS MODEL for the project:

• RAM – at least 1 GB to avoid

unnecessary operating system
freezes.
• Storage – at least 50 MB for
app’s storage and 200 MB
more for having adequate
storage space for other
processes.
• Other details like CPU speed,
Disk IOs are quite down and
are negligible for this
application.
• USB debugging switched ON
to facilitate running Flutter
application from computer.

These are basic hardware specifications

that are required for this application to
 work smoothly, and are not limited to  Firebase is used for database purposes
the quantities mentioned. starting with authentication module, where
we have used auth segment offered by
B. Software Requirement firebase using email and password method.

As we already stated, the project deals with cross-  Firestore, and Realtime database are used to
platform mobile application, the software requirements store user details except authentication
seem to be more. Some major software requirements details like Name detail while signing up.
for the project are:
Android Version – at least 5.0 (Lollipop).
API level – should be or greater than 22. These are the major software requirements
Supports v4 and v7 compatible libraries which not limited and are used for
developing, building, testing, and deploying
 Figma, and Balsamiq tools are used for the application.
application wireframes and create layouts to
depict the UI components.
ACKNOWLEDGMENT
 For creating diagrams, charts, and flowcharts
such as architecture diagram and ER flow The project, titled “Howsort”, has been completed. The
model diagram using draw.io web tool to system has been designed with greatcare and is error-free,
have a well scripted schedule of events and while still being effective and time-saving. This project
tasks. aimed to create an app for visualising sorting algorithm
This project provided us with useful information and
 Designing application’s screens is done practical knowledge on a variety of topics, including
using Figma, and created complete Flutter developmenttools, Dart language, to build Android
navigation structure to make sure to avoid app.The system as a whole is secure.
lots of pauses and rollbacks in development
phase.

 Figma tool is also used for creating REFERENCES

Prototypes to verify and take a final check to [1] I. Reif and T. Orehovacki, “ViSA: Visualization of Sorting
go ahead with the UI designs after looking Algorithms”, University of Zagreb, Faculty of Organization and
Informatics, Varazdin, Croatia,2012
them in a virtual act.
[2] Brian Faria, “Visualizing Sorting Algorithms”, Rhode Island College,
2017
 Git Version Control should be installed in all [3] R. Meolic and T. Dogsa, “A C++ App for Demonstration of Sorting
the working machines along with its Algorithms on Mobile Platforms”, University of Maribor, Maribor
command line tool which usually gets Slovenia, International Journal of Interactive Mobile Technologies,
Volume 8, Issue 1, 2014, pg. 40-45
installed on installing Git.
[4] Kirsi Kuosa, Damiano Distante, Anne Tervakari, Luigi Cerulo,
Alejandro Fernandez, Juho Koro, Meri Kailanto, “Interactive
 GitHub for continuous collaboration with all Visualization Tools to Im-prove Learning and Teaching in Online
team mates to access and keep track of Learning Environments”, 2016
version-controlled code from all divided [5] Bremananth R, Radhika.V and Thenmozhi.S, “Visualization of
tasks and modules. Searching and Sorting Algorithms”, International Journal of
Computer and Information Engineering, Vol3, No3, 2009
[6] David Galles, “Data Structure Visualizations”, accessed November 3,
 Code editors are majorly depending upon the 2020,
features, resources and choice, we used [7] Ladislav VÉGH, Veronika STOFFOVÁ, “Algorithm Animations for
Microsoft’s Visual Studio Code and Android Teaching and Learning the Main Ideas of Basic Sortings”, Department
Studio. of Mathematics and Informatics, J. Selye University, Komárno,
Slovakia, Informatics in Education, 2017, Vol. 16, No. 1, 121–140
 Command line interface or CMD to make [8] Tutorialspoint, “Data Structure and Algorithms Tutorial”,
use of both Git and Flutter CLI tools. accessed January 13, 2021,
AlgoRythmics, “Bubble-sort with Hungarian ("Csángó") folk
 Programming language – Dart which is used [9]
dance”, 2011, accessedNovember 3, 2020,
for developing flutter applications and
design the business logic of the application.