Skip to content

Commit

Permalink
Insert R2+, BFS, DFS, Dijkstra
Browse files Browse the repository at this point in the history
  • Loading branch information
@LaiYanKai
LaiYanKai committed Jun 9, 2024
1 parent 80509e5 commit 2261315
Show file tree
Hide file tree
Showing 40 changed files with 6,777 additions and 402 deletions.
8 changes: 1 addition & 7 deletions PlannersJS/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
# PlannersJS

Only A* works for now.

Lacking lenses, and animated tables.
Lenses are for displaying rainbow colors of costs, like the heatmap in R and colormap in MATLAB.
Animated tables are for displaying the evolution of the open list, pseudocode, and to show miscellaneous statuses.
# PlannersJS
28 changes: 2 additions & 26 deletions PlannersJS/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
<div class="cursor-start"></div>
<div class="cursor-goal"></div>
</div>
<div class="sprites">
</div>
</div>
</div>
<div class="footer">© National University of Singapore, Lai Yan Kai</div>
Expand All @@ -35,32 +37,6 @@
<div class="overlay"></div>
<div class="dialog"></div>

<!-- <script type="text/javascript" src="./scripts/globals.js"></script>
<script type="text/javascript" src="./scripts/utils/utils.js"></script>
<script type="text/javascript" src="./scripts/utils/raytracer.js"></script>
<script type="text/javascript" src="./scripts/graph/layers/cells.js"></script>
<script type="text/javascript" src="./scripts/graph/layers/cursors.js"></script>
<script type="text/javascript" src="./scripts/graph/layers/layers.js"></script>
<script type="text/javascript" src="./scripts/graph/rulers.js"></script>
<script type="text/javascript" src="./scripts/graph/graph.js"></script>
<script type="text/javascript" src="./scripts/toolbar/tools.js"></script>
<script type="text/javascript" src="./scripts/toolbar/tool_alg.js"></script>
<script type="text/javascript" src="./scripts/toolbar/toolbar.js"></script>
<script type="text/javascript" src="./scripts/dialog/forms.js"></script>
<script type="text/javascript" src="./scripts/dialog/form_new_map.js"></script>
<script type="text/javascript" src="./scripts/dialog/form_alg.js"></script>
<script type="text/javascript" src="./scripts/dialog/dialog.js"></script>
<script type="text/javascript" src="./scripts/overlay.js"></script>
<script type="text/javascript" src="./scripts/tooltip/tooltip.js"></script>
<script type="text/javascript" src="./scripts/keybinder/keybinder.js"></script>
<script type="text/javascript" src="./scripts/player/sprites.js"></script>
<script type="text/javascript" src="./scripts/player/canvas.js"></script>
<script type="text/javascript" src="./scripts/player/player.js"></script>
<script type="text/javascript" src="./scripts/algs/parameters.js"></script>
<script type="text/javascript" src="./scripts/algs/containers.js"></script>
<script type="text/javascript" src="./scripts/algs/algs.js"></script>
<script type="text/javascript" src="./scripts/algs/astar.js"></script>
<script type="text/javascript" src="./scripts/ui.js"></script> -->
<script type="text/javascript" src="./scripts/main.js"></script>
</body>

Expand Down
32 changes: 25 additions & 7 deletions PlannersJS/scripts/algs/algs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,27 @@ Algs.AbstractPriorityQueueNode = class extends Algs.AbstractNode {
}
}


Algs.AbstractQueueNode = class extends Algs.AbstractNode {
queued;

constructor(coord, num_costs, sprite) {
super(coord, num_costs, sprite)
this.queued = false;
}
};
Algs.AbstractStackNode = class extends Algs.AbstractNode {
queued;

constructor(coord, num_costs, sprite) {
super(coord, num_costs, sprite)
this.queued = false;
}
};


