Drawing Paths and Geometry Deformation

Well, after deciding to finally tackle the stroke algorithm used to draw paths, I'm feeling a little bit dumb. 🤨 😆

When drawing a path, the general idea is to take the original set of line segments and expand them outward at a 90-degree angle by the desired line width. It uses vector arithmetic against each line segment, then fixes up the geometry a little bit at the two end points, and at every join. This is typically referred to as stroke outlining or stroke offsetting.

When applying this algorithm to a closed polygon, it turns out that stroke offsetting against geometry achieves the exact same results as pixel erosion. This is all apparently related to Minkowski addition.

So I spent a whole bunch of time building a pixel erosion algorithm using a distance transform field, only to realize that its performance was out of range of real-time. But as soon as I looked at the first result of my stroke algorithm, I realized I could just subtract it from the original filled polygon to achieve the same effect. 🤯

Latest C++ Milestone - Fastest Way to Produce the Puzzle Piece Bevel

What you're seeing above is stroke algorithm and its relation to pixel erosion:

• On the left is the final puzzle piece, with the photo slightly inset on top of a cardboard-like background.
• In the middle, the stroke outline is drawn in red over top of the final puzzle piece. You can see that it perfectly follows the bevel of the puzzle piece.
• On the right is the stroke outline drawn as a wireframe. The algorithm does cause some interesting visual artifacts at concave corners, but when this is drawn with the fill rasterizer using the non-zero winding fill rule those artifacts disappear.

Even when compiling in debug mode, I'm now able to produce all the puzzle piece textures within a few seconds.

What's Next

Now that I've finalized the rendering of puzzle pieces, and am satisfied with the performance, I'm moving along to figuring out how to draw effects along the edges of the puzzle pieces. I'll be using this for effects like glows when the player is dragging groups around the playing area. 🧩