About

This repl provides a JavaScript file that finds a polygon that forms the boundary around a blob of dark cells.

To view this on TripleLog, click here.

HTML

Set the grid size, the number of cells to fill in, and the time per iteration. Then click create and watch the algorithm find the polygon. Boundary cells are shaded darked as they are found, the active cell has a red border, and the boundary polygon is orange.

CSS

Add CSS by editing the style.css file that is linked to in the head section or inline edit the style section in the head.

JavaScript

The contour.js file iteratively finds a boundary around a given filled-in region. The script.js file creates a blob and then runs the contour algorithm.

The polygon this algorithm finds will cut corners which may be good if the boundary is not exactly divided at cell boundaries. Adding corner points will make the polygon exactly match the region.

Note that cells are defined by their top left point so adding 1/2 is needed to reach midpoints. Also, the algorithm proceeds counter-clockwise when y values increase as they go down the page (the norm for SVG and most graphics units). The algorithm works the same for lat/lng or mathy x/y coordinates, but the search will proceed clockwise.

Any holes inside of the blob will be ignored: see the other repl to handle holes.