Skip to content
Distort · TechniqueBeginner

Swirl, pinch & bulge

Turn or scale coordinates by their distance from a center, so a picture twists, sinks or swells.

UVTimeSurfaceScreen / post

Cards

One live example to tweak, learn and copy.

How it works

These three distortions are one recipe in polar coordinates. Take the pixel’s position around a center as a radius and an angle, change one of them by an amount that depends on the radius, and read the picture at the result.

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 * amount with strength above 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 strength below 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 target first, as any post pass does.

Further reading