Scribd
Upload
27 views17 pages

Oop Project Report-Dijkstra

The project is a web-based application that visually demonstrates Dijkstra's algorithm for finding the shortest path in a graph. It allows users to create a grid, add walls, and select start and end nodes. When the user runs the algorithm, it highlights the nodes as it evaluates them to find the shortest path from start to end. The project is organized into modular JavaScript files that handle different aspects like the grid, walls, algorithm implementation, and user interface coordination.

Uploaded by

Omer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views17 pages

Oop Project Report-Dijkstra

The project is a web-based application that visually demonstrates Dijkstra's algorithm for finding the shortest path in a graph. It allows users to create a grid, add walls, and select start and end nodes. When the user runs the algorithm, it highlights the nodes as it evaluates them to find the shortest path from start to end. The project is organized into modular JavaScript files that handle different aspects like the grid, walls, algorithm implementation, and user interface coordination.

Uploaded by

Omer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

PATHFINGING ALGORITHM

VISUALIZER

Project Report

Teacher Name
Sir. Burhan Abbasi

Submitted by

Abdur Rehman Faisal


01-134222-011

Muhammad Shahzaib Tariq


01-134222-100

Department of Computer Science,


Bahria University, Islamabad.

[11th June 2023]


PROJECT DESCRIPTION

The Pathfinding Algorithm Visualizer project is a web-based application that


allows users to interactively explore and understand the inner workings of
Dijkstra's algorithm. It utilizes JSX, HTML, and CSS to provide an intuitive
and visually appealing user interface.

Upon launching the application, user is presented with a grid-based canvas


representing a map or a maze. They can create obstacles or walls by clicking
on individual cells, defining the terrain through which the algorithm will find
the shortest path. The start and end nodes can be selected by clicking on
the cells as well.

The visualization begins when the user initiates the Dijkstra's algorithm by
pressing the button. The algorithm, known for its efficiency in finding the
shortest path in weighted graphs, starts exploring the grid from the start node
and systematically evaluates neighboring cells, assigning tentative
distances. This process is visually represented by highlighting the cells that
are currently being evaluated.

Through this project, users can gain a deeper understanding of Dijkstra's


algorithm by visualizing its step-by-step execution and observing how it
navigates through obstacles to find the shortest path.
FUNCTIONAL REQUIREMENTS

1. Creation of a fully functioning grid for interactive user display.


2. Ability to manipulate the grid to set up start & end nodes and walls as
per user’s need.
3. Functional buttons “VISUALIZE” and “RESET” to begin visualization to
or reset the grid.
4. In depth implementation of Dijkstra’s algorithm to find the shortest path
from the start to the end node.
5. Animating the visited node when the algorithm is running to visualize it’s
working.
6. Highlighting the shortest path from start node to the end node.

UML CLASS DIAGRAM


IMPORTANT NOTE:
The UML diagram provided above follows the principles of Object-
Oriented Programming (OOP). However, it is important to note that
while JavaScript is an Object-Oriented language, it has its own unique
way of dealing with classes and objects compared to languages like
C++.

In JavaScript, modules play a significant role in organizing and


managing code. Modules are used to encapsulate related functionality,
variables, and classes, allowing for better code organization,
reusability, and maintainability. The use of modules helps in avoiding
global scope pollution and promotes modular development.

JavaScript introduced classes in the ES6 (ECMAScript 2015) update,


providing a syntax similar to class-based languages like C++.
However, under the hood, JavaScript's classes are implemented using
prototype-based inheritance rather than traditional class-based
inheritance found in languages like C++.

JavaScript's prototype-based inheritance allows objects to inherit


properties and methods directly from other objects. This differs from
the class-based inheritance model of C++, where classes define the
structure and behavior of objects, and objects are instances of those
classes.

While JavaScript's approach to classes and objects may be different


from C++, it still allows for the implementation of object-oriented
concepts and patterns. Developers can leverage modules, classes,
inheritance, and other object-oriented features to organize and
structure their JavaScript code effectively.
SOURCE CODE

The project source code is structured using multiple files. Each heading
represents a file of the project and following the heading is the code
contained by that file.
The code is broken down into modules which is the essence of
JavaScript. Lets dive into these files and understand what each of them
does.

• TABLE.html
This HTML code represents the grid drawing functionality, which
plays a pivotal role in our visualization process. The grid serves as
the foundation for implementing visualization procedures.

• STYLE.css
This CSS file is responsible for the frontend design of our webpage,
enhancing its visual appeal and optimizing user interaction. It plays
a vital role in creating an engaging and aesthetically pleasing user
interface.

• CELL.js
This JavaScript file serves as a module that encapsulates a class
responsible for managing all the nodes within the grid. It plays a
crucial role in controlling the appearance and behavior of these
nodes based on user interactions. By encapsulating the functionality
within a class, it provides a structured approach to handle node
management, enabling seamless control and customization of node
appearance and behavior.

• WALL.js
This JavaScript file serves as a module that includes a child class of
Cell, specifically designed to manage the walls within the grid. By
encapsulating this functionality within a separate class, it allows for
independent and efficient management of walls across the grid. This
approach ensures modularity and facilitates easier customization
and manipulation of wall properties, enhancing the overall flexibility
and control over the grid structure.
• ALGORITHM.js
This JavaScript file serves as a module that implements the Dijkstra
algorithm. It contains a class called DijkstraAlgorithm, which
efficiently manages the execution of the algorithm. The class
comprises various functions that internally work together to
determine the shortest path. Additionally, it also handles the
visualization aspects of the algorithm, providing a comprehensive
solution for pathfinding. The modular design of the module allows for
easy integration and customization of the Dijkstra algorithm within
different projects, ensuring efficient pathfinding and visually
appealing representation.

• ADJACENCY-LIST.js
This JavaScript file serves as a core dependency, providing
essential functionality for managing adjacent nodes in a grid-based
environment. It includes a function called AdjacenList, which
efficiently retrieves and organizes the adjacent nodes for each grid
element. By utilizing the AdjacenList function, the file enables
convenient access to neighboring nodes, facilitating various
operations such as pathfinding, graph traversal, and network
analysis. Its inclusion ensures an optimized and streamlined
approach to handling adjacency relationships within a grid structure.

• INDEX.js
This JavaScript file serves as the central hub for managing all the
modules within the project. It plays a pivotal role in coordinating the
various modules, handling user events, and interacting with the
DOM (Document Object Model). By consolidating the functionality of
different modules, it provides a unified and streamlined approach to
managing user interactions and visualizations. Its responsibilities
include capturing user input, processing events, updating the DOM
dynamically, and ensuring smooth communication and
synchronization between different components. As the backbone of
the project's architecture, this file plays a crucial role in orchestrating
the seamless integration of modules and facilitating a cohesive user
experience.

The code snippets of above modules are given below.


table.html
Cell.js

Walls.js
AdjacencyList.js
Algorithm.js
Index.js
Style.css
WORKING

SELECTING START & TARGET NODES

DRAWING WALLS
VISUALIZING ANIMATION

DISPLAYING SHORTEST PATH


RESETING THE GRID

You might also like