Squishy soft bodies that wobble, bounce and squash into each other.
Each jelly is a ring of point masses joined by springs, with an internal gas pressure that pushes outward in proportion to how squashed it is. That pressure is what makes it spring back into shape. The bodies collide with each other point against edge, slide down the slopes and pile up in a jiggly heap. Each one is drawn as a smooth glossy shape with eyes that roll as it tumbles.
Try it. Grab a jelly and fling it. Click empty space to drop a new one.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build squishy jelly soft bodies 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a soft pastel background.
- Model one jelly as a ring of about 20 points on a circle, moved with Verlet integration (velocity is position minus previous position) under gravity.
- Join neighboring points with distance constraints so the ring has a skin, and relax them a few times per step.
- Add pressure: compute the ring's area with the shoelace formula, then push every edge outward along its normal with a force proportional to 1 / area. A squashed jelly has less area, so it pushes back harder and springs round again.
- Collide the points with the floor and walls, with a little friction.
- Draw the jelly as a smooth closed curve by running quadraticCurveTo through the midpoints of its edges.
Once that works, make it beautiful:
- Drop a new jelly every second or so in random sizes and candy colors, and add a slanted ramp or two for them to slide down.
- Make jellies collide with each other: when a point of one ends up inside another's polygon, push it to the nearest edge and push that edge the other way.
- Shade each one with a gradient, a darker rim, a glossy highlight and a soft shadow, and give it eyes and a smile.
- Let me grab a jelly with the mouse and fling it.
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 jellies that hop around on their own, sticky jellies that merge, or a level built from springy platforms.
