Inverse kinematics tentacles reach and curl toward the pointer.
Each tentacle is a chain of segments with fixed lengths. The FABRIK algorithm solves inverse kinematics by repeatedly dragging the chain from its tip to the target and back from its root, which converges in a few passes. Tapered drawing with suckers and a wobble driven by sine waves makes them feel alive.
Try it. Move the pointer and the tentacles will reach for it. Click to make them grab.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tentacle creature with inverse kinematics 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 it a deep blue-green background like the ocean.
- Draw a round body in the middle with 6 to 8 tentacles attached around its lower half. Each tentacle is a chain of about 20 joints with fixed segment lengths that get shorter toward the tip.
- Solve each chain with FABRIK: set the tip to the target and walk back toward the root, placing each joint at the right distance from the one after it; then pin the root to the body and walk forward again. Repeat 3 times per frame.
- Make the 3 tentacles whose roots face the mouse reach for it, and let the others hang and drift on a slow sine wave.
- Draw each tentacle as a tapered ribbon: compute a normal at every joint, offset left and right by a width that shrinks toward the tip, and fill the outline.
Once that works, bring it to life:
- Limit how far each joint may bend relative to the previous segment (about 20 degrees), which stops FABRIK from folding spare length into sharp kinks.
- Add suckers as small pale circles along one side, a sine wave that travels down each arm as it sways, and a curl at the tips that tightens into a spiral when I hold the mouse down to grab.
- Give the body big eyes whose pupils follow the pointer, and have it chase a wandering glowing firefly when the mouse is idle.
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 letting the creature crawl by planting its tentacles, color-changing skin like a cuttlefish, or a whole reef of anemones.
