A*, Dijkstra, DFS, BFS, Maze Generator visualizer

Ground work done
Final touch up left

Author: TilakTejani

algorithms.js

@@ -0,0 +1,230 @@
+let dirIndication = ["r", "d", "l", "u"]
+
+let sleep = (sec = 100) => {
+    return new Promise(x => setTimeout(x, sec))
+}
+
+async function createMazeGoTo(node, from, isVisited = new Map()){
+    node.addClass("cur")
+    node.removeClass("wall")
+    let fromdir = {"left" : 0, "up" : 1, "right" : 2, "down" : 3}
+    let todir = {0 : "right", 1 : "down", 2 : "left", 3 : "up"}
+    
+    let shuffle = (arr) => {
+        let n = arr.length
+        for(let i = n - 1 ; i >= 0 ; i--){
+            let rand = Math.floor(Math.random() * (i + 1))
+            let temp = arr[i]
+            arr[i] = arr[rand]
+            arr[rand] = temp
+        }
+        return arr
+    }
+    
+    if(!isVisited[node]){
+        isVisited.set(node, true)
+        node.removeWall(fromdir[from])
+        let random = shuffle([0,1,2,3])
+        for(let i = 0 ; i < random.length ; ++i){
+
+
+            await sleep(1)
+            
+            
+            if(node.neighbors[random[i]] && !isVisited.get(node.neighbors[random[i]])){
+                node.removeWall(random[i])
+                node.removeClass("cur")
+                await createMazeGoTo(node.neighbors[random[i]], todir[random[i]], isVisited)
+                node.addClass("cur")
+            }
+        }
+    }
+    
+    node.removeClass("cur")
+}
+
+
+async function BFSsearch(maze, start, end, isDone = new Map(), parent = new Map(), dis = new Map(), dir = new Map()){
+    
+    let queue = new Array()
+    queue.push(start)
+    dis.set(start, 0)
+    parent.set(start, undefined)
+    
+    while(queue.length){
+        let node = queue.shift()
+        if(!isDone.get(node)){
+
+            await sleep(10)
+            isDone.set(node, true)
+            node.addClass("searching")
+            
+            if(node == end){
+                await backtrack(end, start, parent, dir)
+                break;
+            }
+            
+
+            for(let i = 0 ; i < node.sides ; ++i){
+                if(!node.border[i] && node.neighbors[i] && !isDone.get(node.neighbors[i])){
+                    if(!dis.get(node.neighbors[i]) || dis.get(node.neighbors[i]) > dis.get(node) + 1){
+                        parent.set(node.neighbors[i], node)
+                        dis.set(node.neighbors[i], dis[node] + 1)
+                        dir.set(node.neighbors[i], dirIndication[i])
+                    }
+                    queue.push(node.neighbors[i])
+                }
+            }
+        }
+    }
+}
+
+async function dijkstraSearch(maze, start, end, isDone = new Map(), parent = new Map(), dis = new Map(), dir = new Map()){
+    
+    // start.addClass("startNode")
+    // end.addClass("endNode")
+    
+    let queue = new Array()
+    queue.push(start)
+    dis.set(start, 0)
+    parent.set(start, undefined)
+    
+    while(queue.length){
+        let node = queue.shift()
+        if(!isDone.get(node)){
+            await sleep(10)
+            isDone.set(node, true)
+            node.addClass("searching")
+            
+            if(node == end){
+                await backtrack(end, start, parent, dir)
+                break;
+            }
+            
+
+            for(let i = 0 ; i < node.sides ; ++i){
+                if(!node.border[i] && node.neighbors[i] && !isDone.get(node.neighbors[i])){
+                    if(!dis.get(node.neighbors[i]) || dis.get(node.neighbors[i]) > dis.get(node) + 1){
+                        parent.set(node.neighbors[i], node)
+                        dis.set(node.neighbors[i], dis[node] + 1)
+                        dir.set(node.neighbors[i], dirIndication[i])
+                    }
+                    queue.push(node.neighbors[i])
+                }
+            }
+        }
+    }
+}
+
+async function AstarSearch(maze, start, end, isDone = new Map(), gscore = new Map(), fscore = new Map(), parent = new Map(), dir = new Map()){
+    let dis = (x, y) => {
+        return Math.hypot(x.i - y.i, x.j - y.j)
+    }
+
+    let getMin = (openSet, fscore) => {
+        let min = Math.min(...openSet.map(el => fscore.get(el)))
+
+        for(let i = 0 ; i < openSet.length ; i++){
+            if(fscore.get(openSet[i]) == min){
+                let ans = openSet[i]
+                openSet.splice(i, 1)
+                return ans
+            }
+        }
+    }
+
+    let openSet = []
+    
+    openSet.push(start)
+    
+    parent.set(start, undefined)
+    gscore.set(start, 0)
+    fscore.set(start, dis(start, end))
+    isDone.set(start, true)
+    while(openSet.length){
+        let curr = getMin(openSet, fscore)
+        curr.addClass("searching")
+        if(curr == end){
+            await backtrack(end, start, parent, dir)
+            return 
+        }
+
+        isDone.set(curr, true)
+        
+        for(let i = 0 ; i < curr.border.length ; ++i){
+            await sleep(10)
+            
+            let n = curr.neighbors[i]
+            if(n && !curr.border[i] && !isDone.get(n)){
+                let tempG = gscore.get(curr) + dis(curr, n)
+
+                if(!gscore.get(n) || tempG < gscore.get(n)){
+                    parent.set(n, curr)
+                    dir.set(n, dirIndication[i])
+                    gscore.set(n, tempG)
+                    fscore.set(n, gscore.get(n) + dis(n, end))
+                    
+                }
+
+                if(!(openSet.find(el => el == n))) {
+                    openSet.push(n)
+                }
+            }
+        }
+    }
+}
+
+async function DFSsearch(maze, node, end, isDone = new Map(), parent = new Map(), dis = new Map(), dir = new Map()){
+    if(node == end){
+        await backtrack(end, start, parent, dir)
+        return true
+    }
+    if(isDone.get(node)){
+        return
+    }
+    isDone.set(node, true)
+    
+    node.addClass("searching")
+    await sleep(10)
+
+    for(let i = 0; i < node.sides ; ++i){
+        if(!node.border[i] && node.neighbors[i] && !isDone.get(node.neighbors[i])){
+            if((!dis.get(node) || dis.get(node[i]) + 1 > dis.get(node.neighbors[i]))){
+                dis.set(node.neighbors[i], dis.get(node) + 1)
+                parent.set(node.neighbors[i], node)
+                dir.set(node.neighbors[i], dirIndication[i])
+            }
+            if(await DFSsearch(maze, node.neighbors[i], end, isDone, parent ,dis, dir))
+                return true
+        }
+    }
+}
+
+async function backtrack(end, start, parent, dir){
+    let node = end
+    let to = ""
+    while(node){
+        await sleep(10)
+        
+        node.removeClass("searching")
+        node.addClass("inWay")
+        node.el.innerHTML = to
+        switch(dir.get(node)){
+            case "u":
+                to = '🠋'
+                break;
+            case "d":
+                to = '🠉'
+                break;
+            case "r":
+                to = '🠈'
+                break;
+            case "l":
+                to = '🠊'
+                break;
+        }
+
+        node = parent.get(node)
+    }
+
+}

