Riley and Vasarely style compositions that ripple, bulge and vibrate.
Seven compositions in the spirit of Bridget Riley and Victor Vasarely, from a checkerboard swelling into a sphere to zigzag rings that seem to spin. Each one is a scalar field painted as stripes, or two fields XORed into a checkerboard, evaluated per pixel after the plane has been pushed around by a displacement field: a slow ripple plus Gaussian lenses that magnify or squeeze whatever lies beneath them. The displacement is computed on a coarse grid and interpolated, and every edge is antialiased analytically from the field's own screen-space derivative, so stripes stay razor sharp and fade to an even gray before they can alias into accidental moire. Color mode swaps the black and white for Vasarely style gradients, and the circle grids give every cell its own shape and hue.
Try it. Press and drag to push a bulge through the pattern; Shift-drag or right-drag pinches instead, and released lenses slowly relax. Use the arrows or number keys 1 to 7 (or the chips) to switch compositions with an iris wipe, C toggles color, R clears your lenses. Left alone it cycles through the set.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an op art generator in the style of Bridget Riley and Victor Vasarely with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and resizes with it. Render into a smaller offscreen canvas with ImageData (about half the window size) and draw it scaled up.
- For every pixel, compute normalized coordinates X and Y where the shorter side spans -1 to 1.
- Paint a checkerboard: a pixel is black when floor(X * 6) + floor(Y * 6) is odd, off-white otherwise.
- Add a bulge before sampling the pattern: for a lens at (cx, cy) with radius R and strength s, move the sample point to c + d * (1 - s * exp(-|d|^2 / R^2)), where d is the offset from the center. Positive s magnifies the squares into a sphere, negative s squeezes them.
- Animate the lens along a slow path with requestAnimationFrame.
Once that works, make it beautiful:
- Antialias the edges without supersampling: compute the pattern as continuous fields (X * 6 and Y * 6), estimate how much each changes from one pixel to the next, and blur each stripe edge by exactly that amount. XOR two soft stripes to get a soft checkerboard.
- Add a second composition: wavy horizontal lines, field = Y * 24 + sin(X * 7 + Y * 2.5 + time). Watch it shimmer.
- Let the mouse press and drag a bulge around, and Shift-drag to pinch.
- Add a color mode that maps ink and paper to two smooth gradients across the canvas.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as zigzag concentric rings in the style of Riley's Blaze, a Vasarely grid of circles that morph into diamonds inside the bulge, or exporting a poster-sized still.
