Raster ops

Every node has an op and a set of options. Options that are not given fall back to the op's own defaults, so { op: "halftone" } is valid on its own.

The full list is available at runtime:

import { RASTER_OP_NAMES } from "nodality";

Every op at a glance

This table is generated from the library source on each publish, so it cannot drift from the code the way a hand-kept list does. The sections below explain what the options mean.

op	stage	options
aberration	displace	amount, radius
blobs	color	alpha, color, count, dispersion, frost, iridescence, radius, refract, rim, trail
copy	color	amount, count, fade, points, radius, rotate, scale
dither	color	amount, ink, levels, mono, paper, radius, size
duotone	color	colors, radius
echo	color	decay, strength, tint, tintAmount
edges	color	color, strength
flow	warp	radius, scale, seed, speed, strength
halftone	color	amount, angle, ink, paper, radius, size, softness
hexalize	cell	lift, radius, size
mask	field	at, from, invert, radius, remap
merge	color	mix
noise	field	amount, remap, scale, speed
offset	warp	radius, strength
stir	warp + color	curl, decay, dye, dyeAmount, dyeFade, dyeResolution, force, intensity, pressure, pressureIterations, radius, rainbow, resolution, sheen, strength, tint

15 ops, plus switch. Drivers: static mouse hover scroll time.

Generated from nodality 1.1.13.

Colour

duotone — maps luminance onto two colours.

{ op: "duotone", colors: ["#0b1b2b", "#e6e9ed"], radius: 180 }

halftone — a rotated dot screen.

{ op: "halftone", size: 5, angle: 15, ink: "#111", paper: "#fff", softness: 0.4 }

dither — ordered (Bayer) dithering. levels sets the number of steps per channel; mono: true reduces to a single ink.

{ op: "dither", levels: 4, mono: true, ink: "#0b1b2b", paper: "#fff" }

edges — edge detection.

{ op: "edges", strength: 1.0, color: "#fff" }

echo — trailing ghosts of the previous frames.

{ op: "echo", decay: 0.9, strength: 0.6, tint: "#2ad", tintAmount: 0.3 }

blobs — refractive blobs drawn over the content.

{ op: "blobs", count: 3, radius: 40, refract: 0.6, rim: 0.4,
  iridescence: 0.3, frost: 0.2, alpha: 0.9, trail: 0.5 }

copy — repeat the content in a point set or ring.

{ op: "copy", count: 6, radius: 120, rotate: 0.5, scale: 0.8, fade: 0.6 }

Warp and displace

offset — pushes pixels away from the driver position.

{ op: "offset", strength: 10, by: "mouse", radius: 180 }

stir — a stable-fluids solver. The heaviest op by far, and the one with the most knobs. resolution and pressureIterations trade cost against quality; dye and rainbow add colour carried by the flow.

{ op: "stir", force: 0.6, intensity: 0.4, curl: 12, decay: 0.98,
  resolution: 128, pressureIterations: 20, radius: 160 }

aberration — splits the channels.

{ op: "aberration", amount: 8, radius: 200 }

Cell

hexalize — quantises into a hexagonal grid. With lift, cells near the driver come toward the viewer instead of deforming.

{ op: "hexalize", size: 14, lift: 0.35, by: "mouse", radius: 180 }

Without lift the edge is drawn flat, which is what you want if the grid should be invisible until the pointer arrives.

Fields

mask and noise draw nothing. They write a scalar field for other ops to read — see Composition.

{ op: "mask", from: "radial", at: [0.5, 0.5], radius: 220, invert: false }
{ op: "noise", scale: 3, speed: 0.2, amount: 0.5 }

from accepts radial (the default), vertical or horizontal. at is fractional — [0, 0] is the top-left, [1, 1] the bottom-right. Left out, a radial mask follows the driver, which itself defaults to the centre.

Options every node accepts

option	meaning
by	driver: static mouse hover scroll time
radius	falloff distance in pixels around the driver's position
as	name the field this node writes (default "mask")
masked	read a field: true for "mask", or a name
live	false opts the node out of the HTML-in-Canvas backend

The driver supplies a position and an amount that fade with radius, so by and radius are normally set together. by: "static" means the effect is applied evenly and never animates.

Adding your own

import { registerRasterOp } from "nodality";

registerRasterOp("pixelate", { stage, decl, code, uniforms });

stage decides where the code runs in the chain; decl declares uniforms, code emits GLSL, and uniforms uploads values each frame.