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 polygons.

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

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.

Holes are found with the same contour algorithm, but starting from a cell that will surround a hole.