Move Pathfinding algorithms to generator system to utilise requestAnimationFrame which significantly improves runtime performance

Author: A-Georgiou

src/algorithms/mazes/DFSMazeGeneration.ts

@@ -1,5 +1,4 @@
 import { Cell } from "../utils/PathfindingUtils";
-import { useMazeStore } from '../../hooks/useMazeStore';
 
 function getNeighbors(maze: Cell[][], cell: Cell): Cell[] {
     const neighbors: Cell[] = [];
@@ -30,9 +29,7 @@ function initialiseAllWalls(maze: Cell[][]): Cell[][] {
     );
 }
 
-export async function dfsMazeGeneration(startCell: Cell, endCell: Cell) {
-    const { maze, setMaze } = useMazeStore.getState();
-
+export async function dfsMazeGeneration(maze: Cell[][], startCell: Cell, endCell: Cell, setMaze: (arr: Cell[][]) => void): Promise<void> {
     let newMaze = initialiseAllWalls(maze);
     let stack = [newMaze[1][1]];
     newMaze[1][1].wall = false;

src/algorithms/pathfinding/DepthFirstSearch.ts

@@ -1,9 +1,11 @@
 import { Cell, getOptimalPath } from '../utils/PathfindingUtils';
-import { sleep } from '../utils/SleepTime';
+import { useMazeStore } from '../../hooks/useMazeStore';
 
-export async function DepthFirstSearch(maze: Cell[][], startCell: Cell, endCell: Cell, setMaze: (arr: Cell[][]) => void ): Promise<Cell[] | null> {
+// Define a generator function for depth-first search on the maze
+function* dfsGenerator(maze: Cell[][], startCell: Cell, endCell: Cell): Generator<Cell[][] | Cell[] | null, unknown> {
     const stack: Cell[] = [];
     const visited: boolean[][] = [];
+
     for (let row = 0; row < maze.length; row++) {
         visited[row] = [];
         for (let col = 0; col < maze[row].length; col++) {
@@ -22,27 +24,51 @@ export async function DepthFirstSearch(maze: Cell[][], startCell: Cell, endCell:
         }
 
         currentCell.visited = true;
-        
+
         if (currentCell.row === endCell.row && currentCell.col === endCell.col) {
             return getOptimalPath(maze, startCell, endCell);
         }
 
         let neighbors = getNeighbors(maze, currentCell);
 
         for (let neighbor of neighbors) {
-            if (neighbor.visited) {
-                continue;
+            if (!visited[neighbor.row][neighbor.col] && !neighbor.visited) {
+                neighbor.prev = currentCell;
+                stack.push(neighbor);
+                visited[neighbor.row][neighbor.col] = true;
+                maze[neighbor.row][neighbor.col].visited = true;
             }
-            neighbor.prev = currentCell;
-            stack.push(neighbor);
         }
-        await sleep(10);
-        setMaze([...maze]);
+        yield maze;
     }
 
-    return null;
+    yield null;
+}
+
+// Define a function to animate the depth-first search
+export async function DepthFirstSearch(startCell: Cell, endCell: Cell): Promise<Cell[] | null> {
+    const { maze, setMaze, populateOptimalPath } = useMazeStore.getState();
+    const generator = dfsGenerator(maze, startCell, endCell);
+
+    return new Promise((resolve) => {
+        function step() {
+            const result = generator.next();
+            if (result.done) {
+                const optimalPath = result.value as Cell[] | null;
+                if (optimalPath) {
+                    populateOptimalPath(optimalPath);
+                }
+                resolve(optimalPath);
+            } else {
+                setMaze(result.value as Cell[][]);
+                requestAnimationFrame(step);
+            }
+        }
+        requestAnimationFrame(step);
+    });
 }
 
+// Helper function to get the neighbors of a cell
 export function getNeighbors(cells: Cell[][], cell: Cell): Cell[] {
     const neighbors: Cell[] = [];
     const { row, col } = cell;

src/algorithms/pathfinding/Dijkstra.ts

@@ -1,9 +1,10 @@
-import { Cell, getNeighbors} from '../utils/PathfindingUtils';
-import { sleep } from '../utils/SleepTime';
+import { Cell, getNeighbors } from '../utils/PathfindingUtils';
+import { useMazeStore } from '../../hooks/useMazeStore';
 
-export async function Dijkstra(cells: Cell[][], startCell: Cell, endCell: Cell, setMaze: (arr: Cell[][]) => void ): Promise<Cell[]> {
+function* dijkstraGenerator(cells: Cell[][], startCell: Cell, endCell: Cell): Generator<Cell[][] | Cell[], unknown> {
     const queue: Cell[] = [];
     startCell.visited = true;
+    startCell.distance = 0;
     queue.push(startCell);
 
     while (queue.length > 0) {
@@ -24,11 +25,32 @@ export async function Dijkstra(cells: Cell[][], startCell: Cell, endCell: Cell,
                 }
             }
         }
-        await sleep(10);
-        setMaze([...cells]);
+        yield cells;
     }
 
-    return [];
+    yield [];
+}
+
+export async function Dijkstra(startCell: Cell, endCell: Cell):  Promise<Cell[] | null>{
+    const { maze, setMaze, populateOptimalPath } = useMazeStore.getState();
+    const generator = dijkstraGenerator(maze, startCell, endCell);
+
+    return new Promise((resolve) => {
+        function step() {
+            const result = generator.next();
+            if (result.done) {
+                const optimalPath = result.value as Cell[] | null;
+                if (optimalPath) {
+                    populateOptimalPath(optimalPath);
+                }
+                resolve(optimalPath);
+            } else {
+                setMaze(result.value as Cell[][]);
+                requestAnimationFrame(step);
+            }
+        }
+        requestAnimationFrame(step);
+    });
 }
 
 function getPath(endCell: Cell): Cell[] {
@@ -41,4 +63,4 @@ function getPath(endCell: Cell): Cell[] {
     }
 
     return path;
-}
+}

src/hooks/useMazeStore.ts

@@ -118,7 +118,7 @@ export const useMazeStore = create<MazeState>((set) => ({
     },
     moveNode: (row, col, nodeType) => {
         set((state) => {
-            const newMaze = state.maze.map((r, i) =>
+            const newMaze = state.maze.map((r) =>
                 r.map((c) => {
                     if (c.row === row && c.col === col) {
                         return { ...c, [nodeType]: true };

src/utils/pathfindingAlgorithmHooks.ts

@@ -43,18 +43,18 @@ const pathfindingAlgorithmHooks = ({
                     if (optimalPath) populateOptimalPath(optimalPath);
                 },
                 [Algorithm.DIJKSTRA]: async () => {
-                    const optimalPath = await Dijkstra(maze, startCell, endCell, setMaze);
+                    const optimalPath = await Dijkstra(startCell, endCell);
                     if (optimalPath) populateOptimalPath(optimalPath);
                 },
                 [Algorithm.DFS]: async () => {
-                    const optimalPath = await DepthFirstSearch(maze, startCell, endCell, setMaze);
+                    const optimalPath = await DepthFirstSearch(startCell, endCell);
                     if (optimalPath) populateOptimalPath(optimalPath);
                 },
                 [Algorithm.PRIMS_MAZE]: () => {
                     primsMazeGeneration(maze, startCell, endCell, setMaze);
                 },
                 [Algorithm.DFS_MAZE]: () => {
-                    dfsMazeGeneration(startCell, endCell);
+                    dfsMazeGeneration(maze, startCell, endCell, setMaze);
                 },
                 [Algorithm.KRUSKAL_MAZE]: () => {
                     kruskalsMazeGeneration(maze, startCell, endCell, setMaze);