Drawing

• Drawing - background, fill/stroke, the shapes, and the transform stack
• Accumulation - noClear keeps the canvas across frames, so drawing piles up (long exposures, paint-on-canvas). Accumulator is a layer that keeps the running mean, so a picture built from faint samples converges.
• Depth of field from light - LineSpray and Bokeh draw lines as millions of scattered points through a lens. The points are added into a running mean until bokeh emerges. LineSpray and Bokeh are built on the .light particle style and the develop print filter.
• HDR & tone mapping - toneMap rolls bright, out-of-range light off the screen instead of clipping it. The page covers the linear-float pipeline behind every frame, and the glow/bloom and sandpainting looks.
• Wide gamut & HDR output - colorOutput presents through Display P3 and keeps highlights brighter than white. Color(displayP3:) makes a color outside sRGB. The page also covers HDR10 video export.
• Retained batches - makeBatch records heavy static drawing once, and drawBatch replays it each frame from the GPU at almost no cost. The transform in force at draw time places or stamps the whole recording.
• Layered effects - renderTarget/withTarget draw into off-screen layers. filtered/postProcess run GPU filters over them (blur, bloom, color grade, gradient map, edges, halftone, …), and the result composites back with blend modes. combined combines two layers (mask, displace, mix, depth-of-field defocus). generate makes procedural pattern sources, feedback makes trails and tunnels, and compose { } (with aside helper layers) declares a stack of layers as one block.
• Looks - ColorLUT reads a .cube file, the color table a grading tool exports, and Filter.lut applies it to a layer or the whole frame, a cube by tetrahedral interpolation. A look can also be built in code and written out as a .cube.
• Text - drawText draws with bitmap, outline (.ttf/.otf), and stroke (single-line / plotter) fonts. textToShapes turns text into geometry.
• Images - loadImage, drawImage, tint, and pixel access. Load or author a raster image, draw it scaled or transformed, and recolor it.
• Sample photographs - SamplePhoto, twenty bundled photographs with their credits, for trying an image technique or a filter on a real picture.
• Glyph mosaic - drawGlyphMosaic rebuilds an image as a grid of text glyphs. Each cell's character is chosen by its measured ink in the active font.
• Halftone - drawHalftone rebuilds an image as the classic print dot screen. The dots are area-exact, sit on a rotated grid, and are real circles for the plotter path.
• Autostereogram - Image.autostereogram hides a depth map in a repeating pattern. When the repeats are paired, a surface nobody drew stands out of the page.
• Photo mosaic - Image.mosaic + averageColor + drawMosaic rebuild a picture out of many smaller pictures. Each cell takes the nearest picture by average color in linear light.
• Pixel sorting - Image.pixelSorted reorders runs of an image's own pixels along rows or columns, with each run bounded by brightness (the classic glitch melt).
• Seam carving - Image.seamCarved and SeamMap resize a picture by removing the paths of pixels that hold the least detail. What matters then keeps its shape. Masks hold something still or take it out.
• Color - the Color type, the OKLab family and mixing, Ramps and Palettes (loaded from a file or extracted from an image), dithering an image down to a palette, and perceptual Colormaps
• Spectral color - Spectrum is the reflectance curve behind a color. The page covers .paint mixing (pigments meeting in green, Kubelka-Munk), filtering light by multiplication, and Color(wavelength:) with blackbody glow. It also covers the spectral GPU effects (.thinFilm, .diffraction, .paintMix).
• Geometry - the Vector2, Rectangle, Shape/Contour, and Path value types, plus the Grid layout helper, curved outlines, shape booleans, and offsetting
• SVG import - loadSVG/drawSVG read vector artwork into Shapes and Contours (paths with curves and arcs, the basic shapes, groups and transforms, fills and strokes). The result is ready for booleans, offsets, hatching, and re-export.
• Fourier epicycles - Epicycles + drawEpicycles rebuild any closed outline as a chain of spinning circles (the discrete Fourier transform as a drawing machine). A term count sets the result anywhere from a soft, blurred version of the outline to an exact trace.
• Envelopes & caustics - envelope finds the curve that every line of a family touches. caustic finds the bright curve where reflected or bent light crowds together.
• Classic curves - the classic closed-form curves as geometry builders: phyllotaxis, lissajous, rose, superellipse, supershape, hypotrochoid/epitrochoid (the spirograph gears), guilloche (the rose engine's twisted, cam-shaped rings), the damped-pendulum Harmonograph, spirolateral (a walk of growing steps, repeated until it returns to its start), Chaikin smoothed(iterations:) corner cutting, and smoothed(neighbors:), the moving average that keeps every point
• Anamorphosis - Anamorphosis makes a plate that reads only in a mirrored cylinder standing on the page, seen from one viewing spot. The page covers the wrap at true size and the map for points, contours, and shapes. It also covers what an eye can see of a cylinder, and the search that reads a plate back.
• Clothoid - the curve whose bend grows at a steady rate (the Euler or Cornu spiral). It gives you the easement that joins a straight run to a turn with no kink. It also gives the single curve that fits two points and two headings, a smooth path through waypoints, and polyline corners a vehicle could take.
• Shape morphing - ShapeMorph tweens one Shape into another. Every in-between is a real vector shape (contour pairing, corner-keeping correspondence, holes that grow in and out). Shape is Tweenable, so a Timeline can sequence geometry.
• Voronoi & Delaunay - tessellate points into vector geometry: Voronoi cells (the "crystallization" look) and the dual Delaunay triangle mesh. Lloyd relaxation and weighted power diagrams are included.
• Spatial index - SpatialIndex answers what is near a point without reading every point. It finds the nearest, the k nearest, everything within a radius, and everything inside a box. It runs over a uniform grid or a k-d tree.
• Fitting - RadialBasis fits a smooth field of numbers, vectors, or colors through values you know at a few scattered places. A field of vectors can also act as a warp. Fit.minimize walks a few parameters downhill against a cost you write.
• Truchet tiling - each grid cell gets one tile, turned to a random orientation. Identical parts then line up into flowing loops (.arcs) or a maze (.diagonals).
• Hitomezashi stitching - one bit per grid line sets the phase of its dashes. The shifted lines then weave into staircases, loops, and a two-tone cloth.
• Ten print - tenPrint picks one of two diagonals per cell by a coin flip. It then joins them into the long connected paths that made the picture famous.
• Kolam and sona - one line is launched between a field of dots and bounced off the edges until it closes. The finished pattern is gcd(rows, columns) loops, and walls steer the line.
• Celtic knotwork - the same line, given width and an alternating over-under rule. It is returned already broken where each cord passes under another.
• Crease patterns - the flat sheet that a folded or cut thing comes from. The page covers the Miura fold and its rigid folding in three dimensions, and rotating-squares kirigami. It also covers Kawasaki's and Maekawa's laws, which say whether a sheet can fold flat.
• Tiling & layout - the other ways to divide a canvas: HexGrid/TriangleGrid (the hex and triangle tilings, with hex distance, neighbors, and exact picking), subdivide (recursive panels, binary or quadtree), Maze (three carving algorithms, walls as clean line-work, solution and longest paths), and apollonianGasket (the kissing-circles foam)
• Aperiodic tilings - the tilings that never repeat: penroseTiling (kites and darts, rhombs, with the matching-rule arcs), wangTiling (edge-matching squares as one connected quilt), girihPattern (Islamic star patterns over any polygons, plus the five girih tiles), and spectreTiling (the einstein, straight or strictly chiral curved)
• Parquet deformations - parquetDeformation draws a tiling whose tile changes shape as you read across it. The geometry lives on the lattice's shared edges, so a square becomes an interlocking key with nothing coming apart on the way.
• Hyperbolic tiling - regular tilings of the hyperbolic plane in the Poincaré disk. hyperbolicTiling takes any {p,q} with (p-2)(q-2) > 4 and returns typed tiles with depth and a two-coloring parity. A viewpoint pans across the endless tiling.
• Strange attractors - chaotic systems drawn as points. Continuous 3D orbits (Lorenz, Rössler, Aizawa, …) are integrated with Runge-Kutta and orbited through the camera. The 2D iterated maps (Clifford, de Jong, Hénon, Gumowski-Mira, Ikeda, hopalong) are accumulated into density fields. AttractorFlow moves a million GPU particles through one field at once.
• SDF combinators - compose signed-distance fields so shapes merge instead of stacking: smooth union/subtract/intersect and morph, round/onion, and domain mirror/tile. You reach the operators through the SDF value type + drawSDF and a scoped smoothUnion { } block. They work in 2D and in a raymarched 3D form (SDF3D + drawSDF3D).
• Measured distance fields - Filter.distanceField measures a distance field back out of a drawn layer. The field says how far every pixel is from the nearest edge, and which way that edge lies. Filter.fieldMap reads the field back as contours, grown and shrunk shapes, and outlines. A shader can also read it as a Voronoi keyed to the picture.
• Layer styles - an outline, a drop or inner shadow, an outer or inner glow, or a lit bevel, each read from a layer's alpha and each one filter. The outline, the glows, and the bevel measure the layer's distance field, and the shadows blur it.
• The frequency domain - a picture read as a sum of waves instead of a grid of pixels. Filter.fourier writes the spectrum on the GPU and .inverseFourier reads it back. That means filtering by scale is a shape drawn over the spectrum. It also means a field can be built from nothing but a description of its energy.
• Light in a flat sketch - Combine.light computes the light that reaches every pixel of a flat scene. Draw the scene in one layer and the lights in another. One measurement (radiance cascades) then gives you shadows that soften with distance, falloff, light through a gap, and the color a lit wall reflects.
• Local averages - the average of the neighborhood around every pixel at a fixed cost, over a summed-area table. Filter.boxBlur is a blur whose cost does not grow with its radius. Filter.adaptiveThreshold cuts a picture to two tones against each pixel's own surroundings, so uneven light stops mattering.

To write GPU code yourself (fragment shaders, the shader library, and compute kernels), see Shaders.