Features

Features are divided into 2 categories:

• UI features
• Functionality features

UI features

1. Auto adjustable grid

The grid is auto adjustable. It means the number of total rows and total columns in the grid will increase or decrease with width of the window. Just resize the window and reload the page.

code link:

const height = window.innerHeight * 0.8;
const width = window.innerWidth * 0.9;
const cellSize = 25;
export const totalRows = Math.floor(height / cellSize) - 1;
export const totalCols = Math.floor(width / cellSize) - 1;

2. Background

For background, a javascript library is used, called, particles.js

Files src/partcles.js and src/app.js are used to add the library.

3. Draggable Instruction and Algorithm bar.

The instruction bar and the algorithm side-bar are both draggable to drag anywhere in the window.

Code link in file src/script.js

Resource reference: https://www.w3schools.com/howto/howto_js_draggable.asp

4. Minimize the Instruction bar using its dropdown icon.

The dropdown icon of the instruction bar is animated to toggle between up arrow and down arrow on maximizing or minimizing the bar respectively.

---

Functionality Features

1. Algorithms

To help the Mars rover to find the shortest path, 4 shortest-path algorithms are implemented (more details on separate pages of each algorithm).

• A star
• Greedy Best-First Search
• Dijkstra Algorithm
• Breadth-First Search

2. Diagonal movement option

A custom bootstrap checkbox is added which if checked will allow diagonal movement or else if unchecked, the path will only take horizontal or verticle direction.

This is achieved using the direction vectors:

// direction vectors
// 0-3: East, South, West, North
// 4-7: South-East, North-East, South-West, North-West
const dx = [1, 0, -1, 0, 1, 1, -1, -1];
const dy = [0, 1, 0, -1, 1, -1, 1, -1];

If 'Allow diagonals' is checked, the loop will iterate a length of 8 to generate neighbour coordinates in all 8 direction (excluding walls) and if 'Allow diagonal is false, iterate from index 0 to 3 (both inclusive) of both dx and dy to generate neighbouring coordinates in 4 directions (East, South, West, North).

Code link in file src/utility.js

3. Timer and Distance count in each algorithm

A timer is added to each algorithm to compare the time taken to reach from start point to the endpoint by different algorithms. The logic used in timer is that the difference between two timestamps in javascript Date() class returns the difference in time in milliseconds which is converted to minutes, seconds and milliseconds.

Example:

let startTime = new Date();
> undefined
let now = new Date();
> undefined

// diff is difference of time in milliseconds
let diff = now - startTime;
> 14475

File src/timer.js

The Distance Count is the distance of the shortest path formed from the endpoint to start point. It increments in real-time as the shortest path backtracks from the end node to the start node and then updates using countLength() function.

Code link

4. Reset start node and end node

The user can click and drag the start and end node to reset their position.