Why not just use a sine wave?

Because a sine wave has no idea the fabric cannot stretch. It looks convincing from one angle and wrong from every other, and it can never produce the sharp creases that appear when a real flag snaps over.

What are the three constraint types for?

Structural springs hold the weave together, shear springs stop the sheet collapsing into a parallelogram, and bend springs give it stiffness so it drapes like fabric rather than a chain net.

Does this need a special browser or plugin?

No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.

Does it cost anything or need an account?

No. Every screensaver here is free, runs in the browser and needs no sign-up.

Why does the simulation need a small time step?

Stiff springs react violently to small errors, and a large step can overshoot and make the energy grow. Smaller steps, or constraint-based methods, keep it stable.

What is position-based dynamics?

A method that moves particle positions directly to satisfy constraints, instead of computing spring forces. It is popular in real-time graphics for its stability and speed.

Why does the flag flutter at its free edge most?

The pinned edge cannot move, so the free end has the most freedom to respond to wind. Disturbances travel along the cloth and show up there as large movement.

Flag In Wind Screensaver

The Flag In Wind screensaver simulates fabric properly: a grid of masses joined by springs, pinned along one edge and pushed by a wind that shifts in strength and direction. It runs in the browser with nothing to install; press ESC to exit.

How the Flag In Wind screensaver works

The saver renders with three.js on your GPU. The library is vendored into this site rather than fetched from a CDN, and is loaded only when a 3D screensaver actually runs.

It reads nothing external — the simulation runs in the browser and is rendered with three.js.

The scene resizes with the window and releases its WebGL context when the saver stops, so shuffle mode and Multi-view can cycle 3D savers without exhausting the browser's context limit.

If WebGL is unavailable the saver says so on screen rather than showing an empty black box.

Mass-spring cloth and position-based dynamics

The standard way to simulate cloth in graphics is to treat it as a grid of point masses joined by springs. Provot’s 1995 paper on deformation constraints in a mass-spring model, presented at Graphics Interface, is a much-cited example of the approach. The springs pull neighbours toward their rest lengths, and gravity and wind push on the masses, so the fabric hangs, ripples and folds. Because the model has no stored shape, the folds arise from the physics and not from an animation curve.

Three types of connection are typically used, and they correspond to how real fabric resists deformation. Structural links join direct neighbours and resist stretching. Shear links run diagonally and resist the grid skewing sideways. Bend links skip a cell and resist sharp folding. Without the last two, the cloth behaves like a net with no stiffness. Stiff springs can make the simulation blow up unless the time step is small, which is why many implementations adopt position-based dynamics, introduced by Müller and colleagues in the mid-2000s, which directly corrects positions to satisfy constraints and stays stable at larger steps.

Wind in such a scene is a force applied to the surface according to its angle to the airflow, with some randomness. Real flags also involve air turbulence behind them, which a simple model doesn’t capture. The result looks convincing at a glance but is a simplified mechanical model, not computational fluid dynamics.

A worked example

A 34×22 sheet of points is joined by three kinds of constraint: structural along the weave, shear across the diagonals, and bend between every second point. Each frame integrates the points forward, then relaxes those constraints four times so the cloth resists stretching. The folds are not drawn — they emerge because the fabric cannot get any longer, which is the whole difference between simulation and animation.

Settings & tips

Accent and Background recolour the scene; Speed changes the pace of both the motion and the camera.
Add it to a Multi-view grid, though 3D savers are heavier than the 2D ones and a few per screen is plenty.
Press ESC at any time to leave fullscreen.

Frequently asked questions

Why not just use a sine wave?: Because a sine wave has no idea the fabric cannot stretch. It looks convincing from one angle and wrong from every other, and it can never produce the sharp creases that appear when a real flag snaps over.
What are the three constraint types for?: Structural springs hold the weave together, shear springs stop the sheet collapsing into a parallelogram, and bend springs give it stiffness so it drapes like fabric rather than a chain net.
Does this need a special browser or plugin?: No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.
Does it cost anything or need an account?: No. Every screensaver here is free, runs in the browser and needs no sign-up.
Why does the simulation need a small time step?: Stiff springs react violently to small errors, and a large step can overshoot and make the energy grow. Smaller steps, or constraint-based methods, keep it stable.
What is position-based dynamics?: A method that moves particle positions directly to satisfy constraints, instead of computing spring forces. It is popular in real-time graphics for its stability and speed.
Why does the flag flutter at its free edge most?: The pinned edge cannot move, so the free end has the most freedom to respond to wind. Disturbances travel along the cloth and show up there as large movement.

← All Generative screensavers