index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maze Path Finding Algo</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div id="inputSection">
+        <!-- <button class ="button" onclick = "start()">Start</button> -->
+        <!-- <section>
+            <label for="nums">Enter nums:</label>
+            <div style="position: relative;height: 56px">
+                <input type="range" min = "10" max = "1000" id= "range" value = "35" oninput="updateView();updateInput()" disabled = true/>
+                <div id="rangeSelector">
+                    <div id = "selectorBtn"></div>
+                    <div id = "rangeDisplayer"></div>
+                </div>
+            </div>
+            <script>
+                updateView()
+                function updateView(){
+                    var slider = document.getElementById("range")
+                    var selector = document.getElementById("rangeSelector")
+                    var display = document.getElementById("rangeDisplayer")
+                    selector.style.left = (slider.value - 10)/990 * 100 + '%';
+                    display.innerHTML = slider.value
+                }
+            </script>
+        </section> -->
+        <section>
+            <label for="algoUsed" >Algorithm Used</label>
+            <select class ="select" name = "algoUsed" id = "algoUsed" oninput="updateInput()">
+                <option value = "bfs" >BFS search</option>
+                <option value = "dijkstra">dijkstra search</option>
+                <option value = "astar" selected>A* search</option>
+                <option value = "dfs" >DFS search</option>
+            </select>
+        </section>
+        <section>
+            <button id = "start" class = "button" onclick = "start()">start</button>
+            <button id = "generateMaze" class = "button" onclick = "generateMaze()">generate Maze</button>
+            <button id = "clearMaze" class = "button" onclick = "clearMaze()">clear Maze</button>
+            <button id = "clearMaze" class = "button" onclick = "newMaze()">new Maze</button>
+        </section>
+    </div>
+
+    <div id="mazeContainer"><table id="maze"> </table></div>
+
+    <script src="obj.js"></script>
+    <script src="algorithms.js"></script>
+    <script src="main.js"></script>
+</body>
+</html>

main.js

@@ -0,0 +1,80 @@
+let maze
+
+// const rowCount = 20
+// const colCount = 62
+let startNode, endNode
+
+const rowCount = 20
+const colCount = 20
+
+let getId = (i, j) => {
+    return  i +"-"+j
+}
+let getrowId = (i) =>{
+    return "row " + i   
+}
+let getStyle = (i, j, rows, cols) => {
+    return ""
+}
+
+preCompute()
+function preCompute(){
+    
+    maze = new Maze(rowCount, colCount)
+    maze.setStartNode(Math.floor(rowCount/4),Math.floor(colCount/4))
+    maze.setEndNode(Math.floor(rowCount/4),Math.floor(3 *colCount/4))
+    // generateMaze()
+}
+
+
+
+
+function start(){
+    let algoUsed = document.getElementById("algoUsed").value
+    switch(algoUsed){
+        case "bfs":
+            BFSsearch(maze, maze.startNode, maze.endNode)
+            break
+        case "dijkstra":
+            dijkstraSearch(maze, maze.startNode, maze.endNode)
+            break
+        case "astar":
+            AstarSearch(maze, maze.startNode, maze.endNode)
+            break
+        case "dfs":
+            DFSsearch(maze, maze.startNode, maze.endNode)
+            break
+
+    }
+}
+
+function updateInput(){
+
+}
+ 
+function generateMaze(){
+    newMaze()
+    maze.matrix.forEach(row => {
+        row.forEach(node => {
+            node.addWall(0)
+            node.addWall(1)
+            node.addWall(2)
+            node.addWall(3)
+            node.addClass("wall")
+        })
+    })
+    createMazeGoTo(maze.matrix[0][0], "up")
+}
+
+// function to clear all visited non visited for new algorithm
+function clearMaze(){
+    maze.clearMaze()
+}
+
+function newMaze(){
+    maze.newMaze()
+    maze.setStartNode(Math.floor(rowCount/4),Math.floor(colCount/4))
+    maze.setEndNode(Math.floor(rowCount/4),Math.floor(3 *colCount/4))
+}
+
+