Shortest Path Finding Visualizer

Abstract

Visualization is an effective way to learn concepts faster than traditional methods. Modern technologies make it possible to create e-learning tools, which also greatly contribute to improving the quality of computer science teaching. The goal of this project is to create a Pathfinding Visualizer, a web-based e-learning tool that can be used to visualize the shortest path algorithm. Conceptual applications of the project are illustrated through implementations of algorithms such as Dijkstra\'s and DFS. This project aims to perform all these tasks with some knowledge of HTML, CSS, JavaScript and React framework. Since the final product is a web application, users can easily see and learn how the algorithm works. Ease of use of the project provides users with a simple instruction manual. The first results using the app promise the benefits of this learning tool for students who have a good understanding of the shortest path algorithm.

Introduction

I. INTRODUCTION

Currently, e-learning is very strongly promoted among various disciplines. Modern technologies enable the development of visualization tools for topics such as various graph theory algorithms and their descriptions. The implementation of such e-learning tools is one of the most important prerequisites for the successful use of any e-learning system. Learning through visualization has been shown to help improve learning ability. It provides more autonomy to the individual's learning process. By providing a visual representation of what the target node's algorithms look like, the application tries to make them easier to understand. A good algorithm visualization tool will bring the algorithm to life by showing the traversal of nodes through and animating transitions from one node to another. One of the broader applications of graph theory is the determination of shortest paths in many practical applications such as maps, road networks, and robot navigation. Dijkstra's algorithm is used to demonstrate how the tool works. It also works for weighted graphs. So, it takes longer to boot than BFS. This algorithm guarantees the shortest possible path. Additionally, using online learning methods instead of face-to-face lectures has the power to enhance learning in terms of improving student performance, increasing student satisfaction, and increasing student learning flexibility.

II. ADVANTAGES

 E-learning has no place or time limits.

1. Always developing
2. More effective than traditional methods.
3. Supports individual learning styles and needs.
4. e learning is time efficient.

The e-learning tool described enables teachers, students, and other applicants to interact with the algorithm, actively work with it, and visualize the execution of the shortest-path algorithm.

III. REFERENCE REVIEW

eLearning is one of the crowning achievements of the Internet transformation. This allows the user to fruitfully gather their education and knowledge from various available sources and effectively use it to learn quickly and stay current. became. Different problems require different solutions. Similarly, different types of e-learning include blended and informal learning and network-based learning. Both asynchronous and synchronous e-learning methods are equally important. e-Learning is a modern solution for training and supporting your workforce to acquire the knowledge and skills they need to turn change into an advantage and create more opportunities. As a result, many companies are using e-learning to keep their employees up to date with new advances, add new skills to deliver better solutions, and connect synchronous tools with asynchronous environments. I realized that I need to enable Used to enable 24/7 learning models. In his current Covid-

In this situation, eLearning proves to be very effective. E-learning has made it possible to provide education anytime, anywhere. eLearning successfully replaces school classes and helps. improve student performance.

IV. DESIGN AND ARCHITECTURE

It turns out that there is a big gap between theory and practical understanding of algorithms. This is also true for the shortest path algorithm, especially the Dijkstra algorithm. The main purpose of the e-learning tool is to use it to learn the well-known graph algorithm. Starting with Dijkstra, other shortest-path algorithms have been gradually implemented. The main idea of this system is to provide an integrated educational environment to facilitate the learning process in an efficient way. The Pathfinding Visualizer tool has three steps.

1. Algorithm Selection
2. Node Placement
3. Visualization

V. PROBLEM ANALYSIS

Computer science education has experienced tremendous growth in recent years. Computer science has many difficult subjects that are very difficult to learn, especially algorithms such as the shortest path algorithm, which are often difficult and complex to understand. Modern technology proves that the learning process benefits. Visual aids have been recognized as a means of enhancing a person's ability to learn. Visualization makes it surprisingly easy to understand the explanation of a particular topic. We are trying to create an e-learning tool for teaching pathfinding algorithms by visualizing each step of the algorithm. Features of the tool:

Ease of use Add animation for better visualization.

The ability to put obstacles in the way. Benefits of the proposed work

Visual aids facilitate the acquisition of skills that are widely known as This tool simplifies the entire process of learning complex wayfinding algorithms and makes e-learning tools accessible.

1. Different algorithmic visualizations can provide giving people more autonomy in the process of learning and helping find more applications in real life.
2. Visualization helps build knowledge and organize information.
3. Even a user without knowledge of the topic can learn from it.
4. Leads to better memory retention and supports active learning.

