Struts that never touch, floating in a web of cables, found by dynamic relaxation.
Each structure starts as nothing but a topology and rest lengths: rigid struts, and cables set a few percent short of their span so they carry prestress. Dynamic relaxation finds the shape: cables pull with Hooke's law but never push, struts are projected back to length several times per substep, and kinetic damping (every velocity zeroed whenever the kinetic energy peaks) lets the whole thing creep downhill in elastic energy with gravity off until every node balances. The prisms are seeded crumpled and under-twisted, so you watch the struts extend and the structure turn itself until its end polygons sit 90 + 180/n degrees apart, and the HUD reports the twist it found against that textbook value. Struts are capsules that collide, so they never pass through each other, and a small 3D pipeline draws it all: perspective projection, an orbit camera, floor shadows cast along the light, depth-sorted shaded struts that redden with compression and cables that turn blue with tension or droop when slack.
Try it. Drag a node to pull the structure out of shape and let go to watch it spring back; drag empty space to orbit. Hold Squeeze (or S or Space) to press it under a glass plate. 1 to 5, the arrow keys or the arrow buttons switch between the icosahedron, the prisms and a Snelson-style needle tower; R refolds from scratch.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive 3D tensegrity structure with JavaScript and the HTML canvas element (2D context only). 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 light gray studio background.
- Build a three-strut tensegrity prism: a triangle of nodes at the bottom and another at the top rotated by 150 degrees. Each bottom node connects to one top node with a strut. Cables run around the top triangle, around the bottom triangle, and from each bottom node to the next top node.
- Simulate with dynamic relaxation: cables are springs set about 8 percent shorter than their span that pull but never push; after moving the nodes, project each strut back to its exact length a few times. Add damping and a floor.
- Project the 3D points with a simple perspective camera that slowly orbits, and draw struts as thick lines and cables as thin ones.
Once that works, make it beautiful:
- Sort all members back to front by depth before drawing, and fake round struts with a gradient across their width.
- Color cables by tension (gray to blue) and struts by compression (steel to red), and draw slack cables as drooping curves.
- Cast soft shadows onto the floor by sliding each node along a light direction down to y = 0.
- Let me drag a node to pull the structure out of shape and watch it spring back, and drag empty space to orbit.
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 six-strut icosahedron, a tower of stacked prisms, or a press that squeezes the structure flat.
