Jelly Physics Playground

What does the jelly physics playground do?

Jellies Play turns your screen into a tank of soft, squishy jellies. Each jelly is a ring of connected points that wants to keep its shape but can bend, stretch and wobble. You can grab any part of a jelly, pull it out of shape, fling it across the tank and watch it bump into its neighbours. Tapping an empty spot drops a new jelly in the shape and colour you picked.

It is built for a short, tactile break and as a hands-on way to see how simple soft-body physics behaves. Nothing is uploaded and there is nothing to install: the whole simulation runs on your device.

How does the jelly simulation work?

The playground advances the physics in fixed steps of 1/180 of a second, regardless of your screen's refresh rate, so motion looks the same on 60 Hz and 120 Hz displays. Each step does four things:

1. Move every point (Verlet integration). A point's velocity is not stored directly; it is the difference between its current and previous position. That difference, slightly damped, plus gravity, gives the next position.
2. Pull points back toward the jelly's shape (shape matching). The tool finds the jelly's centre and its best-fit rotation, places an ideal copy of the original outline there, and moves each point part of the way toward its spot on that copy. This is what makes a jelly spring back.
3. Separate overlapping jellies. If a point of one jelly ends up inside another, it is pushed onto the nearest edge of that jelly and the edge is pushed back by the same amount, so both jellies dent.
4. Bounce off the walls. Points that leave the tank are placed on the wall and their speed into the wall is reversed and scaled by the Bounce setting. On the floor and ceiling a little sliding friction is applied.

When nothing is moving, the animation loop stops completely and restarts the moment you touch a jelly, so an idle tab costs almost no battery.

Controls and options

Extra actions: Make it rain drops eight jellies, Shake gives everything a random jolt, Pause freezes time, Save PNG downloads the scene, Copy link and Share pass your settings to a friend, and Reset all restores the defaults and the starter jellies. Theme, sound and settings are remembered in your browser when storage is available. On a keyboard, focus the play area and use the arrow keys, Space, N and Delete.

The formulas behind the wobble

Position update (Verlet):   x(n+1) = x(n) + (x(n) − x(n−1)) · d + a
Shape matching:             x ← x + (t − x) · k
Stiffness from softness:    k = 0.5 − 0.05 · (s − 1)
Gravity per step:           a = 0.07 · G   (pixels per step²)
Wall bounce:                v′ = −v · b
Squish meter:               squish % = 100 · mean(|xᵢ − tᵢ|) / r   (capped at 100)

Variables and assumptions

x

Position of one outline point in CSS pixels (each jelly has 20 points).

d

Air damping per step, fixed at 0.995.

a

Gravity added each step. At G = 1 that equals 0.07 × 180² ≈ 2,268 px/s².

t

The point's target on the best-fit, rotated copy of the jelly's original outline.

k

Stiffness: the share of the gap to t closed each step, from 0.5 (softness 1) to 0.05 (softness 10).

s, G, b

Softness, Gravity and Bounce slider values.

r

Jelly radius in pixels.

Assumption: pixels stand in for distance; there is no real-world mass, density or material model. Results are visual, not measurements.

Worked example: one step for one point

Take a point at y = 300 px whose previous position was y = 298 px, so it is moving down 2 px per step. Gravity is 1 (a = 0.07) and softness is 6.

1. Damped velocity: (300 − 298) × 0.995 = 1.99 px.
2. Verlet move: 300 + 1.99 + 0.07 = 302.06 px.
3. Stiffness: k = 0.5 − 0.05 × (6 − 1) = 0.25.
4. If its shape target is t = 305 px: 302.06 + (305 − 302.06) × 0.25 = 302.795 px.

The point closed a quarter of the gap to its ideal position. Repeated 180 times a second across all 20 points, these small corrections create the visible wobble.

Three scenarios to try

Reading the squish meter and fling speed

Live squish is the largest current deformation among all jellies: the average distance of the outline points from their ideal shape, as a percentage of the radius. Around 0–5% is resting, 10–30% is a solid squeeze, and anything above 40% means you have stretched a jelly far out of shape.

Fling speed is how fast your pointer was moving over the last tenth of a second before you released a jelly, in CSS pixels per second. Under 300 px/s is a gentle toss, 300–1,200 px/s a good fling, and above 1,200 px/s a rocket. Your best fling is saved on this device. Speeds depend on screen size and pointer sensitivity, so compare them on the same device.

What affects how the jellies move?

• Softness controls how fast jellies recover their shape and how far they overshoot.
• Gravity and bounce decide how hard jellies hit the floor and how long they keep bouncing.
• Size and crowding: large jellies in a full tank squash each other into a pile; small ones roll and slide between gaps.
• Shape: stars and flowers have thin tips that bend more than the round body; squares pile up more stably.
• Screen size: on a phone the tank is smaller, so walls are closer and jellies collide more often.

Common mistakes

• Trying to scroll the page by swiping on the play area. It captures touches for dragging, so scroll from the article or margins.
• Setting softness to 10 and bounce to 0.9 with high gravity, then wondering why jellies never settle. Lower one of them.
• Expecting Copy link to recreate exact positions. It shares settings only; use Save PNG to keep a picture.
• Changing Size or Shape and expecting existing jellies to change. Those settings apply to newly added jellies.

Tips and ideas

• Grab a jelly near its edge rather than its middle for the most dramatic stretch.
• Build a stack of square jellies at gravity 0.4, then switch gravity to −1 and watch it fall upward.
• Use fullscreen on a tablet for a large, calm squishing surface.
• Teachers can pair the worked example above with the Softness slider to show how one stiffness number changes motion.

Limitations

This is a simplified, educational model. It does not conserve volume exactly, so very hard squeezes can flatten a jelly briefly. Collisions are resolved point by point, so fast, thin shapes can occasionally pass partly through each other. There is no measured mass, so a big jelly and a small one push equally hard. Fling speeds and squish values describe what happens on screen and are not physical measurements.

Frequently asked questions