Swirl, pinch & bulge
Turn or scale coordinates by their distance from a center, so a picture twists, sinks or swells.
Cards
One live example to tweak, learn and copy.
How it works
These three distortions are one recipe in polar coordinatesA point described by its distance from a center and its angle around it, instead of by x and y. Anything that turns or repeats around a center is easy to write with them. Polar coordinates A point described by its distance from a center and its angle around it, instead of by x and y. Anything that turns or repeats around a center is easy to write with them.r = length(p), a = atan(p.y, p.x)
vec2 p = uv - center;
float r = length(p);
float a = atan(p.y, p.x);
float amount = 1.0 - smoothstep(0.0, reach, r); // 1 at the center, 0 at the edge of the effect
- Swirl adds to the angle:
a += twist * amount. Points near the center turn a lot, points at the edge not at all, so straight lines bend into spirals. - Pinch scales the radius it reads at,
r *= 1.0 + strength * amountwithstrengthabove 0: each pixel near the center shows what lies farther out, so the picture looks sucked into the middle. - Bulge is the same line with
strengthbelow 0 (and above -1): the middle is read from a smaller area and appears magnified, like a lens or a drop of water.
A swirl can stay in polar form, as Whirlpool does: it draws its arms straight from the turned angle, with no need to go
back to x and y. To bend a texture or the screen, turn the polar pair back into a coordinate first:
center + r * vec2(cos(a), sin(a)), then sample there.
Falloff decides the look
The amount curve is a shaping function, and it matters more than the twist. A linear falloff gives an even spiral, a
squared one concentrates the turn near the eye, and a smoothstep makes the edge of the effect invisible. Without a
falloff that reaches exactly 0, the outer pixels shift too and the edge of the effect shows as a seam.
Surface and screen
On a surface these work on a UV quad or the object’s texture. As a screen post pass they read the frame, which
is how a black hole bends what’s behind it or a portal swirls the room; that needs the scene in a
render targetA texture a draw writes into instead of the screen, so a later pass can read the result. Blur, bloom and every multi-pass effect use them. Render target A texture a draw writes into instead of the screen, so a later pass can read the result. Blur, bloom and every multi-pass effect use them. Post-process chain Full-screen passes run in order over the finished frame, each reading the image the previous one wrote. Bloom, tone mapping and color grading live here.
Further reading
- atan (opens in a new tab)Reference
- Polar coordinate system (opens in a new tab)Reference
- Shapes (opens in a new tab)Book
- Shaping functions (opens in a new tab)Book
- Useful little functions (opens in a new tab)Article
- pow (opens in a new tab)Reference
- 2D Matrices (opens in a new tab)Book
- Rotation matrix (opens in a new tab)Reference
- Transformations (opens in a new tab)Article
- Framebuffers (opens in a new tab)Article
- Bloom (opens in a new tab)Article
- Custom post-processing (opens in a new tab)Docs
- cos (opens in a new tab)Reference
- Twirl Node (opens in a new tab)Docs
- CanvasItem shaders (opens in a new tab)Docs