Frogdraw (vc)

Procedurally generated frogs, one polyline at a time

Frogdraw (vc)

Why frogs?

I’ve long had a soft spot for fishdraw by Lingdong Huang: type a seed, get a beautiful engraving-style fish, drawn only with lines a pen plotter could follow. One evening I wondered what the same idea would look like with frogs. Turns out: rather charming =)

So frogdraw is a fork of fishdraw. The original fish and their LICENSE stay in the repo, the geometry helpers (noise, clipping, hatching, Hershey text) are borrowed under MIT, and a whole new frog generator sits on top.

What it does

Give it a seed, any text you like, and it draws a sitting frog. Same seed, same frog. Everything is polylines, so it’s plotter-friendly.

A gallery of eight generated frogs

What changes from one frog to the next:

  • Species presets. Ranid (pointed snout, spots), toad (warts, parotoid gland, short legs), tree frog (big eyes, toe pads), or plain.
  • Shape. Leg length, eye size, mouth curve, body height, and now and then an inflated vocal sac.
  • Skin. Spots, mottling, marbling, bold dart-frog blotches, stripes, warts, stipple, banded legs.
  • Pose. Sitting, crouched, alert, waving, croaking, with eyelids open, half-closed or shut.
  • Perch. Ground, a lily pad with ripples, a rock, or a branch. Sometimes there’s a fly, and sometimes the tongue gets it.
  • Style. Straight diagonal hatching, or engraving-like hatching that wraps around the body and limbs.

The gallery above uses Latin species names as seeds: Rana temporaria, Bufo bufo, Hyla arborea… The frogs don’t look much like the real species, but it makes for nice captions.

How to play with it

  • In the browser: the live demo. Type a seed or hit “new frog”. “Animate” draws the frog stroke by stroke, and you can download that as an animated SVG.
  • Studio: studio.html lets you pick every option yourself (kind, pose, skin, perch, fly, shading, facing…), or leave each one on “auto” for the seed to decide.
  • Node: node frogdraw.js --seed "Rana temporaria" > frog.svg, plus --kind, --pose and --format svg|smil|json|csv.

Vibe-coded with my good friend Claude, like a few other things lately. Next step is probably to actually plot a few of them 🐸

It all lives on GitHub.