This repository has been archived by the owner on Nov 29, 2024. It is now read-only.
forked from krnbatta/pathfinder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (94 loc) · 5.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pathfinder</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.jpg"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" type="text/javascript"></script>
<script src="https://kit.fontawesome.com/7785b04962.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="pathfinder">
<div id="header">
<div id="menu">
<a class="home" href="https://pf-algo-viz.org/">Home</a>
<a class="docs" href="https://krnbatta.github.io/pathfinder/#/">Docs</a>
<a class="app" href="https://pf-algo-viz.org/app">App</a>
<a class="about" href="https://pf-algo-viz.org/about">About Us</a>
</div>
<h3>PFAlgoViz: A Debugging Visualiser for Pathfinding Search</h3>
</div>
<div id="body">
<div id="info">
<p>
<b>PFAlgoViz</b> is a visualising debugging tool for pathfinding search. It can be used to visualise progression of search and debug pathfinding algorithms. It can handle range of different types of algorithms(demos are provided below). This tool is highly customizable and provide flexibility to visualise any algorithm trace that you can augment using our docs.
</p>
<hr>
<div class="examples">
<div class="example">
<h3><u>Grid-based pathfinding</u></h3>
<p>This is one of the most popular domain in pathfinding, especially in game development. The search space is quantised into cells or tiles and the agent can move to adjacent tiles only(maximum 8 directions) avoiding the negative search spaces(or more commonly called, walls). The image shows visualisation of jump point search algorithm whose implementation can be found in WARTHOG pathfinding library which supports a variety of grid-based pathfinding techniques.
<img src="images/jps.png" width="300" />
</p>
<b><u>Demos</u></b>
<div id="csc2f-astar"></div>
<div id="csc2f-jps"></div>
<div id="csc2f-anya"></div>
<div id="tfs-astar"><span class="large-map-error">[Large Map(slow to load)]</span></div>
</div>
<div class="example">
<h3><u>Bi-directional search</u></h3>
<p>In some cases, instead of standard single source a single destination, we might have multiple source as well as multiple target nodes. Bi-directional search is one of such examples. In this search, the source expands towards target and target also simultaneously expands towards the source. The image shows visualisation of bi-directional A* implementation. This can also be found in WARTHOG pathfinding library. In this example, the road network routing problem is solved using bi-directional pathfinding algorithm.
<img src="images/bi_dir_search.png" width="300" />
</p>
<b><u>Demos</u></b>
<div id="ny-astar"><span class="large-map-error">[Large Map(slow to load)]</span></div>
<div id="ny-bi-astar"><span class="large-map-error">[Large Map(slow to load)]</span></div>
</div>
<div class="example">
<h3><u>Path planning on a navigation mesh</u></h3>
<p>In grid-based algorithm, the search space was divided into tiles or rectangles. In case of navigation mesh, we have convex polygons. The agent can enter or exit this polygon at any angle. This means that contrary to discrete search space in case grids or graphs, we have a continuous search space. The image shows visualisation of Polyanya whcih is state-of-the-art algorithm for path finding problems on a navigation mesh. The implementation can be again found in WARTHOG.
<img src="images/polyanya.png" width="300" height="250" />
</p>
<b><u>Demos</u></b>
<div id="arena-polyanya"></div>
<div id="aurora-polyanya"><span class="large-map-error">[Large Map(slow to load)]</span></div>
</div>
<div class="example">
<h3><u>Graphs without embedding</u></h3>
<p>Intuitively we imagine the search algorithm to operate on some environment which can be input map or graph. But there are some cases in which we don't have such embeddings. Examples can be social network graphs or combinatorial problems like 8 tile puzzle or MAPF. The app is capable of visualising these categories as well. The image shows example of visualisation of tree layout without any x-y embedding.
<img src="images/jps_tree.png" width="300" />
</p>
<b><u>Demos</u></b>
<div id="jps-xy"></div>
<div id="jps-no-xy"></div>
<div id="tile-demo"></div>
<div id="mapf-demo"></div>
</div>
</div>
<hr>
<h2 id="demo-heading">Demos</h2>
<ul id="demo-list"></ul>
</div>
</div>
<div id="footer">
<p class="footer-monash">
Developed at Monash University
<img width='40px' height='40px' src="https://pf-algo-viz.org/images/monash.png">
</p>
<p class="footer-credits">
<span>
Ideation & Management: <b>Dr Daniel Harabor</b>, <b>Dr Michael Wybrow</b>
</span>
<span>Architecture & Development: <b>Karan Batta</b> - <a href="https://www.linkedin.com/in/krnbatta/" target="_blank"><i class="fab fa-linkedin"></i></a> <a href="https://github.com/krnbatta/pathfinder" target="_blank"><i class="fab fa-github-square"></i></a>
</span>
</p>
</div>
</div>
</body>
</html>