This Nile pipeline, PaintBeziers, takes a stream of beziers (a
disc, a star and a thick stroke, made in Nile from shapes written in plain
TypeScript), clips and rasterizes them, and paints them with
Paint, the texture you write here. A texture is itself a
pipeline, from points to colours: ApplyTexture expands the spans
into pixels and asks Paint for each pixel's colour, and
TypeScript writes the pixels to the canvas. The pipeline is parameterized by
the clip rectangle and by the texture, which can itself take textures (a blur,
a blend) as parameters. The compiler runs in this page: each edit compiles
your Paint with gezira's gradients, compositors and filters to
JavaScript, and, for the GPU, to a WGSL function the fragment shader calls
for each pixel.
This page: about 540 lines of Nile (all of gezira) and 340 lines of TypeScript (80 of them the example textures), compiled by umgeni.
How to use: pick an example from the menu, or edit the
source; the picture updates as you type. Paint must be a texture
(Point >> Color). Open The WGSL your Paint became
to see the shader. Textures with filters paint on the CPU only.
Paint became