Filter FabJS evaluates four formulas—red, green, blue, and alpha—for every pixel. Intermediate calculations use floating-point values; final channel output is clamped to 0–255.
Core variables
r g b a | Source channels, 0–255. |
c | Source channel matching the formula currently being evaluated. |
x y | Current pixel coordinates. |
X Y | Image width and height. |
z Z | Current channel index and channel count. |
i | Perceptual RGB luminance. |
u v | Signed YUV chroma. Native float bounds are u: -55–55 and v: -78–78, with spans U=110 and V=156. Legacy imports retain Filter Factory's historic bound constants. |
d m M | Direction, centre distance, and half-diagonal distance. |
Controls and sampling
ctl(i) | Reads control 0–7 as a value from 0–255. |
val(i,a,b) | Maps a control into range a–b. |
src(x,y,z) | Nearest-neighbour source sampling with clamped edges. |
srcWrap / srcMirror | Nearest sampling with repeating or mirrored edges. |
srcLinear(x,y,z) | Bilinear source sampling for smoother transforms and displacement. |
cnv(k1,…,k9,d) | Applies a 3×3 convolution and divides by d. |
Numeric shaping
clamp, lerp, step, smoothstep, floor, ceil, round, fract, sign, bias, and gain. For lerp(a,b,t), t may be 0–1 or 0–255.
Procedural noise
hash2, valueNoise, perlin, worleyF1, worleyF2, fbm, turbulence, ridged, and periodicNoise. Noise functions return normalized values from approximately 0–1.
Coordinates, gradients, and patterns
wrap, mirror, linearGrad, radialGrad, angularGrad, checker, and brick. Gradient and pattern functions return 0–1 masks. Midnight Tartan demonstrates layered grid masks, pinstripes, and rotated thread hatching.
Analytic shape masks
line(x,y,ax,ay,bx,by,width,feather), circle(x,y,cx,cy,radius,feather), ring(x,y,cx,cy,radius,width,feather), box(x,y,cx,cy,width,height,rotation,feather), triangle(x,y,ax,ay,bx,by,cx,cy,feather), and grid(x,y,cellWidth,cellHeight,lineWidth,feather) return anti-aliased 0–1 masks. Coordinates and sizes use pixels; box rotation uses 0–1024 for one full turn. Try Analytic Shape Sampler for a clean reference.
Fractal masks
sierpinski(x,y,cx,cy,size,depth,feather) creates an equilateral Sierpiński gasket with depth clamped to 0–10. It folds barycentric coordinates into the selected child triangle at each level and feathers both the outer triangle and removed-hole edges, so Sierpiński Fractal remains deterministic and GPU-compatible.
Blend modes
multiply, screen, overlay, softLight, and difference. Each accepts either two arguments or an optional third opacity argument from 0–255.
Operators and rendering
+ - * / %, comparisons, logical and bitwise operators, shifts, ternary condition ? a : b, and comma sequencing. Formula edits are validated after a short pause but do not interrupt typing or update the image automatically. Select Render or press Ctrl/⌘ + Enter when the formula is ready. Controls not referenced by any formula are disabled automatically.
Image clipboard
Paste image loads the first image found on the clipboard. You can also press Ctrl/⌘ + V while focus is outside a text field. Copy image encodes the rendered output as an RGBA PNG, verifies that encoded transparency is present when the image contains alpha, and writes compatible PNG, HTML-image, and exact-PNG clipboard representations when the browser supports them. Its shortcut is Ctrl/⌘ + Shift + C. Some receiving applications ignore transparent clipboard formats and flatten the image; use Export PNG when the target application does this. Clipboard buttons may require browser permission and a trusted context such as HTTPS, localhost, or an approved local-file context.
Compiler and typed IR
Filter FabJS parses formulas into syntax trees and compiles them into a typed intermediate representation before rendering. Current channel formulas use scalar, integer, boolean, mask, and channel values; the IR schema also defines reserved composite value categories for engine extensibility. IR metadata remains renderer-neutral, and the WGSL analyzer makes the final WebGPU compatibility decision.
GPU rendering
The renderer selector offers Auto, GPU, and CPU. Auto compiles compatible typed IR into WGSL and runs it as one full-frame WebGPU compute submission. Phase 3.5 covers deterministic stateless formulas, including procedural noise, patterns, polar sampling, and fixed 3×3 convolution, so every native built-in can use WebGPU. Device loss is recovered on the next GPU render; unavailable WebGPU, legacy integer filters, bitwise/shift/comma expressions, rnd(), rst(), get(), put(), or shader errors automatically fall back to the CPU Worker. WebGPU normally requires HTTPS or localhost; opening the file directly may select CPU fallback.
Preview and transparency
The image area uses a Photoshop-style light checkerboard so transparent pixels are clearly visible in Filtered, Original, and Split views. The surrounding stage keeps its darker checker pattern for contrast, making alpha previews easier to read before exporting, copying, or pasting the image.
Built-ins and files
The built-in menu contains 28 alphabetized filters, including two glitch effects and procedural texture examples. Import automatically detects Filter FabJS native JSON projects and historic .afs files. Multiline AFS formulas and legacy line-continuation markers are reconstructed before parsing. AFS files use legacy integer-style math and therefore render on the CPU. Filter FabJS exports only its native JSON project format.
Development architecture
Filter FabJS v2.1 uses native ES modules during development. Parser, typed IR, GPU compiler, renderers, presets, file I/O, and UI controllers are separated to keep the codebase maintainable and renderer boundaries explicit. The build scripts can still produce a standalone HTML release.
Compatibility scope
This browser app targets RGBA images and common Filter Factory expressions. It is not a Photoshop plug-in and is not bit-exact for every historic edge case.
Distributed under GPL-2.0-or-later. Inspired by the open-source Filter Foundry project.