Algs.AbstractAlg = class {
params;
steps;
#canvases;
#lenses;
default_lens_idx;
Expand Down Expand Up @@ -187,7 +205,7 @@ Algs.GridAlgNeighbor = class {
this.didx = didx;
this.dir = Utils.dirIndexToDir(didx);
this.is_cardinal = Utils.isCardinal(didx);
this.metric_length = metric_function(this.dir);
this.metric_length = metric_function == null ?1:metric_function(this.dir);
this.adj_cell_dir = Utils.adjCellFromVertex([0, 0], this.dir);
this.in_map = null;
this.cell_lethal = null;
Expand Down Expand Up @@ -398,18 +416,18 @@ Algs.AbstractGridAlg = class extends Algs.AbstractAlg {

#nbCellInfosC(exp_node) {
for (const neighbor of this.#neighbors) {
const neighbor_cell_coord = Utils.addCoord(exp_node.coord, neighbor.dir);
const neighbor_cell_coord = Utils.addCoords(exp_node.coord, neighbor.dir);
neighbor.in_map = this.inMap(neighbor_cell_coord);
this.#nbCellInfo(neighbor_cell_coord, neighbor);
}
}

#nbCellInfosV(exp_node) {
for (const neighbor of this.#neighbors) {
const neighbor_vertex_coord = Utils.addCoord(exp_node.coord, neighbor.dir);
const neighbor_vertex_coord = Utils.addCoords(exp_node.coord, neighbor.dir);
neighbor.in_map = this.inMap(neighbor_vertex_coord);
if (!neighbor.is_cardinal) {
const neighbor_cell_coord = Utils.addCoord(exp_node.coord, neighbor.adj_cell_dir);
const neighbor_cell_coord = Utils.addCoords(exp_node.coord, neighbor.adj_cell_dir);
this.#nbCellInfo(neighbor_cell_coord, neighbor);
}
}
Expand Down Expand Up @@ -533,7 +551,7 @@ Algs.AbstractGridAlg = class extends Algs.AbstractAlg {
neighbor.node_chblocked = false;
}
else { // check for checkerboard acceess
const parent_dir = Utils.subtractCoord(exp_node.parent.coord, exp_node.coord);
const parent_dir = Utils.subtractCoords(exp_node.parent.coord, exp_node.coord);

const [nb_bl, nb_br] = this.#BLAndBRNeighbors(neighbor);

Expand Down Expand Up @@ -565,7 +583,7 @@ Algs.AbstractGridAlg = class extends Algs.AbstractAlg {
neighbor.node_chblocked = false;
}
else { // not a start node, check for checkerboard access
const parent_dir = Utils.subtractCoord(exp_node.parent.coord, exp_node.coord);
const parent_dir = Utils.subtractCoords(exp_node.parent.coord, exp_node.coord);
const [nb_l, nb_r] = this.#LAndRNeighbors(neighbor);
neighbor.node_chblocked = (!nb_l.cell_access && !nb_r.cell_access && Utils.dotCoords(parent_dir, neighbor.dir) < 0);

Expand Down
44 changes: 21 additions & 23 deletions PlannersJS/scripts/algs/astar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ Algs.AStarCanvasCell = class extends UI.AbstractCanvasCell {
}

#setTip(sprite, e) {
const pos = Utils.subtractCoord(
sprite.value(SpriteAction.Position), [0.5, 0.5]);
const pos = Utils.subtractCoords(
sprite.value(SpriteActionNode.Position), [0.5, 0.5]);
const status = sprite.value(AStarAction.Status);
let status_str;
if (status === AStarNodeStatus.Queued)
Expand Down Expand Up @@ -65,7 +65,7 @@ Algs.AStarCanvasVertex = class extends UI.AbstractCanvasVertex {
}

#setTip(sprite, e) {
const pos = sprite.value(SpriteAction.Position);
const pos = sprite.value(SpriteActionNode.Position);
const status = sprite.value(AStarAction.Status);
let status_str;
if (status === AStarNodeStatus.Queued)
Expand Down Expand Up @@ -149,7 +149,7 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
else if (alg_params.node_type === AlgNodeType.Vertex) {
canvases[0] = new Algs.AStarCanvasVertex();
this.#addArrow = this.#addArrowVertex;
size = Utils.addCoord(ui_states.size, [1, 1]);
size = Utils.addCoords(ui_states.size, [1, 1]);
}
canvases[1] = new UI.AbstractCanvasArrow(1, 0); // put arrows above the nodes
super.setCanvases(canvases);
Expand All @@ -166,7 +166,7 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
new UI.LensRainbow(this.#canvas_nodes, AStarAction.F, "F-cost", "$F"),
new UI.LensRainbow(this.#canvas_nodes, AStarAction.G, "G-cost", "$G"),
new UI.LensRainbow(this.#canvas_nodes, AStarAction.H, "H-cost", "$H"),
]
];
super.setLenses(lenses, 0);

// Set up Openlist
Expand All @@ -187,7 +187,7 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
for (let y = 0; y < size[1]; ++y) {
const coord = [x, y];
const id = this.serialize(coord);
const h = this.metric(Utils.subtractCoord(this.coord_goal, coord));
const h = this.metric(Utils.subtractCoords(this.coord_goal, coord));
const sprite = this.#canvas_nodes.add(
Infinity, Infinity, h, AStarNodeStatus.Undiscovered,
id, coord,
Expand Down Expand Up @@ -241,7 +241,7 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
// get neighbor node first for visualization purposes.
let nb_coord, nb_id, nb_node = null; // null if out of map.
if (nb.in_map === true) {
nb_coord = Utils.addCoord(xpd_node.coord, nb.dir);
nb_coord = Utils.addCoords(xpd_node.coord, nb.dir);
nb_id = this.serialize(nb_coord);
nb_node = this.#nodes.get(nb_id);
}
Expand Down Expand Up @@ -377,34 +377,34 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
}

#visualizeExpanded(node) {
this.#step.registerWithData(node.sprite, SpriteAction.Class, SpriteActionClass.Red);
this.#step.registerWithData(node.sprite, SpriteActionNode.Class, SpriteActionClass.Red);
this.#step.registerWithData(node.sprite, AStarAction.Status, AStarNodeStatus.Expanding);

const id = this.serialize(node.coord);
const sprite = this.#canvas_arrows.sprite(id);
if (sprite) {
this.#step.registerWithData(sprite,
SpriteAction.Class,
SpriteActionArrow.Class,
SpriteActionClass.Blue);
}
}

#visualizeOpened(node) {
this.#step.registerWithData(node.sprite, SpriteAction.Class, SpriteActionClass.Orange);
this.#step.registerWithData(node.sprite, SpriteActionNode.Class, SpriteActionClass.Orange);
this.#step.registerWithData(node.sprite, AStarAction.Status, AStarNodeStatus.Queued);
}

#visualizeClosed(node) {
this.#step.registerWithData(node.sprite, SpriteAction.Class, SpriteActionClass.Blue);
this.#step.registerWithData(node.sprite, SpriteActionNode.Class, SpriteActionClass.Blue);
this.#step.registerWithData(node.sprite, AStarAction.Status, AStarNodeStatus.Visited);
}

#addArrow;
#addArrowCell(id, node, new_parent) {
return this.#canvas_arrows.add(
id,
Utils.addCoord(node.coord, [0.5, 0.5]),
Utils.subtractCoord(new_parent.coord, node.coord),
Utils.addCoords(node.coord, [0.5, 0.5]),
Utils.subtractCoords(new_parent.coord, node.coord),
false,
SpriteActionClass.Orange,
0);
Expand All @@ -413,7 +413,7 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
return this.#canvas_arrows.add(
id,
node.coord,
Utils.subtractCoord(new_parent.coord, node.coord),
Utils.subtractCoords(new_parent.coord, node.coord),
false,
SpriteActionClass.Orange,
0);
Expand All @@ -424,26 +424,26 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
if (old_parent === null) { // create new arrow
const sprite = this.#addArrow(id, node, new_parent);
this.#step.registerWithData(sprite,
SpriteAction.Display,
SpriteActionArrow.Display,
true);
}
else { // reroute current arrow
const sprite = this.#canvas_arrows.sprite(id);
this.#step.registerWithData(
sprite, SpriteAction.Size,
Utils.subtractCoord(new_parent.coord, node.coord));
sprite, SpriteActionArrow.Size,
Utils.subtractCoords(new_parent.coord, node.coord));
}
}

