Thunk Machine shader reference

A shader changes the image your patches draw. It can soften edges, break the picture into blocks, bend it, change its colors, or leave trails. You can start by adding one effect to an ordinary scene array.

The first sections walk from a simple effect to more controlled combinations. The effect index then gives you every built-in effect method, with all its parameters. Looking for noiseWarp? Start with a gently moving distortion, or jump to its parameter table.

Start with one effect

Put your drawing patches in an array, then add an effect after the closing bracket:

const picture = () => {
  background(12, 16, 30);
  noStroke();
  fill(240, 100, 160);
  circle(width * 0.4, height * 0.5, height * 0.45);
  fill(70, 210, 230);
  rect(width * 0.55, height * 0.25, width * 0.2, height * 0.5);
};

const scene = [picture].blur(3);
scene.activate();

Run this scene cell. The drawing creates the image, and .blur(3) softens it. The number is a blur radius in pixels. Try 1, then 6, and rerun the cell to see the difference. You do not need to create a ShaderChain object for this.

The following variations replace the scene declaration and activation while keeping picture above them. Try each variation separately.

If you already have a patch, use its name in place of picture. A group works too: [myPatch, anotherPatch].blur(3) blurs the image they draw together. These effect methods are supplied by Thunk Machine; they are available in its editor.

Add a gently moving distortion

Replace the example's scene declaration with:

const scene = [picture].noiseWarp(0.02, 4, 0.1);
scene.activate();

noiseWarp bends the image with smoothly varying noise. Its three arguments are amount, scale, speed, in that order:

This effect is built into Thunk Machine and is ready to use directly in your scene code.

Combine effects in order

Add another method to process the result of the first:

const scene = [picture]
  .noiseWarp(0.02, 4, 0.1)
  .pixelate(64, 36)
  .saturate(0.6);
scene.activate();

This bends the picture, samples it onto a 64-column by 36-row grid, then reduces its saturation. Read the effects from top to bottom. The order changes the result: blurring after pixelation softens the blocks; pixelating after blur gives hard blocks sampled from a soft picture.

Try one or two effects first so you can see what each contributes. Most methods in this reference work directly on arrays. Every parameter entry states whether that shorthand is available.

Choose which patches get the effect

Effects apply to the array they are attached to. Nest an affected group inside your scene when you want to keep the background or other patches clear of the effect:

const backdrop = () => background(12, 16, 30);
const orb = () => {
  noStroke();
  fill(70, 210, 230);
  circle(width * 0.5, height * 0.5, height * 0.35);
};
const sharpLine = () => {
  stroke(255);
  strokeWeight(2);
  line(0, height * 0.7, width, height * 0.7);
};

const scene = [
  backdrop,
  [orb].blur(4),
  sharpLine,
];
scene.activate();

Here only the orb is blurred. The backdrop is outside its group, and the line is drawn afterward. To blur the entire composition, put .blur(4) after the outer closing bracket instead.

Set only the parameters you need

Yes: an effect that accepts an options object lets you supply just a few properties. Every omitted property keeps its documented default. Property order does not matter.

const scene = [picture].lensWarp({
  strength: 0.25,
  twist: 0.3,
});
scene.activate();

This sets only the lens strength and twist. Its center remains at x: 0.5, y: 0.5, its radius stays 0.4, feather stays 0.15, and wrap stays 0. You do not need to copy the whole parameter table. Twist is in radians here.

The same approach works for effects with many settings. For example, .lightRays({ samples: 12, strength: 0.6 }) changes two settings, and .atmosphere({ opacity: 0.4 }) changes one. Omitted settings retain their behavior; omission does not switch them off.

There are two calling styles, and the signature in each reference entry tells you which one to use:

For positional methods, use undefined to keep an earlier default while setting a later argument:

const scene = [picture].noiseWarp(undefined, undefined, 0);
scene.activate();

That keeps noiseWarp's default amount 0.03 and scale 4, while setting speed to 0. An options object is supported only where the signature shows braces. noiseWarp, blur, rotate, and other positional methods do not accept a named options object. The choice between an array and an explicit ShaderChain does not change the method's argument style.

Connect motion audio and controls

A number gives a fixed setting. A function supplies a changing value on each rendered frame. You can do this directly on an array:

const scene = [picture]
  .noiseWarp(({ audio }) => 0.01 + audio.bass * 0.04, 4, 0.1)
  .hue(({ time }) => time * 0.02);
scene.activate();

