Visualize the Maze With SVG
00:13 The reason is that unlike squares, font glyphs are rectangular, which results in a vertically stretched image that doesn’t have the right proportions. So you’ll need to find a different way to visualize your maze.
00:26 In this part of the course, you’ll look at a solution for this by using the XML-based scalable vector graphics, known as SVG. You can use your web browser to preview the resulting SVG image, or you can open it in a vector graphics editor, such as Inkscape.
00:41 You can find out more about the SVG file format at the URL seen on-screen. As you can imagine, building the tools to render a maze to SVG is a large step, which will involve quite a bit of code. To make this more approachable, the overall task has been broken down into smaller steps.
01:01 But before you start creating SVG graphics, there’s something missing from our maze, and that’s a solution. Drawing the maze should be fun, but your end goal is to solve even the most complex maze and render the shortest path from the entrance to the exit.
Finding the solution by eyeballing the maze may not always be feasible, but it should be a piece of cake for a computer program. Add another module to your
models package, where you’ll define a class to represent the maze solution in an object-oriented way.
The solution is a sequence of
Square objects, which originates at the maze entrance and ends at the exit. Note that you may jump over a few squares at a time without stepping on each as long as they line up horizontally or vertically.
This code resembles the
Maze data type, which is also a data class with a
.squares attribute defined as a tuple. Unlike the maze implementation, this sequence is one-dimensional instead of representing rows and columns. Because of the similarities, you can make the
Solution instances iterable and subscriptable, too, by implementing a few special methods.
In addition to
.__getitem__(), you add the special method
.__len__() to compare the length of a solution against other possible solutions. To make sure that instances of your
Solution class represent actual solutions instead of random locations in the maze, you add a
.__post_init__() method to validate the sequence of squares.
04:31 Now that you have all the building blocks of the maze and its solution, you can start to build the code to draw them using SVG. So let’s start that journey in the next section by looking at the basic building blocks you’ll use to do this.
Become a Member to join the conversation.