-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (91 loc) · 4.24 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A* pathfinding algorithm</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="index.js"></script>
</head>
<body>
<div id="workspace" class="z-0"></div>
<div class="d-flex flex-column flex-shrink-0 m-2 ms-auto h-100 z-1 card opacity-75" style="width: 400px;">
<div class="card-body">
<span class="display-6">A* algorithm</span>
<div class="d-flex justify-content-center m-2">
<div><a href="https://cubie.hu" class="link-secondary m-2">2023 cuBie</a></div>
<div><a href="https://github.com/BalazsM/sandbox-astar-js" class="link-primary m-2">source code</a></div>
</div>
<h5>Stats</h5>
<table class="table table-sm">
<tr>
<td>FPS</td>
<td id="simulationFPSDisplay" class="text-end"></td>
</tr>
<tr>
<td>Start position</td>
<td id="simulationStartPositionDisplay" class="text-end"></td>
</tr>
<tr>
<td>End position</td>
<td id="simulationEndPositionDisplay" class="text-end"></td>
</tr>
<tr>
<td>Path length</td>
<td id="simulationPathLengthDisplay" class="text-end"></td>
</tr>
</table>
<h5>Options</h5>
<table class="table table-sm">
<tr>
<td>Grid seed</td>
<td><input type="range" id="simulationGridSeedInput" class="form-range" min="0" max="100" value="50" step="1"
oninput="simulationGridSeedOutput.value = simulationGridSeedInput.value; simulationGridRegenerate = true;"></td>
<td class="text-end"><output id="simulationGridSeedOutput"></output></td>
</tr>
<tr>
<td>Grid wall rate</td>
<td><input type="range" id="simulationGridWallRateInput" class="form-range" min="0" max="1" value="0.3" step="0.01"
oninput="simulationGridWallRateOutput.value = simulationGridWallRateInput.value; simulationGridRegenerate = true;"></td>
<td class="text-end"><output id="simulationGridWallRateOutput"></output></td>
</tr>
<tr>
<td>Grid columns</td>
<td><input type="range" id="simulationGridColumnsInput" class="form-range" min="10" max="200" value="100" step="1"
oninput="simulationGridColumnsOutput.value = simulationGridColumnsInput.value"></td>
<td class="text-end"><output id="simulationGridColumnsOutput"></output></td>
</tr>
<tr>
<td>Grid rows</td>
<td><input type="range" id="simulationGridRowsInput" class="form-range" min="10" max="200" value="70" step="1"
oninput="simulationGridRowsOutput.value = simulationGridRowsInput.value"></td>
<td class="text-end"><output id="simulationGridRowsOutput"></output></td>
</tr>
<tr>
<td>Show closed set</td>
<td></td>
<td class="text-end"><input type="checkbox" id="simulationShowClosedSet"></td>
</tr>
<tr>
<td>Show open set</td>
<td></td>
<td class="text-end"><input type="checkbox" id="simulationShowOpenSet"></td>
</tr>
</table>
<h5>Help</h5>
<p>The code is based on <a href="https://codingtrain.github.io/AStar/">Daniel Shiffman's A* pathfinding tutorial</a></p>
<p>While moving cursor on grid you can hold keys down for various actions.</p>
<table class="table table-sm">
<tr><td class="text-end"><strong>s</strong></td><td>set start position</td></tr>
<tr><td class="text-end"><strong>e</strong></td><td>set end position</td></tr>
<tr><td class="text-end"><strong>w</strong></td><td>place wall</td></tr>
<tr><td class="text-end"><strong>a</strong></td><td>remove wall</td></tr>
<tr><td class="text-end"><strong>space</strong></td><td>toggle wall</td></tr>
</p>
</div>
</div>
</body>
</html>