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.