Bass now increases the distortion strength, while time slowly cycles the colors. The other noiseWarp arguments remain ordinary numbers. In an options object, individual properties can be functions too:

const scene = [picture].lensWarp({
  strength: 0.25,
  twist: ({ controls }) => controls.twist,
});
scene.activate();

Create a Control named twist in the performance or scene before using that example. The callback reads the Control; it does not create it. To map a 0–1 knob to a half turn, use ({ controls }) => controls.twist * Math.PI. To read a declared modulation instead, use modulations in place of controls.

Use time for global elapsed seconds or sceneTime for scene-relative motion. Keep callbacks small and return finite numbers. Four-component parameters can use a callback returning four numbers; a palette callback returns the entire palette. A fixed phase holds still unless the effect also has a speed or rate that advances it.

When to use ShaderChain

Array effects cover many everyday treatments. An explicit ShaderChain is useful when you want to name the effect separately from its source, control the blend of the entire treatment, temporarily bypass it, or use an effect that has no array method.

Here is an effect built separately and placed after the picture:

const softWarp = new ShaderChain()
  .noiseWarp(0.02, 4, 0.1)
  .blur(2);

const scene = [picture, softWarp];
scene.activate();

It processes the pixels drawn before it in its current layer. Placing it after two patches processes their combined image. Putting it inside a nested group, such as [backdrop, [orb, softWarp], sharpLine], limits its input to that group.

The methods and parameters are the same ones used on arrays. An options object can still contain just one or two properties:

const lensLook = new ShaderChain().lensWarp({ twist: 0.3 });

Include lensLook after a source in your scene to see it. Like the earlier partial-object example, this retains the default lens strength, position, radius, feather, and edge behavior.

What a separate chain lets you control

Whole-chain controls apply to the combined treatment:

const softWarp = new ShaderChain()
  .noiseWarp(0.02, 4, 0.1)
  .blur(2)
  .mix(0.6);

const scene = [picture, softWarp];
scene.activate();

.mix(0.6) blends 60% of the completed treatment with 40% of the original input. Use .mix(0) for the original picture or .mix(1) for the full treatment. You can also pass a live callback to mix. This is wet/dry mixing; it is different from making the entire layer transparent with array .opacity().

For example, native color grading accepts a short options object and requires an explicit chain:

const warmGrade = new ShaderChain().gradeColor({
  temperature: 0.2,
  saturation: 0.85,
});
const scene = [picture, warmGrade];
scene.activate();

Build an effect array or a chain while evaluating your code, outside draw(). Animate its numeric parameters through callbacks. Appending operators every frame would keep growing the treatment.

Find the right parameter table

This guide covers all 84 built-in effect methods. Every name in the effect index is a method you can call in scene code. The index shows whether it works on arrays, an explicit ShaderChain, or both. The array name colorShift is listed alongside its ShaderChain equivalent, shift.

Each entry gives the call signature, parameter defaults, units, ranges, and a short example. For example, use .recursiveCopies({ angle: 0.15 }) to rotate nested copies. The braces show that you can supply only the named settings you need, and the angle table tells you that this value is in radians.

Examples that create an unnamed chain demonstrate the method call; assign the chain a name and place it after a source to use it in a scene. Names such as secondImage and displacementMap stand for patches you supply. See Imported and custom shaders for effects defined outside this built-in API.

Read units and defaults correctly

For positional calls, argument order matters. Use undefined to retain an earlier default while setting a later argument, such as .bloom(undefined, 8, 0.6). Option-object methods accept named settings, such as .lensWarp({ radius: 0.3 }).

Some surprising defaults are intentional in the current implementation: new ShaderChain().rotate() uses 10 radians, .scale() uses 1.5, .scroll() offsets half an image on each axis, .contrast() uses 1.6, and .brightness() adds 0.4. Array rotate() and scale() override those two defaults to 0 and 1. Pass explicit values when the desired starting point is neutral.

Choose an effect

Effect index

These are the built-in effect methods, alphabetically. Choose a name to see its full signature and parameters. Use the arguments shown in that entry; the parentheses below identify callable methods and do not imply that every method can be called without arguments.

Position and repetition

transform

Move, resize, and rotate an image around an anchor. Sampling wraps at the image edges; use crop or a mask when you need a bounded region.

.transform(x, y, scaleX, scaleY, angle, anchorX, anchorY) — Also available on arrays.

new ShaderChain().transform(0.1, 0, 0.8, 0.8, 0.2, 0.5, 0.5);

