Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set your subtitle preferences in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please refer to our video player troubleshooting guide for assistance.

Decompose the Border Into Primitives

00:00 Decompose a Border Into Primitives. Open the decomposer module and type the following function stub at the top of the file. You’ll continue editing it throughout this section.

00:29 The function takes a border pattern, the top-left corner of the corresponding square in SVG coordinates, and the desired square size in SVG coordinates as input.

00:39 Its goal is to decompose the border into a relevant geometric primitive that you can draw. First, you locate the other corners of the current square’s border by translating the point that was provided to you as a function parameter.

01:03 Next, you create the four sides of the border by connecting the corners into lines accordingly. Once you have all the sides and corners, you can construct the polygon, polyline, or lines associated with the given border pattern.

01:37 As you may remember, there are sixteen unique patterns, which your function needs to recognize and map to the correct primitives. There’s only one pattern consisting of all four sides, which you can turn into a polygon.

02:05 You compare the square’s border to a predefined pattern to determine whether they match.

02:33 Next, there are four possible patterns with three sides, which you can describe by the bottom-left-top,

03:14 left-top-right, top-right-bottom,

04:03 and right-bottom-left directions. In each case, you return a polyline, leaving one side missing. You’ve now added several of the possibilities that borders have.

04:33 But in the next section of the course, you’ll complete the border-rendering code by adding the remaining patterns.

Become a Member to join the conversation.