Pathfinding-visualization/index.html at main · MarcBaeuerle/Pathfinding-visualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DLF29835G3"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-DLF29835G3');
    </script>
    <meta charset="utf-8">
    <meta name="author" content="Marc Baeuerle">
    <meta name="description" content="Educational Pathfinding Visualizer. A*, Breadth First Search, Depth First Search." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pathfinding Visualization</title>
    <link rel="stylesheet" href="styles.css" media="screen" type="text/css">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DLF29835G3"></script>
    <script type="module">
        import { createBoard } from "./board.js";

        createBoard();

    </script>

</head>

<body>

    <section id ="preload">
    </section>

    <section id="container">
        <section id="popup">
            <p>No path exists</p>
        </section>
        <div id="grid">


            <!--cells will be drawn here-->
        </div>
    </section>

    <section class="controlPanel">
        <div class="dropdown">
            <button>Search Algorithms</button>
            <div class="dropdown-content">
                <a id="astar" class="search radiusTop">A* Search</a>
                <a id="BFS" class="search">Breadth First Search</a>
                <a id="DFS" class="search">Depth First Search</a>
                <a id="RS" class="search radiusBottom">Random Search</a>
            </div>
        </div>
        <div class="dropdown">
            <button>Create Maze</button>
            <div class="dropdown-content">
                <a id="sparseRandMaze" class="maze randMaze radiusTop">Sparse Random Maze</a>
                <a id="denseRandMaze" class="maze randMaze radiusBottom">Dense Random Maze</a>
                <!-- <a id="recursiveMaze" class="maze ">Recursive Division Maze</a>
                <a id="primsAlgorithm" class="maze ">Prim's algorithm</a>
                <a id="kruskallsAlgorithm" class="maze radiusBottom">Kruskall's Algorithm</a> -->
            </div>
        </div>
        <div class="slider">
            <label for="speed"><p>Speed</p></label>
            <input type="range" id="speed" name="speed" min="0" max="0.999" step="any" value="0.9">

        </div>

        <button id="toggleWall" class="button1">Delete Wall</button>
        <button id="clear" class="button1">Clear Paths</button>
        <button id="clearBoard" class="button1">Clear Board</button>
        <div class="diagonal">
        </div>

    </section>
    <div class="box1"></div>
    <section id="console">

    </section>


    <section class="content">
        <h1>Path Finding algorithms</h1>
        <br>
        <ul>
            <li>
                <div class="GIF">
                    <video muted autoplay loop>
                        <source src="assets/astar.webm" alt="A* Pathfinding animation" loading="lazy">
                    </video>
                </div>
                <div class="container">
                    <h2>A* Search</h2>
                    <div class="text">
                        <p>A* is an informed search algorithm that uses a heuristic function to evaluate nodes by
                            combining the cost of reaching the
                            node
                            (G
                            cost), with an estimate of the cost required to reach to end point (H cost) to give us the F
                            cost.
                            A* explores the most promising nodes first and guarantees optimal pathfinding.</p>
                    </div>
                    <section class="links">
                        <a target="_blank" rel="noopener noreferrer"
                            href="https://github.com/MarcBaeuerle/PathFinding/blob/main/algorithms/aStar.js"><img
                                class="blueFilter" src="assets/github_icon.png" width="30" height="30" alt="github logo"></a>
                        <a target="_blank" rel="noopener noreferrer"
                            href="http://theory.stanford.edu/~amitp/GameProgramming/AStarComparison.html#the-a-star-algorithm"><img
                                class="blueFilter" src="assets/newTab.png" width="30" height="30" alt="other resources icon"></a>
                    </section>
                </div>
            </li>
            <li class="leftLi">
                <div class="GIF">
                    <video muted autoplay loop>
                        <source src="assets/bfs.webm" alt="BFS Pathfinding animation" loading="lazy">
                    </video>
                </div>
                <div class="container">
                    <h2>Breadth First Search</h2>
                    <div class="text">
                        <p>Like A*, BFS guarantees the shortest path between two points by exploring all the nodes at
                            the current depth from the start point before moving on to the nodes at the next depth. BFS
                            uses a queue to keep track of nodes to be explored, which ensures that nodes are visited in
                            the order they are discovered. </p>
                    </div>
                    <section class="links">
                        <a target="_blank" rel="noopener noreferrer"
                            href="https://github.com/MarcBaeuerle/PathFinding/blob/main/algorithms/BFS.js"><img
                                class="blueFilter" src="assets/github_icon.png" width="30" height="30" alt="github logo"></a>
                        <a target="_blank" rel="noopener noreferrer"
                            href="https://techbum.io/breadth-first-search-graph-traversal-patterns/"><img
                                class="blueFilter" ; src="assets/newTab.png" width="30" height="30" alt="other resources icon"></a>
                    </section>
                </div>
            </li>
            <li>
                <div class="GIF">
                    <video muted autoplay loop>
                        <source src="assets/dfs.webm" alt="DFS Pathfinding animation" loading="lazy">
                    </video>
                </div>
                <div class="container">
                    <h2>Depth First Search</h2>
                    <div class="text">
                        <p>Unlike the previous two algorithms, DFS only guarantees a path between two points if it
                            exists by exploring as far as possible along along each path before backtracking. DFS uses a
                            stack to keep track of nodes to be explored which means it visits nodes in the order they
                            were added to the stack.
                        </p>
                    </div>
                    <section class="links">
                        <a target="_blank" rel="noopener noreferrer"
                            href="https://github.com/MarcBaeuerle/PathFinding/blob/main/algorithms/DFS.js"><img
                                class="blueFilter" src="assets/github_icon.png" width="30" height="30" alt="github logo"></a>
                        <a target="_blank" rel="noopener noreferrer" href="https://www.programiz.com/dsa/graph-dfs"><img
                                class="blueFilter" src="assets/newTab.png" width="30" height="30" alt="other resources icon"></a>
                    </section>
                </div>
            </li>
            <li class="leftLi">
                <div class="GIF">
                    <video muted autoplay loop>
                        <source src="assets/RS.webm" alt="RS Pathfinding animation" loading="lazy">
                    </video>
                </div>
                <div class="container">
                    <h2>Random Search</h2>
                    <div class="text">
                        <p>This algorithm is very similar to DFS, in which it guarantees a path between two points by
                            using a stack to explore nodes. However, instead of the adding each node visited to the
                            stack in the same order, it randomizes the order that the nodes are inserted. This produces
                            a unique and chaotic exploration with each search.
                        </p>
                    </div>
                    <section class="links">
                        <a target="_blank" rel="noopener noreferrer"
                            href="https://github.com/MarcBaeuerle/PathFinding/blob/main/algorithms/RS.js"><img
                                class="blueFilter" src="assets/github_icon.png" width="30" height="30" alt="github logo"></a>
                    </section>
                </div>
            </li>


        </ul>
    </section>

    <footer>
        <p>Built and designed by Marc Baeuerle</p>

        <!-- <a target="_blank" rel="noopener noreferrer"
                            href="https://github.com/MarcBaeuerle"><img
                                src="assets/github_icon.png"></a> -->

        <p>Project Hosted on <a href="https://github.com/MarcBaeuerle/PathFinding">Github</a></p>

    </footer>

</body>

</html>