#visualizeNeighbors(prev_nb_node, new_nb_node) {
if (new_nb_node !== null)
this.#step.registerWithData(
new_nb_node.sprite, SpriteAction.Outline,
new_nb_node.sprite, SpriteActionNode.Outline,
SpriteActionOutline.Red);

if (prev_nb_node !== null)
this.#step.registerWithData(
prev_nb_node.sprite, SpriteAction.Outline,
prev_nb_node.sprite, SpriteActionNode.Outline,
SpriteActionOutline.None);
}

Expand All @@ -453,16 +453,14 @@ Algs.AStar = class extends Algs.AbstractGridAlg {
const arrow_sprite = this.#canvas_arrows.sprite(id);
if (arrow_sprite)
this.#step.registerWithData(
arrow_sprite, SpriteAction.Class,
arrow_sprite, SpriteActionArrow.Class,
SpriteActionClass.Red);
this.#step.registerWithData(
node.sprite, SpriteAction.Class,
node.sprite, SpriteActionNode.Class,
SpriteActionClass.Red);
this.#step.registerWithData(
node.sprite, AStarAction.Status,
AStarNodeStatus.Path);

// this.#step.registerWithData(sprite, SpriteAction.ZIndex, 1);
}

#closeStep() {
Expand Down
Loading

0 comments on commit 2261315

Please sign in to comment.