Visualize the Maze With SVG

00:00 Visualize the Maze With Scalable Vector Graphics. If you were to try printing a visualization of the maze in the console using ASCII characters, then you would find it wouldn’t look great.

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.

01:18 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.

01:38 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.

01:51 This reflects how you’re going to represent the path through the maze as an ordered collection of nodes in a graph. The maze solution is implemented using the class seen on-screen.

02:20 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.

02:58 In addition to .__iter__() and .__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.

03:40 Validation of a solution involves checking that its first square is the maze entrance, the last square is the exit, and every two consecutive squares belong to the same row or column.

03:54 This is done by using reduce() to check that each pair of squares align either horizontally or vertically. You

04:11 call any() to assert that either of the two conditions is true.

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.