rotate

Rotate around the image center, with optional continuous rotation.

.rotate(angle, speed) — Also available on arrays.

new ShaderChain().rotate(0, 0.1);

The explicit chain default is 10 radians, whereas [patch].rotate() defaults to 0. Pass an angle explicitly. This older operator uses normalized rectangular coordinates and wraps the sampled image.

scale

Zoom around a chosen center. Values above 1 enlarge the picture.

.scale(amount, xMult, yMult, offsetX, offsetY) — Also available on arrays.

new ShaderChain().scale(1.2, 1, 1, 0.5, 0.5);

The explicit chain default is 1.5, while [patch].scale() defaults to 1. Negative values do not mirror this operator: it uses absolute magnitudes. Sampling wraps.

mirror

Fold each chosen axis into a reflected pair.

.mirror(horizontal, vertical) — Also available on arrays.

new ShaderChain().mirror(1, 0);

This creates mirrored repetition; it is not a simple whole-image flip.

crop

Hide pixels outside a rectangular region without resizing the remaining picture.

.crop(left, right, top, bottom) — Also available on arrays.

new ShaderChain().crop(0.1, 0.9, 0.2, 0.8);

pixelate

Sample the picture on a coarse grid. Fewer cells make larger blocks.

.pixelate(pixelX, pixelY) — Also available on arrays.

new ShaderChain().pixelate(32, 18);

Omitting pixelY uses its own default of 20; it does not copy pixelX.

repeat

Tile the image in both directions, optionally staggering alternating rows and columns.

.repeat(repeatX, repeatY, offsetX, offsetY) — Also available on arrays.

new ShaderChain().repeat(4, 3, 0.5, 0);

repeatX

Tile in the horizontal direction.

.repeatX(reps, offset) — Also available on arrays.

new ShaderChain().repeatX(4, 0.25);

repeatY

Tile in the vertical direction.

.repeatY(reps, offset) — Also available on arrays.

new ShaderChain().repeatY(4, 0.25);

kaleid

Fold the picture into radial mirrored sectors around its center.

.kaleid(sides) — Also available on arrays.

new ShaderChain().kaleid(6);

For an adjustable center and aspect-correct circular geometry, use kaleidoscopeFold.

scroll

Offset texture sampling in both directions and wrap at the edges.

.scroll(x, y, speedX, speedY) — Also available on arrays.

new ShaderChain().scroll(0, 0, 0.03, 0);

The defaults offset both axes by half an image. Use zeros for no initial shift. Scroll moves sampling coordinates, opposite to transform translation.

scrollX

Scroll the horizontal sampling coordinate and wrap.

.scrollX(x, speed) — Also available on arrays.

new ShaderChain().scrollX(0, 0.03);

scrollY

Scroll the vertical sampling coordinate and wrap.

.scrollY(y, speed) — Also available on arrays.

new ShaderChain().scrollY(0, 0.03);

Distortion and symmetry

noiseWarp

Warp sampling with smoothly varying value noise.

Use it directly on an array: [picture].noiseWarp(0.02, 4, 0.1). The arguments are positional: amount, scale, then speed. See the introductory example to try it in a scene.

.noiseWarp(amount, scale, speed) — Also available on arrays.

new ShaderChain().noiseWarp(0.025, 5, 0.15);

displacementField

Apply aspect-correct noise displacement with a repeatable seed and explicit phase.

.displacementField({ amountX, amountY, frequency, roughness, seed, phase, angle, wrap }) — Also available on arrays.

new ShaderChain().displacementField({ amountX: 0.04, amountY: 0.02, phase: ({ time }) => time * 0.1 });

rippleWarp

Create a radial wave concentrated around a ring.

.rippleWarp({ amount, frequency, phase, x, y, radius, width, wrap }) — Also available on arrays.

new ShaderChain().rippleWarp({ radius: 0.3, phase: ({ time }) => time * 0.4 });

waveWarp

Bend the image with directional sine waves.

.waveWarp({ amount, secondary, frequency, phase, angle, wrap }) — Also available on arrays.

new ShaderChain().waveWarp({ amount: 0.04, frequency: 5, phase: ({ time }) => time * 0.2 });

lensWarp

Magnify or pinch a local area, optionally twisting it.

.lensWarp({ strength, x, y, radius, feather, twist, wrap }) — Also available on arrays.

new ShaderChain().lensWarp({ strength: 0.5, radius: 0.35, twist: 0.6 });

