Polytess

A drawing tool where the marks are points and the drawing is the triangulation between them.

You place points by clicking or dragging, and a Delaunay triangulation is recomputed after each one. Nothing is drawn directly. The line you get is a consequence of where the points sit relative to their neighbours, so the same gesture produces a different mesh depending on what is already on the canvas. Adding one point in the middle of a dense area changes almost nothing; adding one in open space redraws half the field.

Three ways of reading the same mesh: the edges as a wireframe, the vertices alone as dots, or the faces filled from a two-stop gradient. The underlying triangulation is identical in all three — only what gets rendered from it changes. A maximum edge length culls the long triangles that Delaunay produces around a sparse hull, which is the difference between a mesh that describes a shape and one that spans the whole canvas.

An image can be used as the point source. It is reduced to greyscale on the standard luminance weighting, run through a Sobel operator for the gradient magnitude at each pixel, and thresholded to a binary edge map. Points are then sampled from that map on a fixed grid step, up to a cap. What survives is the structure of the image rather than the image: edges become vertices, and the triangulation fills in what was between them.

The step size is the interesting control. Small steps track the contours closely and the result reads as a low-resolution copy. Larger steps skip most of the edge and the mesh starts inventing relationships between features that were never adjacent.

Four modes: draw, select, erase points, erase faces. Erasing a point changes the triangulation around it; erasing a face leaves the mesh intact and removes only the fill. The two produce different kinds of hole, and the distinction matters more than it sounds — one is a structural edit, the other is a compositional one.

Triangulation runs in a pool of Web Workers rather than on the main thread. At a few thousand points the recompute is long enough to be felt on every mouse move, and the gesture is the part that has to stay smooth. State lives in Redux and persists to local storage, so a canvas survives a reload.

Output is SVG, for the same reason as Tessera: the mesh leaves the browser as editable geometry rather than a picture of itself.

Built on a fork of Delaunator.