Every press of the Tab key spans a new bug.
Of all different kinds. Some small and some big.
Who will maintain what was once an orderly garden?
And yet,
we keep on pressing Tab.
Go ahead. Press that Tab key yourself: https://jimmysastra.com/doodles/bug.
The ability to upload your own bug and add it to my growing library of hexapods is coming soon.
The bug body and legs are separate SVG files segmented from images of the full beetle . Segmentation to separate body, and the individual legs is done using good old-fashioned image processing. Not everything has to be a AI/ML. The algorithm is as follows:
- Find the bug
Any pixel that isn’t white belongs to the bug.
(HSV color thresholding) - Find the body
Shrink the bug shape until the skinny legs disappear and only the chunky middle remains, then grow it back to size.
(Morphological opening: erosion + dilation; hole-filling patches bright reflections) - Find the legs
Anything that’s bug but not body must be a leg.
(Connected-component labeling groups leg blobs; Euclidean distance transforms create a Voronoi-style split assigning pixels to each leg) - Sort the legs
Split them into left/right, then front/mid/rear based on position. - Export the pieces
Save each part as its own SVG.
(Moore-neighbor boundary tracing extracts outlines; Ramer–Douglas–Peucker simplifies points; Catmull–Rom splines smooth them into curves)
The bug graphics start as SVGs, which the browser would have to re-rasterize from vector paths every single frame, expensive when dozens of bugs are moving at 60fps. To avoid that, each SVG is drawn once into a hidden canvas at its display size, and every bug of the same species shares that cached bitmap. Per-frame rendering then becomes simple pixel copies wrapped in cheap transforms (translate/rotate, plus a horizontal flip to mirror the left and right legs from a single sprite). The expensive vector work happens once at spawn, not 60 times a second per bug.
For comments or bug reports, see HackerNews or LinkedIn.