Gallery  ›  Techniques  ›  thi.ng/umbrella — Functional Creative Coding Ecosystem

thi.ng/umbrella — Functional Creative Coding Ecosystem

Overview

thi.ng/umbrella is a monorepo of 214+ composable TypeScript/JavaScript packages for functional programming, data-driven development, and creative coding. Created by Karsten Schmidt (toxi/toxiclibs fame), it represents a fundamentally different approach to generative art: functional composition over imperative state, data as shapes over class hierarchies, and multi-target rendering from a single geometry description.

thi.ng/genart-api is a companion project — a platform-independent API for browser-based generative art that decouples artworks from specific presentation platforms (fx(hash), EditArt, galleries, personal sites). Switching platforms requires only swapping a <script> tag.

Philosophy & Design Principles

Unlike p5.js (imperative, global state, setup/draw loop) or Three.js (OOP scene graph), thi.ng is:

Art-Relevant Packages

Geometry & Spatial

Vectors & Math

Color

Noise & Randomness

Rendering

Shaders (GPU)

Data & Composition

Key Patterns Worth Adopting

1. Data-Driven Geometry → Multi-Target Rendering

The hiccup pattern (representing shapes as nested arrays) allows the same geometry description to render to multiple targets:

// Shape is just data — an array describing a circle
const shape = ["circle", { fill: "#f00", stroke: "#000" }, [100, 200], 50];

// Render to Canvas 2D
drawCanvas(ctx, shape);

// Or render to SVG string
const svg = serialize(convertTree(shape));

Takeaway: When building geometric compositions (tilings, subdivisions, L-systems), separate geometry generation from rendering. Store shapes as data structures, then render them. This makes SVG export trivial — the same geometry that draws to canvas can construct an SVG string.

2. Tessellation as Composable Operations

thi.ng/geom-tessellate treats tessellation as composable, stackable transformations:

polygon → earCut → triangles
polygon → inset(0.2) → smaller polygon + rim
polygon → edgeSplit → subdivided polygon

Operations can be chained: polygon → inset → earCut → edgeSplit produces increasingly complex results from a simple starting shape.

Takeaway: Tessellation-based art benefits from this composable approach. Rather than hardcoding a specific tessellation, expose the tessellation strategy as a parameter (dropdown: “Ear Cut”, “Quad Fan”, “Edge Split”, “Inset”) and apply recursively.

3. SDF Composition with Smooth Booleans

thi.ng/geom-sdf demonstrates constructing complex shapes from simple primitives via smooth boolean operations with controllable blending:

Takeaway: See references/sdf-2d.md for full 2D SDF reference with implementations in both JavaScript and GLSL.

4. Perceptual Color as Default

thi.ng/color’s approach of working in Oklab/LCH by default (not sRGB) produces dramatically better palettes:

Takeaway: See references/color-science.md for full color science reference. All palette generation here prefers perceptual interpolation.

5. GenArt API Parameter System

thi.ng/genart-api defines 17 parameter types beyond basic sliders:

Takeaway: The Ramp parameter concept is particularly interesting for animated pieces — a value that automatically evolves over time along a user-defined curve, rather than staying static or requiring manual keyframing.

6. Seedable PRNG Architecture

thi.ng uses SFC32 with 128-bit seeds, with the PRNG sourced from a platform adapter. This ensures:

Takeaway: The gallery’s runtimes already use seeded randomness; the 128-bit seed approach could provide better distribution for complex pieces that consume millions of random values.

Notable Example Projects

These thi.ng/umbrella examples demonstrate techniques directly applicable to algorithmic art:

ExampleTechniqueRelevance
ifs-fractalBarnsley fern via IFSFractal rendering with functional transforms
geom-tesselAnimated recursive tessellationsComposable tessellation operations
poly-subdivAnimated polygon subdivisionsSubdivision as iterative refinement
geom-voronoi-mstPoisson-disk + Voronoi + MSTCombining spatial algorithms
poisson-circlesPoisson-disc samplingEven spatial distribution
color-themesProbabilistic LCH themesPerceptual palette generation
shader-ast-raymarchRaymarching in TypeScriptType-safe shader authoring
shader-ast-noiseGPU noise functionsPortable noise implementations
pixel-sortingInteractive pixel sortingImage manipulation techniques
pixel-ditherDithering algorithmsOrdered/error-diffusion dithering
geom-terrain-viz2.5D hidden-line terrainTerrain visualization
cellular-automataTransducer-based CAFunctional cellular automata
geom-hexgridHex grid tessellationsHexagonal grid generation
layout-gridgenRandomized nested gridsRecursive layout subdivision
canvas-recorderAnimated typographic gridSelf-modifying compositions

When to Reference thi.ng Patterns