reflectAxis

Reflect one side across an adjustable line.

.reflectAxis({ x, y, angle, flip }) — Also available on arrays.

new ShaderChain().reflectAxis({ x: 0.5, angle: Math.PI / 4 });

kaleidoscopeFold

Make a circular, aspect-correct kaleidoscope with adjustable framing.

.kaleidoscopeFold({ segments, x, y, angle, zoom, sourceAngle }) — Also available on arrays.

new ShaderChain().kaleidoscopeFold({ segments: 8, sourceAngle: ({ time }) => time * 0.1 });

radialCopies

Place separate copies around a circle. Transparent sources make the individual copies easiest to see.

.radialCopies({ count, x, y, radius, copyScale, angle, orientation, follow, sourceX, sourceY, fade, original }) — Also available on arrays.

new ShaderChain().radialCopies({ count: 8, radius: 0.3, copyScale: 0.18 });

More copies require more texture samples per output pixel.

recursiveCopies

Overlay progressively smaller copies of the current image, with repeated offsets and rotation.

.recursiveCopies({ depth, ratio, x, y, offsetX, offsetY, angle, fade, original }) — Also available on arrays.

new ShaderChain().recursiveCopies({ depth: 6, ratio: 0.72, angle: 0.15 });

For a gentle back-and-forth turn of 4–12 degrees, convert the animated value to radians:

new ShaderChain().recursiveCopies({
  angle: ({ time }) =>
    (8 + Math.sin((time ?? 0) * 0.4) * 4) * Math.PI / 180,
});

This repeats the current image within one frame; feedback instead uses the previous frame. More depth adds texture samples.

Blur light and edges

blur

Soften nearby pixels using a nine-tap filter.

.blur(radius) — Also available on arrays.

new ShaderChain().blur(3);

sharpen

Increase local contrast against four neighboring samples.

.sharpen(amount) — Also available on arrays.

new ShaderChain().sharpen(0.6);

edgeDetect

Replace RGB with a grayscale edge image while retaining the incoming alpha.

.edgeDetect(amount, radius, alphaEdges) — Also available on arrays.

new ShaderChain().edgeDetect(1.5, 1, 1);

bloom

Add a compact glow from four neighboring bright samples.

.bloom(amount, radius, threshold) — Also available on arrays.

new ShaderChain().bloom(0.6, 5, 0.55);

For a wider, tinted halo with adjustable threshold softness, use lightBloom.

vignette

Darken the picture toward the screen edges.

.vignette(amount, softness) — Also available on arrays.

new ShaderChain().vignette(0.4, 0.4);

For a movable center, elliptical shape, and adjustable radius, use focusVignette.

rgbSplit

Separate red and blue samples in opposite directions, leaving green in place.

.rgbSplit(amount, angle) — Also available on arrays.

new ShaderChain().rgbSplit(4, 0);

lightBloom

Spread light from bright image regions into a tinted halo.

.lightBloom({ strength, radius, threshold, softness, tint, amount }) — Also available on arrays.

new ShaderChain().lightBloom({ radius: 24, strength: 0.8, tint: [0.4, 0.8, 1, 1] });

Uses 25 halo taps per pixel. A transparent source is needed for alphaGlow to outline a shape; an opaque background makes the whole layer its silhouette.

alphaGlow

Build a colored halo from the source silhouette, using alpha rather than brightness.

.alphaGlow({ strength, radius, threshold, softness, tint, amount, outerOnly }) — Also available on arrays.

new ShaderChain().alphaGlow({ radius: 24, strength: 0.8, tint: [0.4, 0.8, 1, 1] });

Uses 25 halo taps per pixel. A transparent source is needed for alphaGlow to outline a shape; an opaque background makes the whole layer its silhouette.

lightRays

Draw radial shafts of light from bright regions toward an origin.

.lightRays({ x, y, reach, samples, decay, threshold, softness, strength, tint, amount }) — Also available on arrays.

new ShaderChain().lightRays({ x: 0.5, y: 0.2, reach: 0.7, samples: 16 });

lightSweep

Move a bright band across existing pixels without expanding their alpha.

.lightSweep({ phase, angle, width, softness, wrap, strength, tint, amount }) — Also available on arrays.

new ShaderChain().lightSweep({ phase: ({ time }) => time * 0.2, width: 0.15 });

focusVignette

Shade outside an adjustable elliptical focus area while preserving alpha.

