Skip to content

Join Types

earlygrey edited this page Aug 16, 2019 · 4 revisions

When calling methods that draw multiple lines which share an endpoint, for example path() or polygon(), it's possible to bevel the ends of the line so that thick lines fit together nicely and do not have any gaps at the joints, and transparent lines do not draw over each other.

Shape Drawer gives two options for this - "pointy" and "smooth" - as well no join type. These are illustrated below.

The join type is specified using the enum JointType.

No Join

This does not attempt any kind of joining, and uses line() to draw. You can see that for transparent lines, the lines draw over each other.

This is the fastest way to connect lines, and is the default behaviour for thin lines or when no join type is specified.

Pointy Join

This corresponds to a standard mitre joint, and is drawn by stretching the corners of the line endpoints so that they sit flush. It requires extra calculations to find the points.

This is the default join type for polygons.

Smooth Join

This type of join prevents the lines from drawing over each other, and then additionally fills in the gap in the elbow with a small triangle. This requires extra calculations to be done to find the line meeting points and an extra quad to be drawn per joint for the gap filling.

This is the default join type for ellipses and paths.

Caveats

Be aware that the joining may produce some strange results when the angle between the lines is close to 0. For example, the distance of the outer point on a "pointy" join from the actual point on the path gets arbitrarily large as the angle between the lines approaches 0.

Each of the join types also require extra calculations, so if performance is a priority or you are drawing thousands of points, it may be best to use no join.