Implicit Set Difference Using Multiple Convex Polygons

This interactive WebGL reconstruction builds a set difference from two collections of convex components. Additive polygons form a union A; subtractive polygons form a union B. The final shape is A − B = A ∩ Bᶜ, implemented by reversing the sign of the implicit function for B and intersecting it with A. Add, delete, select, move, rotate, scale, and edit polygons while the implicit representation updates in real time.

Click inside a polygon to select it. If several polygons overlap at the clicked point, the polygon whose local origin is closest to the click is selected. Drag a vertex to edit the selected convex polygon. Its blue dotted local coordinate axis controls translation, scale, and rotation. Other polygons remain visible but inactive.
Set Difference. Red additive polygons form the union A. Green subtractive polygons form the union B. The result is A − B = A ∩ Bᶜ. In the implicit representation, B is complemented by multiplying its function by −1 before the final intersection.
Editing. The selected polygon shows its vertices and blue local coordinate axis. Click inside a polygon to select it; when polygons overlap, the component whose local origin is closest to the click is selected. Display. Implicit Function visualizes the sign and magnitude of the continuous implicit function. Implicit Shape shows the inside/outside region defined by its zero set.