.focusVignette({ x, y, radius, softness, aspect, angle, strength, tint, amount }) — Also available on arrays.

new ShaderChain().focusVignette({ radius: 0.5, softness: 0.25, strength: 0.6 });

Masks and cutouts

lumaMask

Make dark pixels transparent while keeping bright pixels.

.lumaMask(threshold, softness, invert) — Also available on arrays.

new ShaderChain().lumaMask(0.3, 0.08, 0);

luma

Make dark pixels transparent using a luminance key.

.luma(threshold, tolerance) — Also available on arrays.

new ShaderChain().luma(0.4, 0.1);

Like lumaMask with inversion off. It changes alpha, whereas thresh changes RGB to black and white.

chromaKey

Remove pixels close to a chosen RGB color.

.chromaKey(r, g, b, tolerance, softness) — Also available on arrays.

new ShaderChain().chromaKey(0, 1, 0, 0.18, 0.08);

Place the keyed image in a nested layer over the replacement background. Applying the key after both layers also removes matching pixels from the background.

wipeMask

Reveal the image with a directional edge, a moving band, or a radial sweep.

.wipeMask({ mode, progress, angle, width, softness, x, y, invert, amount }) — Also available on arrays.

new ShaderChain().wipeMask({ mode: 0, progress: 0.6, angle: 0.3 });

x and y choose the radial center; they do not reposition a linear wipe.

windowMask

Cut the image into a movable shape, keeping the inside by default.

.windowMask({ shape, x, y, width, height, angle, feather, cornerRadius, sides, invert, amount }) — Also available on arrays.

new ShaderChain().windowMask({ shape: 1, width: 0.8, height: 0.5, cornerRadius: 0.04 });

compoundMask

Combine two shape masks before applying them to the image.

.compoundMask({ first, firstShape, firstAngle, firstCorner, firstSides, second, secondShape, secondAngle, secondCorner, secondSides, mode, feather, invert, amount }) — Also available on arrays.

new ShaderChain().compoundMask({ mode: 2, first: [0.5, 0.5, 0.8, 0.8], second: [0.5, 0.5, 0.4, 0.4] });

The example cuts a circular hole out of a larger circular window.

noiseMask

Reveal the picture through a seeded noise field.

.noiseMask({ threshold, softness, frequency, roughness, seed, phase, invert, amount }) — Also available on arrays.

new ShaderChain().noiseMask({ threshold: 0.5, phase: ({ time }) => time * 0.1 });

spatialFade

Fade transparency by distance or by position along a direction.

.spatialFade({ mode, x, y, radius, angle, falloff, invert, amount }) — Also available on arrays.

new ShaderChain().spatialFade({ radius: 0.5, falloff: 0.25 });

tilePanels

Repeat the image inside separated panels, with optional mirroring and fit modes.

.tilePanels({ columns, rows, gap, offsetX, offsetY, stagger, mirrorX, mirrorY, fit }) — Also available on arrays.

new ShaderChain().tilePanels({ columns: 3, rows: 2, gap: 0.05, fit: 2 });

Color and palettes

posterize

Quantize each RGB channel into stepped tonal intervals.

.posterize(bins, gamma) — Also available on arrays.

new ShaderChain().posterize(6, 1);

For an explicit number of output levels and optional dithering, use posterizeDither.

shift

Add the fractional part of each supplied value to its channel.

.shift(r, g, b, a) — On arrays, use colorShift.

new ShaderChain().shift(0.1, 0, 0.2, 0);

On arrays, use .colorShift(...); native Array.shift() still removes the first item and is not a shader effect. Use brightness for a signed brightness adjustment.

invert

Blend RGB toward its photographic negative.

.invert(amount) — Also available on arrays.

new ShaderChain().invert(1);

contrast

Scale RGB around middle gray.

.contrast(amount) — Also available on arrays.

new ShaderChain().contrast(1.2);

brightness

Add an equal offset to RGB.

.brightness(amount) — Also available on arrays.

new ShaderChain().brightness(0.08);

thresh

Convert RGB into a black-and-white luminance threshold, preserving alpha.

.thresh(threshold, tolerance) — Also available on arrays.

new ShaderChain().thresh(0.5, 0.02);

color

Multiply the four image channels by individual values. Negative multipliers use the inverted channel first.

.color(r, g, b, a) — Also available on arrays.

new ShaderChain().color(1, 0.6, 0.8, 0.75);

rgba

Multiply the four image channels by individual values.

