Displacement & Masking

In digital design, distorting an image is rarely about drawing complex 3D meshes. Instead, it is usually an exercise in pixel offset and stenciling — pushing and pulling coordinates before the browser renders the final color to the screen. By displacing pixels along mathematical functions or layering them under stencil masks, we can recreate analog defects, optical refractions, and vintage print misalignments entirely in real-time.

This interactive laboratory explores two separate approaches to image distortion: displacement mapping (which bends a light field based on a gradient map to simulate fluted glass) and coordinate masking (which selectively reveals a shifted duplicate of an image to imply a vector pattern).

1. Fluted Glass Refraction

The first effect replicates the physical lens behavior of ribbed, reeded, or fluted glass panels. Instead of absolute layering, it applies an SVG displacement filter driven by a custom-generated gradient map. The color values of a helper texture dictate the direction and magnitude of pixel offset — forcing the image to stretch, repeat, and snap along the ribs.

Adjust the thickness and refraction scale to control the optical warping. Use the Adjust button or press D to reveal the controls panel.

2. The Masked Offset Glitch

The second effect plays a trick on human perception. Rather than drawing wavy contours, it renders two identical image layers: a clean background layer and a shifted foreground layer. An invisible stencil is placed on the foreground layer. The viewer's eyes follow the thin lines of the stencil, reading the spatial offset as curves and contours within the image itself.

Toggle between topographic contours, circular banknote Guilloche nets, or orbital spirographs.

3. Mechanics & Comparison

While both techniques result in beautiful, tactile visuals, they operate on different layers of the browser pipeline:

• Masking (Stencil) uses the alpha channel of a secondary canvas. It is binary and stateless — it does not alter pixel coordinates. It simply hides or reveals layers that have already been offset using standard CSS transform.
• Displacement (Refraction) uses the SVG <feDisplacementMap> filter primitive. It is coordinate-aware — it shifts pixel lookups horizontally or vertically based on the red and green color channels of a map. The sharp grid-snapping lines of the fluted glass occur where the gradient wraps back around, causing the sampler to jump abruptly across coordinates.