Fields and noise

Op art

Checkerboards, stripes, Bridget Riley's waves, concentric squares and rings — swollen by lenses like Vasarely's «Vega».

  • GPU shader
  • seamless tile
  • looping animation
Open in the editor →

A black-and-white chessboard that suddenly swells into a ball; wavy stripes that make the canvas tremble and swim. Op art, the optical art of the 1960s, works not with a subject but with seeing itself: a simple regular figure, slightly distorted, makes the brain perceive volume and motion that are not there. Its tricks live on in fabrics, record sleeves, advertising and logos.

How it works

The layer builds a regular “Figure” (checkerboard, stripes, waves, concentric squares or rings) in “Colour A” and “Colour B”; “Frequency” sets cells or stripes across the short side. Then “Lenses” bend the plane. Inside a lens the sampling point is pulled towards the centre, so the pattern looks magnified and bulges; a negative “Lens strength” sinks it into a hollow, and “Twist” turns it. The effect fades out at the rim, so nothing tears.

s = |x − c| / R (s < 1) g = (1 − s²)² m = 1 − 0.8 · σ · g x′ = c + rot(τπg)·(x − c)·m colour(x) = figure(x′) σ = “Lens strength”, τ = “Twist”

The brain reads the squeezing and stretching of a regular texture as a tilting surface (the texture gradient, a strong depth cue) and sees a sphere. “Waves” follow Bridget Riley: stripes swing along a sine whose amplitude drifts across the canvas. Edges are antialiased, and detail finer than two pixels fades to a flat mid-tone instead of breeding false moiré. “Sharpness” below 1 softens the steps into sine transitions. “Colour B” defaults to the background, which stays transparent for layering. In animation the figure scrolls whole periods per loop while the lenses circle.

A bit of history

Victor Vasarely, a Hungarian working in Paris, painted zebras of pure stripes in the 1930s and is often called the father of op art; his Vega series, checkerboards swollen from inside by a sphere, is the direct ancestor of this layer’s lenses. In 1961 Bridget Riley painted Movement in Squares, a checkerboard whose squares narrow into thin strips towards the middle, and in 1964 the wavy-lined Current. Time magazine coined “op art” in 1964, and in 1965 the Museum of Modern Art’s show The Responsive Eye put Riley’s Current on its catalogue cover. Op patterns soon flooded fashion, much to Riley’s annoyance.

What to tweak

  • “Checkerboard”, one lens, “Lens strength” at 0.85: Vasarely’s Vega. A negative strength makes a funnel.
  • “Waves” with “Lenses” at 0 and “Frequency” at 20–30: a canvas in Riley’s spirit.
  • “Rings” with “Twist” at 0.5–1 wind into a hypnotic spiral.
  • Fine high-contrast stripes can flicker in video and bother people sensitive to flashing patterns; for animation, lower “Sharpness” or “Frequency”.
  • Put a “Mesh gradient” under the figure: colour glows through the transparent B cells, and “Gradient” repaints the A cells too.

Parameters

Figure
checkerboard · stripes · waves · squares · rings
Frequency
Cells or stripes across the short side
Lenses
How many swellings bend the plane
Lens strength
Above zero swells, below zero pinches
Twist
Turns the figure inside the lenses
Sharpness
1: crisp edges; 0: soft sine transitions
Colour A
Colour B
The background colour stays transparent, so the figure can lie over other layers
Gradient
Colour A comes from the palette and changes across the canvas
Speed
How many periods the figure scrolls per animation loop