.rgba(r, g, b, a) — Also available on arrays.

new ShaderChain().rgba(1, 0.6, 0.8, 0.75);

Use color for the special negative-value inversion behavior; rgba always performs direct multiplication.

saturate

Blend between grayscale and the original color.

.saturate(amount) — Also available on arrays.

new ShaderChain().saturate(0.5);

hue

Rotate hue while keeping HSV saturation and value.

.hue(amount) — Also available on arrays.

new ShaderChain().hue(0.15);

colorama

Shift all three HSV components and wrap the resulting RGB for nonlinear color cycling.

.colorama(amount) — Also available on arrays.

new ShaderChain().colorama(({ time }) => time * 0.01);

sum

Make grayscale by summing weighted R, G, B, and alpha.

.sum(scale) — Also available on arrays.

new ShaderChain().sum([0.299, 0.587, 0.114, 0]);

The existing alpha is preserved. The alpha weight contributes to grayscale brightness; it does not set output alpha.

paletteMap

Map image luminance through a chosen sequence of colors.

.paletteMap({ palette, phase, repeat, steps, amount }) — Explicit ShaderChain only.

new ShaderChain().paletteMap({ palette: [[0.02, 0.03, 0.1], [0.1, 0.8, 0.8], [1, 0.8, 0.2]], amount: 0.8 });

Palette RGB uses 0–1. Divide a 0–255 channel value by 255 before including it in the palette.

gradeColor

Apply exposure, white balance, contrast, saturation, gamma, and hue in one grading operation.

.gradeColor({ exposure, contrast, saturation, temperature, tint, brightness, gamma, hue, amount }) — Explicit ShaderChain only.

new ShaderChain().gradeColor({ exposure: 0.2, contrast: 1.1, saturation: 0.9, temperature: 0.15 });

duotone

Map luminance between a dark color and a light color.

.duotone({ dark, light, midpoint, softness, amount }) — Explicit ShaderChain only.

new ShaderChain().duotone({ dark: [0.05, 0.02, 0.1, 1], light: [1, 0.7, 0.3, 1] });

posterizeDither

Reduce RGB to a specified number of levels with optional ordered dithering.

.posterizeDither({ levels, gamma, dither, amount }) — Explicit ShaderChain only.

new ShaderChain().posterizeDither({ levels: 5, gamma: 1, dither: 0.6 });

Texture and surface

surfaceGrain

Add fine monochrome or colored grain without changing alpha.

.surfaceGrain({ strength, size, colored, seed, phase, amount }) — Explicit ShaderChain only.

new ShaderChain().surfaceGrain({ strength: 0.08, phase: ({ time }) => Math.floor(time * 12) });

halftone

Render luminance as ink dots or lines on paper, retaining the incoming alpha.

.halftone({ size, angle, mode, softness, offsetX, offsetY, ink, paper, amount }) — Explicit ShaderChain only.

new ShaderChain().halftone({ size: 10, angle: Math.PI / 4, mode: 0 });

surfaceDither

Convert luminance to ink and paper with ordered or random thresholds.

.surfaceDither({ mode, size, spread, gamma, seed, phase, ink, paper, amount }) — Explicit ShaderChain only.

new ShaderChain().surfaceDither({ mode: 0, size: 2, spread: 1 });

emboss

Turn directional luminance differences into a relief-like surface.

.emboss({ radius, angle, strength, bias, colorize, tint, amount }) — Explicit ShaderChain only.

new ShaderChain().emboss({ radius: 2, strength: 2, colorize: 0.3 });

Video damage and feedback

videoNoise

Combine a low-resolution sample grid with stepped grain, scanlines, and occasional line dropouts.

.videoNoise({ amount, rate, width, height, seed }) — Also available on arrays.

new ShaderChain().videoNoise({ amount: 0.3, width: 320, height: 240, rate: 24 });

vhrDistortion

Simulate a curved video display with tearing bursts, occasional vertical rolls, scanlines, and edge shading.

.vhrDistortion({ amount, rate, bend, roll, seed }) — Also available on arrays.

new ShaderChain().vhrDistortion({ amount: 0.4, bend: 0.12, roll: 0.2 });

vhsTape

Add tape drift, a traveling crease, head-switching near the bottom, color bleed, and brightness variation.

.vhsTape({ amount, tracking, bleed, rate, seed }) — Also available on arrays.

new ShaderChain().vhsTape({ amount: 0.35, tracking: 0.5, bleed: 0.3 });

