They say vibe coding is prone to generating bugs. So I thought it would be the perfect way to generate an app full of bugs.
Try it for 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 bitmap 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.