Sweet pea shoots circle, grab supports with tendrils and coil into springs.
Each stem is a 3D elastic rod of Verlet nodes that grows at its tip, with a rest shape, bending stiffness, gravity and a breeze, so an unsupported shoot really leans and sags. The growing tip circumnutates, sweeping around the vertical every few seconds while gravitropism keeps it heading up; the white dots record its path the way Darwin traced it on glass. Every leaf ends in a tendril that searches too. When one touches a stake or string it wraps the support, then its free length winds into a spring with a perversion, two helices of opposite hand, because both ends are held and it cannot twist. The shortening spring pulls the stem in through a rope constraint, and tendrils that find nothing curl up on themselves.
Try it. Tap the soil (or anywhere) to push in a bamboo stake that tall, drag across the sky to stretch a new string, and drag a stem to pull on it and feel the tendrils hold. Hold Space to fast-forward growth and press R to replant.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a growing, climbing vine with 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, in a 2D side view:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a sky gradient, a strip of soil, and two or three vertical stakes.
- The stem is a chain of points (Verlet integration: each point keeps its velocity as the difference between its current and previous position) joined by distance constraints. Pin the bottom two points in the soil and apply a little gravity.
- Grow it: slowly lengthen the last segment, and when it reaches full length add a new point at the tip.
- Place the tip by hand each frame: aim it up, plus a sideways component that swings back and forth with a sine of time. This is circumnutation, the searching motion of real shoots.
- Add bending stiffness by nudging each point toward the midpoint of its neighbors a few times per frame, and give each new segment a remembered rest direction it springs back to, so the stem keeps its shape.
Then add tendrils and make it beautiful:
- Every few nodes, add a short tendril that sticks out and sweeps around. If its tip comes within a few pixels of a stake, attach it: draw a little helix wrapped around the stake, and add a rope constraint that pulls the stem node toward the stake, shortening over a few seconds as the tendril coils.
- Draw the stem as a tapering green curve with a light edge, add pairs of oval leaflets, and draw coiled tendrils as helices whose winding direction reverses in the middle (a tendril perversion).
- Let the mouse drag stem points, and clicks add new stakes.
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 moving to a true 3D projection with shading, flowers that bloom on older nodes, or several vines competing for the same supports.