The color-bleed implementation takes multiple texture samples, even when its contribution is low.

tvDistortion

Mix independently adjustable television interference treatments.

.tvDistortion({ amount, vertJerk, vertMovement, bottomStatic, scanlines, rgbOffset, horzFuzz, rate, seed }) — Explicit ShaderChain only.

new ShaderChain().tvDistortion({ amount: 0.4, vertMovement: 0, bottomStatic: 0.2 });

glasses3D

Make a red/cyan anaglyph treatment from a single image.

.glasses3D({ amount, separation, depth }) — Explicit ShaderChain only.

new ShaderChain().glasses3D({ separation: 5, depth: 0.4 });

This is a stylized image treatment, not stereo geometry or a true depth map.

glitch

Create intermittent stepped bursts of displacement, RGB separation, crushing, corrupted blocks, and analog interference.

.glitch({ amount, rate, bands, blockPixels, seed, trigger, displace, channels, crush, corrupt, analog }) — Also available on arrays.

new ShaderChain().glitch({ amount: ({ audio }) => audio.bass * 0.6, rate: 8 });

For only deliberate beat hits, drive amount to 0 between hits. The trigger alone is not an on/off gate.

datamosh

Replace selected blocks with displaced pixels from the previous chain output.

.datamosh({ amount, rate, blockPixels, seed, trigger, motion }) — Also available on arrays.

new ShaderChain().datamosh({ amount: 0.4, blockPixels: 24, motion: 1 });

Needs previous-frame history; a fresh binding starts without old imagery. This is a visual simulation, not actual codec corruption.

feedback

Blend toward the brighter of the current picture and the previous chain output.

.feedback(amount, decay, zoom) — Also available on arrays.

new ShaderChain().feedback(0.6, 0.96, 1.005);

This is a brightening/max feedback blend, not a conventional crossfade or a frame delay. It retains one previous output texture; parameters act every frame, so perceived decay depends on frame rate.

Combining two images

modulate

Use the red and green channels of a private image to displace the current one.

.modulate(image, amount) — Also available on arrays.

new ShaderChain().modulate([displacementMap], 0.05);

The input is rendered privately and is not displayed as another parent layer. Transparent input is neutral. Sample coordinates wrap. Positive red/green displacement makes features appear left/up.

add

Add the second image’s RGB as light.

.add(image, amount) — Also available on arrays.

new ShaderChain().add([secondImage], 0.75);

multiply

Multiply the two images’ RGB. White is neutral; black darkens.

.multiply(image, amount) — Also available on arrays.

new ShaderChain().multiply([secondImage], 0.75);

screen

Screen the second image over the first, usually brightening. Black is neutral.

.screen(image, amount) — Also available on arrays.

new ShaderChain().screen([secondImage], 0.75);

overlay

Apply an overlay blend: dark base pixels multiply, light base pixels screen.

.overlay(image, amount) — Also available on arrays.

new ShaderChain().overlay([secondImage], 0.75);

difference

Use the absolute RGB difference. Identical colors become black.

.difference(image, amount) — Also available on arrays.

new ShaderChain().difference([secondImage], 0.75);

subtract

Subtract the second image’s RGB from the first.

.subtract(image, amount) — Also available on arrays.

new ShaderChain().subtract([secondImage], 0.75);

lighten

Keep the lighter value of each channel.

.lighten(image, amount) — Also available on arrays.

new ShaderChain().lighten([secondImage], 0.75);

darken

Keep the darker value of each channel.

.darken(image, amount) — Also available on arrays.

new ShaderChain().darken([secondImage], 0.75);

mask

Multiply the first image’s alpha by the second image’s luminance times alpha.

.mask(image, amount) — Also available on arrays.

new ShaderChain().mask([secondImage], 0.75);

A transparent or empty mask hides the source at amount 1.

alphaMask

Multiply the first image’s alpha by the second image’s alpha, ignoring color.

.alphaMask(image, amount) — Also available on arrays.

new ShaderChain().alphaMask([secondImage], 0.75);

A transparent or empty mask hides the source at amount 1.

composite

Composite a private image over preceding pixels with a named mode.

.composite(image, mode, amount) — Also available on arrays.

new ShaderChain().composite([secondImage], 'alpha', 0.75);

Procedural sources

metaballField

Generate shaded blobs that merge when their fields overlap, composited over the incoming picture.

