What is this? Shape intersection detection based on curve flattening + line/line intersection detection. Followed by boolean shape union and intersection based on shape segmentation at intersections with unwanted segments removed based on the "crossing number" for that segment with respect to the shape it wasn't part of. Brought to you by Processing and Processing.js. The graphics are drawn using regular 2D draw primitives for outlines, which are drawn in order, and the fill is achieved by turning the outline description into an SVG path, and relying on SVG implementations to do the fill color. This means that any incorrect draw order in the outline leads to incorrect coloring. Think of it as showing things work twice =)

"Crossing numbers"? There are two good ways to determine whether a point lies inside a closed path, and that's by checking how many times a line starting at the point, in some random direction, crosses the path. If it crosses the path an odd number of times, then the point lies inside the closed path. If the number is even, it lies outside it. This can be generalised to segments inside a closed path if we can guarantee that the segments don't cross the path, which we can because of the intersection-detection and subsegmenting that is done as first step. The other good option is using the "winding number", but for now focus will be on cleaning up the code first.

How to use this sketch: click on the graphic once to check what the union of the two shapes looks like, and again to see the intersection. Clicking a third time gets you back to the initial graphic with the base shapes and detected intersection points.

Unified SVG path (dynamically generated by the graphic):