Applied Examples
The Applied Examples section is meant to provide some more illustrative examples on how the concepts and algorithms seen in the lecture can be used, hoping to make the illustrated content more intuitive to understand. For this, we implemented three examples with which students can play around.
Each example is prefaced by an information textbox explaining the algorithm and the example in simple, informal terms, again aiming for an intuitive rather than a more formal grasp of each concept.
As of July 2025, the entire code can be found under src/components/AppliedExamples.
The first example illustrates Dijkstra's path finding algorithm. Users can draw a maze on their own by placing walls on a grid of cells, followed by a source and a target cell. No wall cell can be designated as a source or target cell. Students can then watch Dijkstra's algorithm being run on their drawn grid with a visual representation of how each cell is checked, or choose to let it be run step by step. As soon as the target cell is found, the shortest path will be drawn from the target to the source cell.
For layouting reasons, screenshots are all at the end of this article.
We follow this up with two examples of maze building on our grid.
With Kruskal, we start with a canvas that is already filled with a grid of walls (here in dark blue), leaving isolated cells (here in grey). We then pick a random wall cell and remove it if doing so connects to fully separate regions. This generates a random maze. Once again, students can choose to run the entire algorithm at once, step by step, or interrupt a run in the middle to proceed from there.
Once a maze has been built, a small message appears that the algorithm has terminated and we invite students to select a source and target cell for another path finding demonstration, which operates exactly as above. Additionally, the grid size can be chosen via slider from between 5x5 and 251x251 cells.
The Prim example works in a very similar way to Kruskal aside from the algorithm used for maze construction.
We start with one random empty cell in a grid of wall cells as the start of the maze (here in grey). At all times, we keep track of the maze's neighbours: cells next to the maze with one wall cell in between (here in light blue). On each step, we pick a random wall cell and see if removing it leads us to a new part of the grid; if so, it is removed. This keeps going until we have generated a full maze, leading us to the options we already know from the other examples.
Explainer text for both maze examples can be found in the AppliedExamples/MinimumSpanningTree folder in the Explainer[Prim/Kruskal]MazeFinder.tsx files. Each contains the definition of the illustration example grids, which themselves are just arrays of coordinate object. Each cell in a 5x5 grid, no matter their state, has to be defined, containing their x and y coordinates, their text content (optimised for single letters), and whether they are filled in or not.
Example of a single cell: { x: 0, y: 0, text: "A", isOpen: true }, for the upper left cell, coloured and containing the letter A. The end result is an SVG.
For Prim, everything is in the AppliedExamples/Pathfinding folder. The explainer mazes work in almost the same way, except for the last option, which instead of isOpen is called status with 6 possibilities: open, wall, source, target, visited, and shortestPath, each corresponding to a colour defined above. These are thus not automatically the same colours as used in the canvases, as those are defined in DijkstraGridDrawer.tsx with the rest of the GridDrawer logic.
The code for the examples themselves are entirely within KruskalMazeFinder.tsx and PrimMazeFinder.tsx respectively. The functionality is mostly self-explanatory. Theming for the different elements making up the examples is also found here, using DaisyUI.
Currently, the Dijkstra logic is not reused, but instead duplicated for each example. This is something that could be considered in the future by reorganising the code. This of course brings additional complexity in the file structure. Within each file though, every functionality should be properly encapsulated in a corresponding, clearly-named function.
A drawn maze with placed Source and Target nodes.
The pathfinding in progress, scouting for the target node.
The finished path.
The grid in its initial appearance.
A 251x251 cells initial grid.
Kruskal in the middle of a run.
A finished Kruskal run.
Dijkstra in progress on the maze generated by Kruskal.
The end result after both Kruskal and Dijkstra terminated.
The initial setup for Prim.
Prim after a few steps.
Prim, being halted in the middle of its execution.
A finished maze as built by Prim.
Dijkstra's pathfinding as run on the Prim-generated maze.