.metaballField({ count, radius, threshold, softness, phase, seed, x, y, scale, angle, spreadX, spreadY, variation, red, green, blue, shadowRed, shadowGreen, shadowBlue, opacity, lightAngle, lightStrength, gloss, rim }) — Also available on arrays.

new ShaderChain().metaballField({ count: 6, phase: ({ time }) => time * 0.4 });

More blobs add field calculations per pixel. Keep phase fixed for a still frame rather than rebuilding the chain.

atmosphere

Generate layered noise as clouds, fog, texture, or wisps, composited over the incoming picture.

.atmosphere({ mode, frequency, octaves, roughness, lacunarity, seed, phase, offsetX, offsetY, stretch, direction, warp, billow, coverage, softness, density, contrast, lightAngle, lightStrength, horizon, heightFalloff, breakup, tint, shadow, opacity }) — Also available on arrays.

new ShaderChain().atmosphere({ mode: 0, coverage: 0.55, phase: ({ time }) => time * 0.08 });

These modes share one operator. Animate phase, offsetX, and offsetY with callbacks for moving clouds, fog, noise textures, or wisps. Noise octave count, warp, lighting, and breakup affect work per pixel.

Chain controls and inspection

These belong to an explicit new ShaderChain(), rather than an array layer.

.blend('screen') combines the completed effect with its original input. .screen([anotherPatch]) combines the current image with a separate private image input. .mix() applies once to the whole chain; an individual operator's amount affects that operator.

Array-only helpers include .translate(x = 0, y = 0), .opacity(amount = 1), .append(...patches), .fx(...effects), and .mute(enabled = true). See Layer composition for their scene behavior. Use .colorShift() on arrays; .shift() remains JavaScript's native array operation.

Order scope and transparency

Start with a short chain and add one effect at a time. .pixelate(24, 14).blur(3) softens the pixel blocks; .blur(3).pixelate(24, 14) gives hard blocks sampled from a softened picture. A key or mask changes alpha, so it reveals a lower layer only if that lower layer is outside the processed group.

const keyedLook = new ShaderChain()
  .chromaKey(0, 1, 0, 0.18, 0.08)
  .alphaGlow({ radius: 16, strength: 0.6 });
const scene = [replacementBackground, [greenScreenSource, keyedLook]];
scene.activate();

Here replacementBackground and greenScreenSource stand for your own patches. A black background is opaque: it hides layers underneath. For a halo around a subject, keep its group transparent and draw the background outside that group.

Private image arguments must be arrays, such as .screen([secondImage], 0.5). Their patches receive the frame context but render into their own target. Changing the input structure requires reevaluating the consumer scene. Do not create cycles between image inputs. Use distinct bindings for effects that should have independent temporal histories.

Performance while playing

Compatible operations can share a shader pass, but neighborhood filters and image-input operations introduce boundaries when earlier operations need to be materialized. A one-pass effect can still be expensive if it evaluates many noise octaves, copies, or texture taps. Count, depth, samples, and octaves are useful quality controls as well as visual parameters.

At show resolution, check a cold launch and several warmed returns through your actual scenes. First use may compile shaders; a warmed return can reuse resources. Test with Push pad launches when available, and watch occasional stalls as well as typical latency. Headless browser results do not measure physical pad-to-display latency.

Keep chains and image inputs stable while playing; animate numbers through callbacks. Reduce resolution or simplify expensive chains if sustained frame rate drops. A smaller amount often changes appearance without removing the sampling work. Bypass can skip the chain draw; private inputs have their own lifecycle. Feedback and datamosh need a previous-frame texture; more independent bindings mean more retained history while active. The host bounds reusable resources and clears old feedback imagery when resources change owners.

Troubleshooting

Imported and custom shaders

An imported ISF file defines its own inputs, so its names and defaults cannot be inferred from a built-in effect with a similar name. Inspect the imported patch's settings and ISF metadata. Thunk Machine supports the documented subset described in ISFSource; use that section for input types, limits, and file format.

For a custom WebGL patch, allocate graphics resources once, reuse them, resize when necessary, and release them in dispose(). The manual's shader chapter covers custom shader interfaces and adaptation. The defaults in this reference describe the built-in methods. For an imported shader, use the defaults in its own source.

For an optional Library patch, open its card’s Guide → Parameters or its source cell for that patch’s own settings. Patch names and units may differ from the built-in methods used inside them.

Implementation references

• Native operations, defaults, and GLSL
• Array method availability and overridden defaults
• Scene composition and scope
• General API reference