Compositing visuals with blend modes

When you layer a Hydra oscillator over camera feedback mid-set, or stack a glow pass on a geometry layer in Resolume, the blend mode is the single decision that determines whether the composite reads as intended or turns to mud. Club visuals live and die on this: additive stacks blow out under bright content, multiply kills a dark stage wash, and picking by trial-and-error costs you bars of music. This module builds the whole skill — reading a blend mode’s per-pixel formula and predicting its look before you apply it.

The arc starts supported: begin with the core definition of blending as per-pixel math, then drill the three workhorse formulas — multiply’s darkening product, screen’s invert-multiply-invert, and additive’s clipping sum — until you can state each mode’s black/white pass-through behaviour without thinking. From there, move to the conditional and family modes: the Overlay/Hard Light commutation, Soft Light’s gentler curve, and the dodge/burn mirror-symmetry principle that lets you derive unfamiliar modes from familiar ones instead of memorising them. Difference, divide, darken/lighten-only, and the hue/saturation/color/luminosity swaps round out the vocabulary.

The capstone removes the scaffolding: one fixed pair of source layers, at least twelve rendered composites, each captioned with its formula and a concrete use in a set. Every required atom is gated by that reel — you cannot caption a mode you cannot explain, and the family atoms are what let your captions say why you would reach for one mode over its siblings. The supporting atoms enrich rather than gate: dissolve’s stochastic grain is a stylistic outlier, and the layer-versus-tool blending distinction matters for destructive-editing workflows outside the live rig.

Walkthrough

Compositing is just per-pixel math between two layers — and Hydra gives you the workhorse formulas as chainable operators. You’ll composite one fixed source pair every way the engine offers, then stack them into a set-ready image. Open the Hydra editor and run each patch with Ctrl-Shift-Enter (hush() clears). Each fence is a complete patch; every one outputs to o0 so you see it. (The full 12-mode Photoshop reel — overlay, soft/hard/vivid/linear light, divide, the hue/sat/color/luminosity swaps — lives in an image editor; here you learn the ones a live GPU engine actually runs.)

1 — two layers, and what “blend” means. .blend(other, amount) is the plainest composite: a linear crossfade, amount of the top mixed into the bottom. Our two fixed sources — a warm oscillator and a cool noise field — averaged 50/50 ([[blend-mode-definition]], [[blend-mode-dissolve]]).

osc(20, 0.1, 0.8)
  .blend(noise(3).color(0.2, 0.5, 1), 0.5)   // 50/50 crossfade of the two layers
  .out(o0)

2 — additive (light adds up). .add(other, amount) sums the two layers’ colours, so overlaps get brighter and can clip to white — the “screen-family” glow you use for light, glints, and energy. White in either layer wins; black passes through ([[additive-blend-mode]], [[screen-blend-mode]]).

osc(20, 0.1, 0.8)
  .add(noise(3).color(0.2, 0.5, 1), 1)        // sum → brighter where they overlap
  .out(o0)

3 — multiply (darken). .mult(other) multiplies the layers, so anything dark in either stays dark — the inverse of add. Use it to tint, to burn shadows, to let one layer carve into another. White passes through; black wins ([[multiply-blend-mode]], [[darken-lighten-only-blend]]).

osc(20, 0.1, 0.8)
  .mult(noise(3).color(0.2, 0.5, 1))          // product → darker where either is dark
  .out(o0)

4 — difference (edges and inversions). .diff(other) takes the absolute difference of the two layers: matching areas go black, mismatched areas invert and glow. It’s the go-to for hard, glitchy, high-contrast edge accents ([[difference-blend-mode]]).

osc(20, 0.1, 0.8)
  .diff(noise(3).color(0.2, 0.5, 1))          // |A − B| → glowing edges, black where equal
  .out(o0)

5 — alpha compositing (layer) and cut-outs (mask). .layer(other) stacks the top layer using its alpha (transparency over, not math) — the way you drop a shape onto a scene. .mask(other) uses one layer’s luminance as a stencil to cut the other. Both here, so you see the shape sit and clip ([[hard-light-vs-overlay]], [[soft-light-blend-mode]]).

osc(20, 0.1, 0.8)
  .layer(shape(4, 0.3, 0.02).color(1, 0.8, 0.2))   // alpha-over: a diamond drops onto the field
  .mask(shape(64, 0.9, 0.4))                        // luminance stencil: soft circular vignette
  .out(o0)

6 — a stacked composite (the capstone). Real set images use several operators at once. Here: an additive glow over a base, multiplied by a slow luma for depth, with difference edge accents on top — one deliberate light pass, one dark pass, one edge pass ([[dodge-burn-blend-family]]):

osc(18, 0.08, 0.9).color(1, 0.4, 0.2)
  .add(noise(2.5).color(0.1, 0.4, 1), 0.6)    // light pass — additive glow
  .mult(osc(4, 0).color(0.7, 0.9, 1))          // dark pass — multiply a slow luma for depth
  .diff(shape(6, 0.4).scale(1.2))              // edge pass — difference accents
  .out(o0)

What good looks like. A composite should have a clear tonal intention — one operator doing the main job (glue, glow, or cut) and the others supporting, not four modes fighting to mid-grey mud. Additive and difference blow out fast: pull their amount down until the image breathes. The beginner tell is everything on .add at full strength, clipping to white. Name what each layer contributes — light, shadow, or edge — before you stack it. (Skill map: live-visualist Domain B4 — contrast and depth as language; use blend to build layers you can read.)

Now make it yours. Swap the two sources (voronoi, gradient, a camera s0) and re-run the whole tour. Animate .blend’s amount with () => Math.sin(time) * 0.5 + 0.5 for a crossfade transition. Build “screen” explicitly as invert → mult → invert to feel the formula. Feed a feedback buffer (src(o0)) as the second layer for compositing trails.