Skip to content

Commit 7ef4636

Browse files
Path Finiding BFS
1 parent 5602480 commit 7ef4636

File tree

7 files changed

+392
-28
lines changed

7 files changed

+392
-28
lines changed

Path Finding A* Algorithm/sketch.js

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
function removeFromArray(arr, elt) {
2-
for (var i = arr.length - 1; i >= 0; i--) {
3-
if (arr[i] == elt) {
4-
arr.splice(i, 1);
5-
}
6-
}
7-
}
8-
9-
function heuristic(a, b) {
10-
var d = dist(a.i, a.j, b.i, b.j);
11-
return d;
12-
}
13-
141
var cols = 50;
152
var rows = 50;
163

@@ -152,11 +139,11 @@ function draw() {
152139
}
153140

154141
for (var i = 0; i < closedSet.length; i++) {
155-
closedSet[i].show(color(255, 0, 0, 50));
142+
closedSet[i].show(color(255, 10, 255, 50));
156143
}
157144

158145
for (var i = 0; i < openSet.length; i++) {
159-
openSet[i].show(color(0, 255, 0, 50));
146+
openSet[i].show(color(10, 255, 0, 50));
160147
}
161148

162149

@@ -190,4 +177,18 @@ function draw() {
190177
}
191178
}
192179

180+
}
181+
182+
183+
function removeFromArray(arr, elt) {
184+
for (var i = arr.length - 1; i >= 0; i--) {
185+
if (arr[i] == elt) {
186+
arr.splice(i, 1);
187+
}
188+
}
189+
}
190+
191+
function heuristic(a, b) {
192+
var d = dist(a.i, a.j, b.i, b.j);
193+
return d;
193194
}

