A garden spider builds a real orb web, step by step, then guards its dewy net.
The spider follows the construction order of real orb weavers: a bridge line drifts on the breeze until it snags, a dropped line forms the Y whose junction becomes the hub, frame threads are tied off to the stems, radii are added one by one to fill the widest gap, a temporary spiral is laid outward, and the sticky capture spiral is laid inward while the temporary one is cut away. The script is a JavaScript generator that the spider walks through waypoint by waypoint, with legs on two-segment IK and an alternating gait. Every thread is a distance constraint in a Verlet network; attaching to a radius splits it there, so the finished web is one pre-tensioned spring network that sways with its anchor stems. Dew beads up on the sticky spiral, and each drop is drawn as a tiny lens holding an inverted image of the meadow.
Try it. Drag a thread to pluck or stretch it, swipe across the web to tear it, and move the pointer over it to blow. After a moment the spider walks out and lays every broken thread again. Hold Space to speed things up and press R for a fresh web.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an orb web you can play with, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a soft dawn gradient behind it.
- Model the web as points and threads. Points use Verlet integration (velocity is the current position minus the previous one) with a little gravity; threads are distance constraints relaxed several times per frame. Threads only pull: skip a constraint when it is shorter than its rest length.
- Pin six or seven frame points around the edge. Add a hub point in the middle and about 20 radii from the hub to the frame, each split into points wherever a spiral will cross it.
- Add the capture spiral: walk around the radii, stepping slightly inward at each one, and join consecutive crossing points with threads. Give every thread a rest length a few percent shorter than its length so the web is taut.
- Let the mouse grab and drag the nearest point. Break any thread stretched to more than about twice its rest length.
Then make it come alive:
- Instead of creating the web all at once, have a small spider build it: a list of waypoints it walks to in order (frame, then radii, then the spiral), laying each thread when it arrives. A JavaScript generator function makes this kind of step-by-step script easy.
- Draw the threads as thin, slightly glowing lines, and beads of glue or dew along the spiral.
- Draw the spider with eight legs whose feet step to new positions when the body moves away from them.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as the real construction order (bridge line, Y, frame, radii, temporary spiral), a spider that repairs broken threads, or dew drops drawn as tiny lenses that show the scene upside down.
