Colour, layers, and pixel-level image processing

This module builds the image-transformation half of a live-visuals practice: taking found imagery and reprocessing it into something that reads as yours on a projector. In a VJ or audiovisual set, raw photos and camera feeds rarely work as-is — they need recolouring to match the set’s palette, restructuring into tiles or filtered textures that move with the music, and compositing so multiple visual voices coexist on one screen. That whole pipeline — source image in, layered recoloured artwork out — is the capstone task.

The arc starts supported and on-canvas: switch to HSB so hue becomes a single controllable axis, then build gradients by lerping colours in a loop, then stack simple shapes under different blend modes and watch LIGHTEST and DIFFERENCE change the composite. Next the work moves off-screen — “PGraphics is an independent off-screen drawing layer” is the JIT pointer when your first layered sketch needs elements composed separately, and “cross-dissolving two layers per pixel with lerpColor()” shows how two buffers become one animated transition. Finally you drop to the pixel level: loadPixels() and the row-major index formula unlock palette extraction by sampling and sorting, pixel-mapping into drawn substitutes, brightness-driven tile rasterization, and convolution kernels for blur and sharpen.

Every required atom is load-bearing for the capstone: you cannot extract a palette without pixels[] access and 2D grid iteration, cannot remap into tiles without the brightness-to-size move, and cannot composite the final piece without PGraphics layers and blend modes. The supporting atoms enrich rather than gate — alpha-accumulation traces, continuous cellular automata, and frame differencing point at where this pixel toolkit goes next: generative textures and live camera input. Drill the gradient loop, pixels[] indexing, and nested grid iteration until they are automatic; everything else in the module rides on them.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

feedback-trail

osc(4).modulate(src(o0), 0.6).out(o0)

_{hydra-0022 · CC0-1.0}

function draw(){ fill(0, 20); rect(0, 0, width, height); circle(mouseX, mouseY, 40) }

_{p5live-0003 · CC0-1.0}

palette-cycle

osc(30, 0.1, 1).colorama(0.1).out()

_{hydra-0015 · CC0-1.0}

hsvrgb [fract (ft/6.28 + 0.1*time), 1, 1] >> rgb

_{punctual-0024 · CC0-1.0}

hue-shift

osc(30).hue(() => time * 0.1).out()

_{hydra-0016 · CC0-1.0}

hsvrgb [fract (ft/6.28 + 0.1*time), 1, 1] >> rgb

_{punctual-0024 · CC0-1.0}

gradient-ramp

gradient(0.3).out()

_{hydra-0170 · MIT}

[fr, fr*0.5, 1-fr] >> rgb

_{punctual-0033 · CC0-1.0}

grain-glitch

col += (h21(st + fract(u_time)) - 0.5) * 0.15;

_{glsl-0026 · public-domain}

blur-soften

filter(BLUR, 4)

_{p5live-0073 · CC0-1.0}

pixel-manipulation

loadPixels(); for(let i=0;i<pixels.length;i+=4) pixels[i]=255; updatePixels()

_{p5live-0030 · CC0-1.0}