Path Finding A* Algorithm/spot.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
function Spot(i, j) {
1+
class Spot {
2+
constructor(i, j) {
23

34
// Location
45
this.i = i;
56
this.j = j;
6-
7+
78
// f, g, and h values for A*
89
this.f = 0;
910
this.g = 0;
1011
this.h = 0;
11-
12+
1213
// Neighbors
1314
this.neighbors = [];
14-
15+
1516
// Where did I come from?
1617
this.previous = undefined;
17-
18+
1819
// Am I a wall?
1920
this.wall = false;
2021
if (random(1) < 0.4) {
2122
this.wall = true;
2223
}
23-
24+
2425
// Display me
25-
this.show = function(col) {
26+
this.show = function (col) {
2627
if (this.wall) {
2728
fill(0);
2829
noStroke();
@@ -31,10 +32,10 @@ function Spot(i, j) {
3132
fill(col);
3233
rect(this.i * w, this.j * h, w, h);
3334
}
34-
}
35-
35+
};
36+
3637
// Figure out who my neighbors are
37-
this.addNeighbors = function(grid) {
38+
this.addNeighbors = function (grid) {
3839
var i = this.i;
3940
var j = this.j;
4041
if (i < cols - 1) {
@@ -61,5 +62,6 @@ function Spot(i, j) {
6162
if (i < cols - 1 && j < rows - 1) {
6263
this.neighbors.push(grid[i + 1][j + 1]);
6364
}
64-
}
65-
}
65+
};
66+
}
67+
}

Path Finding BFS/index.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>BFS Path Finding Algorithm</title>
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<meta name="Description" content="Enter your description here" />
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
11+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
14+
<script src="sketch.js"></script>
15+
<script src="spot.js"></script>
16+
<style>
17+
.bg-custom-1 {
18+
background-color: #85144b;
19+
}
20+
21+
.bg-custom-2 {
22+
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
23+
}
24+
25+
.promoting-card:hover {
26+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
27+
}
28+
29+
.container {
30+
padding: 10px;
31+
}
32+
33+
.btn {
34+
margin-right: 20px;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<nav class="navbar navbar-dark navbar-expand-md bg-custom-2">
41+
<div class="container"><a class="navbar-brand" href="/">Visualizing Algorithms</a></div>
42+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav1"
43+
aria-controls="basicExampleNav1" aria-expanded="false" aria-label="Toggle navigation">
44+
<span class="navbar-toggler-icon"></span>
45+
</button>
46+
<div class="collapse navbar-collapse container" id="basicExampleNav1">
47+
48+
<ul class="navbar-nav ml-auto">
49+
<li class="breadcrumb-item"><a class="waves-effect" href="/" style="color:black">Home</a></li>
50+
<li class="breadcrumb-item"><a class="waves-effect" href="/aboutUs.html" style="color:black">About
51+
Us</a></li>
52+
<li class="breadcrumb-item"><a class="waves-effect" href="/contactUs.html" style="color:black">Contact
53+
Us</a></li>
54+
</ul>
55+
</div>
56+
</nav>
57+
58+
<div class="container" id="buttonsBeforeCanvas">
59+
</div>
60+
<div class="container" id="canvas">
61+
</div>
62+
63+
64+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
65+
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
66+
crossorigin="anonymous"></script>
67+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
68+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
69+
crossorigin="anonymous"></script>
70+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
71+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
72+
crossorigin="anonymous"></script>
73+
</body>
74+
75+
</html>

Path Finding BFS/sketch.js

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
var cols = 50;
2+
var rows = 50;
3+
4+
var grid = new Array(cols);
5+
6+
var openSet = [];
7+
var closedSet = [];
8+
9+
var start;
10+
var end;
11+
12+
var w, h;
13+
var isStart;
14+
var path = [];
15+
16+
function setup() {
17+
createCanvas(600, 600).parent("canvas");
18+
var button = createButton("Start");
19+
button.parent("buttonsBeforeCanvas");
20+
button.class("btn btn-success");
21+
var reset = createButton("Reset");
22+
reset.parent("buttonsBeforeCanvas");
23+
reset.class("btn btn-danger");
24+
reset.mousePressed(() => {
25+
cols = 50;
26+
rows = 50;
27+
28+
grid = new Array(cols);
29+
30+
openSet = [];
31+
closedSet = [];
32+
33+
start = undefined;
34+
end = undefined;
35+
36+
isStart = undefined;
37+
path = [];
38+
init();
39+
draw();
40+
// openset =
41+
})
42+
button.mousePressed(() => {
43+
isStart = true;
44+
draw();
45+
});
46+
init();
47+
}
48+
49+
function init() {
50+
w = width / cols;
51+
h = height / rows;
52+
53+
for (var i = 0; i < cols; i++) {
54+
grid[i] = new Array(rows);
55+
}
56+
57+
for (var i = 0; i < cols; i++) {
58+
for (var j = 0; j < rows; j++) {
59+
grid[i][j] = new Spot(i, j);
60+
}
61+
}
62+
3002
63+
for (var i = 0; i < cols; i++) {
64+
for (var j = 0; j < rows; j++) {
65+
grid[i][j].addNeighbors(grid);
66+
}
67+
}
68+
69+
70+
start = grid[0][0];
71+
end = grid[cols - 1][rows - 1];
72+
start.wall = false;
73+
end.wall = false;
74+
75+
openSet.push(start);
76+
}
77+
function draw() {
78+
79+
if (isStart) {
80+
if (openSet.length > 0) {
81+
82+
var winner = 0;
83+
for (var i = 0; i < openSet.length; i++) {
84+
if (openSet[i].f < openSet[winner].g+1) {
85+
winner = i;
86+
}
87+
}
88+
var current = openSet[winner];
89+
90+
if (current === end) {
91+
noLoop();
92+
console.log("DONE!");
93+
return;
94+
}
95+
loop();
96+
removeFromArray(openSet, current);
97+
closedSet.push(current);
98+
99+
var neighbors = current.neighbors;
100+
for (var i = 0; i < neighbors.length; i++) {
101+
var neighbor = neighbors[i];
102+
103+
if (!closedSet.includes(neighbor) && !neighbor.wall) {
104+
var tempG = current.g + 1;
105+
106+
var newPath = false;
107+
if (openSet.includes(neighbor)) {
108+
if (tempG < neighbor.g) {
109+
neighbor.g = tempG;
110+
newPath = true;
111+
}
112+
} else {
113+
neighbor.g = tempG;
114+
newPath = true;
115+
openSet.push(neighbor);
116+
}
117+
118+
if (newPath) {
119+
neighbor.h = heuristic(neighbor, end);
120+
neighbor.f = neighbor.g + neighbor.h;
121+
neighbor.previous = current;
122+
}
123+
}
124+
125+
}
126+
} else {
127+
console.log('no solution');
128+
noLoop();
129+
return;
130+
}
131+
132+
133+
background(255);
134+
135+
for (var i = 0; i < cols; i++) {
136+
for (var j = 0; j < rows; j++) {
137+
grid[i][j].show();
138+
}
139+
}
140+
141+
for (var i = 0; i < closedSet.length; i++) {
142+
closedSet[i].show(color(255, 10, 255, 50));
143+
}
144+
145+
for (var i = 0; i < openSet.length; i++) {
146+
openSet[i].show(color(10, 255, 0, 50));
147+
}
148+
149+
150+
path = [];
151+
var temp = current;
152+
path.push(temp);
153+
while (temp.previous) {
154+
path.push(temp.previous);
155+
temp = temp.previous;
156+
}
157+
158+
159+
160+
noFill();
161+
stroke(255, 0, 200);
162+
strokeWeight(w / 2);
163+
beginShape();
164+
for (var i = 0; i < path.length; i++) {
165+
vertex(path[i].i * w + w / 2, path[i].j * h + h / 2);
166+
}
167+
endShape();
168+
169+
}
170+
else {
171+
background(255);
172+
173+
for (var i = 0; i < cols; i++) {
174+
for (var j = 0; j < rows; j++) {
175+
grid[i][j].show();
176+
}
177+
}
178+
}
179+
180+
}
181+
182+
183+
function removeFromArray(arr, elt) {
184+
for (var i = arr.length - 1; i >= 0; i--) {
185+
if (arr[i] == elt) {
186+
arr.splice(i, 1);
187+
}
188+
}
189+
}
190+
191+
function heuristic(a, b) {
192+
var d = dist(a.i, a.j, b.i, b.j);
193+
return d;
194+
}

0 commit comments

Comments
 (0)