VI. SOLUTION

Seeing them in action can be a great way to understand complex information.The proposed system includes many interactive animations for various algorithms. Our websiteis written in JavaScript using the HTML5 canvas element and is accessible from any modernbrowser. The visualization is self explanatory. Our proposed systemcan be used to enhancee classroom lectures and textbooks for data structures and geometric algorithms.

VII. MERITS OF THE PROPOSED WORK

1. Visual aids are widely recognized as a means of facilitating skill acquisition. This tool simplifies the entire process of learning complex pathfinding algorithms and makes e-learning tools available.
2. Various algorithmic visualizations can give people more autonomy in the learning process and help find more real-life applications.
3. Visualization helps build knowledge and organize information.
4. Users without knowledge of the topic can also learn by watching it.
5. Leads to better retention and promotes active learning.

A. System Description

The project consists of various modules that fulfil different tasks of the. These modules are the Algorithm module, the Node module, and the Path Visualizer module. These modules can also be implemented within a home network and over the Internet.

1. Algorithm Module: The Algorithm Module is the most important. It contains the functionality needed to traverse the nodes on the lattice and solve the graph shortest path problem. This module also contains the Dijkstra algorithm, A*, and the DFS algorithm. There are only 4 ways to move: up, down, right, and left. This means that all nodes are weighted equally.
2. Node Module: Once the algorithm starts searching for the target node and starts traversing according to the function, the node module covers creating an animation showing the direction of the traversal and the nodes traversed. It also handles the animation of drawing paths between the source and destination nodes on the grid.
3. Path Visualizer Module: The Path Visualizer component handles mouse operations, implements algorithms from the Algorithms module on grids, and handles all operations performed on grids.

B. Future Scope

A practical tool for visualizing data structurealgorithms and their associated functions, as well as some simple geometric algorithms. With its userfriendly and selfexplanatory interface, this tool provides an easy way to play with theand learn the concept of the data model. 

Thissystem includes arrays, queues, stacks,linked lists, linear and binary search trees, various sorting methods, etc. Only some simple applications and methods such as Its range can be extended tousing sophisticated methods in software.Create and implement a process for a software package forto recognize the user's dataset analysis model and leave the application to the user as another way, continue existing, let users use their own data analysis models, so more add. easy.

VIII.  ACKNOWLEDGEMENT

How ever we put a lot of time and effort into this task. And many individuals have helped and assisted us in completing this task. We would like to express our sincere gratitude to everyone and thank Prof. Sayali Haldavanekar for her role as our guide and for always being there by keeping an eye on us and providing her necessary input and information on the project.

 We would also like to thank HOD Prof. Sayali Haldavanekar from the Computer Engineering Department for her moral support and motivation in helping us to make this project a reality. We would like to take this opportunity to thank our teachers, friends and everyone who contributed to the completion of our project.

Conclusion

e-Learning is the latest solution for providing education and knowledge. A number of tools have been developed to implement this learning method and to make people recognize and embrace its importance. Both synchronous and asynchronous learning methods are equally important. E-learning tools meet the needs of both novices and experts, and their consistency also proves its effectiveness in traditional methods. The web application helped visualize how the wayfinding algorithm works and made it easier to understand. Further development of this tool may include visualization of more complex algorithms and their implementation on real maps.

References

[1] Alexander, S. (2001), ``e-Learning developments and experiences\'\', Education and Training, Vol. 43 Nos 4/5, pp. 240-8 [2] Daniela Borissov, Ivan Mustakerov “E-learning Tool for Visualization of Shortest Paths Algorithms” [3] Magzhan Kairanbay, Hajar Mat Jani(2013), “A review and evaluations of Shortest Path Algorithms ”, International Journal of Scientific & Technology Research 2(6):99-104 [4] https://www.researchgate.net/publication/352848285_AlgoAssist_Algorithm_Visualizer_and_Coding_ Platform_for_Remote_Classroom_Learning [5] https://www.researchgate.net/publication/221423715_AlCoLab_Architecture_of_Algorithm_Visualizat ion_System [6] https://www.researchgate.net/publication/329481179_Towards_Developing_an_Effective_Algorithm_ Visualization_Tool_for_Online_Learning

Copyright

Copyright © 2023 Prof. Sayali Haldavanekar, Sushant Mahadwad, Satyam Dighe, Kunal Suryawanshi, Deepak Rai. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.