A tutorial corpus,theory and all.

The canvas pixel grid, the top-left origin, and why y counts downward.

Before a single mark appears, there is the grid. Every pixel on the canvas holds an address — a pair of numbers descended from René Descartes, whose seventeenth-century insight that geometry could be written as algebra still underwrites the screen. But the digital canvas inverts the schoolbook plane: the origin sits at the top-left and y increases downward, a convention inherited from raster scanning, where electron beams swept CRT screens left to right, top to bottom. To address space numerically is also to make it instructable, as in Sol LeWitt's wall drawings, where a coordinate is a command. Casey Reas and Ben Fry built Processing on exactly this premise — location is the first vocabulary of visual code.

Every colour is three numbers — red, green, blue — that add like light.

Prereqs  The Coordinate System

On a screen, color is light, not pigment, and light adds. Every hue resolves to three numbers — red, green, blue — that combine the way overlapping spotlights do, climbing toward white rather than sinking toward black. This additive model rests on the trichromatic theory of Thomas Young and Hermann von Helmholtz: the eye carries three kinds of cone, and three channels suffice to fool it. Yet quantity is not perception. Josef Albers's "Interaction of Color" and Johannes Itten's Bauhaus teaching insist a color has no fixed identity — it shifts with its neighbors. Code makes this empirical: change one of three numbers and watch a relationship, not a swatch, transform.

Name a value once, reuse it; change one number and the whole sketch follows.

Prereqs  The Coordinate System

A variable is a name held against a value, and naming is the first act of abstraction. Bind a number once and the sketch reads from that single source; change it, and every dependent mark follows in concert. This is the parametric stance Karl Gerstner described in "Designing Programmes" — the designer authors not a fixed result but the system that yields a family of results. John Maeda's "Design By Numbers" taught the same economy: the smallest possible vocabulary, used with rigor. A well-chosen variable turns a static drawing into an instrument, where one dial governs a whole, and the work becomes a space of possibilities rather than a single fixed image.

if / else — how a program makes a decision and reacts.

Prereqs  Variables

A conditional is the point where a program chooses. Tested against a state — a position, a count, a click — an if/else branch sends execution one way or another, the computational descendant of the Boolean logic George Boole set out in his 1854 Laws of Thought, where every question reduces to true or false. Aesthetically, the branch is what lets a system behave rather than merely render: rules that respond produce variety without a human deciding each case. Sol LeWitt's conditional wall-drawing instructions anticipate this exactly. The decision is small, but accumulated across thousands of frames or marks, it is where character and surprise enter the work.

Repeat code with a counter — draw a hundred things from one block.

Prereqs  Variables

A loop repeats a block of code under the control of a counter, so a single instruction can produce a hundred marks. Iteration is the engine of pattern, and pattern is where order meets variation. The aesthetic lineage is serial and systematic: Sol LeWitt's permutational series, the optical rhythms of Bridget Riley, and above all Vera Molnár, who from the 1960s used algorithmic repetition with controlled disturbance to make drawings no hand could plan. The loop's quiet lesson is that richness need not come from effort but from structure — a few lines, run many times, with one value shifting each pass, yield complexity that feels both inevitable and alive.

A loop inside a loop walks rows and columns — the basis of grids and fields.

Prereqs  Loops

Place one loop inside another and iteration becomes two-dimensional: the outer counter walks the rows, the inner counter the columns, and together they populate a grid. The grid is modernism's deep structure — Josef Müller-Brockmann codified it in "Grid Systems in Graphic Design," and the Bauhaus and Swiss schools treated it as the rational armature beneath every composition. In painting, Agnes Martin's penciled lattices and Vera Molnár's perturbed matrices show the grid as both discipline and ground for deviation. Computationally, the double loop makes the grid generative: every cell receives an address, and any rule applied across that field — color, size, rotation — produces systematic, surveyable variation.

Turn the viewer into live input — follow the cursor, react to clicks.

Prereqs  Conditionals

Input is the moment the work stops performing for the viewer and begins responding to them. Reading the cursor's position and its clicks turns a one-way image into a feedback loop, a lineage running through Ivan Sutherland's 1963 "Sketchpad," the first program drawn on directly with a light pen, and Myron Krueger's "Videoplace," which made the whole body an instrument. Muriel Cooper's work at the MIT Media Lab pressed the same question: an interface is not a surface but a conversation. Aesthetically, interactivity reframes authorship — the artist composes a behavior, a space of possible responses, and the viewer completes each instance through their own movement.

Smooth motion from a small change every frame.

Prereqs  Variables · Conditionals

Motion on a screen is an illusion assembled from stillness: redraw the frame many times a second, change a little each time, and the eye fuses the sequence into continuous movement. The principle predates computers — Eadweard Muybridge's stop-motion locomotion studies and the craft codified in Frank Thomas and Ollie Johnston's "The Illusion of Life" both rest on it. What code contributes is that the change can be a rule rather than a hand-drawn cel; John Whitney's pioneering computer films derived motion from mathematics. The frame loop's discipline is incremental: state advances by small, consistent deltas, and from those modest steps emerges the felt sense of life.

Name a behaviour once, reuse it everywhere.

Prereqs  Loops · Animation & the Frame Loop

A function gives a name to a behavior so it can be invoked again without restatement. This is procedural abstraction — the structured-programming discipline Edsger Dijkstra and his contemporaries argued made large programs comprehensible — and it carries an aesthetic as much as an engineering virtue. To define "draw one tree" and call it across a forest is to work the way Sol LeWitt's wall-drawing instructions do: author the procedure once, let assistants or machines execute it many times and places. John Maeda's "Design By Numbers" prized this compression. A good function names a unit of intent at the right altitude, letting the artist think in gestures rather than in individual lines.

Move the coordinate system — translate, rotate, scale — kept local with push/pop.

Prereqs  Functions & Modularity

Rather than recompute where every point should land, a program can move the coordinate system itself — translating its origin, rotating its axes, scaling its unit — and draw simple shapes into that displaced frame. Push and pop save and restore these states on a stack, so transformations nest cleanly, each local to its branch. The idea descends from the transformation matrices of early computer graphics and, pedagogically, from Seymour Papert's Logo turtle in "Mindstorms," which taught geometry as motion relative to a moving body. Aesthetically, this shift in stance — change the world, not the object — is what makes recursive trees, mandalas, and articulated figures tractable and expressive.

Turn an angle into coordinates — the circle-and-wave math behind smooth motion.

Prereqs  Animation & the Frame Loop · Transformations & the Matrix Stack

Sine and cosine convert an angle into a pair of coordinates: a point traveling around the unit circle traces cosine on one axis and sine on the other, so circular motion and the wave become the same fact seen two ways. These periodic functions are the mathematics of everything that cycles — orbits, oscillations, breathing rhythms. Jules Antoine Lissajous's nineteenth-century figures, drawn by coupling two such oscillations, and John Whitney's harmonic computer films both show their visual fertility. For an artist, sin and cos are the shortest path from rigid grids to organic motion: smooth easing, pendular sway, spirals and ripples all fall out of feeding a steadily increasing angle into these two curves.

Store and draw many values at once — the data behind almost every generative sketch.

Prereqs  Loops

An array stores many values under one name, addressed by index, so a program can hold and manipulate a population rather than a single thing. This is the data structure behind multiplicity, and multiplicity is where emergence lives: hundreds of particles, each with its own position and velocity, stepped together in a loop. Craig Reynolds's 1987 "Boids" showed that a few local rules over such a collection yield flocking — coherent group behavior no individual encodes — and Daniel Shiffman's "The Nature of Code" made this the heart of creative coding. Aesthetically, the array lets the artist tend a system of many agents instead of drawing each by hand.

An image is a grid of colours your code can read and rewrite.

Prereqs  Arrays · Nested Loops & Grids

A digital image is a two-dimensional array of colors — a grid of samples that code can read, copy, and rewrite pixel by pixel. To see the picture as data is to gain the power to transform it arithmetically rather than by hand. The intuition is old: Georges Seurat's pointillism built images from discrete touches of color the eye integrates at distance, and Chuck Close's gridded portraits made the cell itself the subject. Raster graphics formalized this discretization for the machine. Aesthetically, treating pixels as numbers dissolves the boundary between image and process — a photograph becomes raw material, sampled and resynthesized, and any rule applied across the grid becomes a way of seeing.

Text as computational form — placed, measured, arranged by code.

Prereqs  The Coordinate System · Color

Set by code, text becomes computational form: glyphs placed, sized, and arranged by rule rather than laid out by eye. Typography has always been a system before it was an image — Jan Tschichold's "Die neue Typographie" argued for asymmetric, grid-governed order, and Karl Gerstner extended that into programmatic design. The digital turn made the letterform itself parametric: Wim Crouwel's "New Alphabet" was drawn for the constraints of the cathode-ray grid, and Zuzana Licko's Emigre faces embraced the coarse pixel matrix of the early Macintosh as a generative condition, not a limitation. To position type with numbers is to treat language as material — measured, modular, and open to systematic variation like any other mark.

Bundle data and behaviour into a reusable entity.

Prereqs  Functions & Modularity · Arrays

A class is a template that fuses state and behavior into a single named thing; an object is one instance of it, carrying its own data while sharing the class's methods. The idea descends from Simula, devised by Ole-Johan Dahl and Kristen Nygaard to model the world as interacting agents, and from Alan Kay's Smalltalk, which reframed computing as message-passing between objects. For an artist who codes, encapsulation is an aesthetic act: a Mover or Particle becomes a unit of intention, and the program's structure begins to mirror the scene it renders. Daniel Shiffman's "The Nature of Code" treats this bundling as the first step toward simulating living systems.

Manage many independent entities with one loop.

Prereqs  Objects & Classes · Arrays

Once behavior lives inside an object, an array holds many such objects, and a single loop animates an entire population—each entity tracking its own position, velocity, and history while obeying shared rules. This is the structural basis of the particle system, which William Reeves developed for Star Trek II (1982) and formalized in 1983 to render fire and explosions as thousands of autonomous primitives, and of Craig Reynolds's Boids, where simple per-agent rules yield flocking. The aesthetic payoff is emergence: complexity that no single object contains arises from their multiplicity. Daniel Shiffman's "The Nature of Code" builds steadily from one mover to a swarm, making the loop the engine of visual life.

Give each class one clear job.

Prereqs  Arrays of Objects

Good design assigns each class one clear responsibility, so that a change in one concern touches one place. The principle traces to Edsger Dijkstra's "separation of concerns" and to Niklaus Wirth's stepwise refinement, and is codified in Robert C. Martin's single-responsibility principle and the "Design Patterns" catalog of Gamma, Helm, Johnson, and Vlissides. Structure here is not bureaucracy but legibility: when a Renderer draws and a Physics object moves, each can be read, tested, and reused alone. For the coding artist, clean decomposition is an aesthetic of clarity—the same instinct that separates figure from ground, letting a system grow without collapsing into entanglement.

Last-in-first-out vs first-in-first-out — each right for different jobs.

Prereqs  Arrays

A stack and a queue are the same idea—an ordered collection—governed by opposite disciplines: last-in-first-out versus first-in-first-out. The stack models nesting and undo, and underlies expression evaluation and the call stack that tracks a program's own recursion; the queue models fairness and scheduling, serving what arrived first. Donald Knuth's "The Art of Computer Programming" treats both as foundational, and Dijkstra's work on stack-based evaluation made the structure central to how machines parse. The aesthetic lesson is that order is a constraint that creates meaning: by choosing which end to enter and leave, the same data yields entirely different temporal behavior.

A sequence built from nodes that point to each other.

Prereqs  Objects & Classes

A linked list builds a sequence not from contiguous memory but from nodes, each holding a value and a pointer to the next—structure made of indirection rather than adjacency. Donald Knuth's "The Art of Computer Programming" treats linked allocation as a foundational technique, trading the array's instant indexing for cheap insertion and rearrangement anywhere in the chain. The aesthetic is one of flexible connection: the list can grow, splice, and reorder without copying, and the same node pattern generalizes into trees and graphs. To make the invisible pointer visible—drawing each node and its arrow—turns an abstract reference into a tangible, navigable form.

Data that branches from a root into parents and children.

Prereqs  Linked Lists

A tree is data that branches from a single root into parents and children, encoding hierarchy and recursion in one shape. Donald Knuth devotes much of "The Art of Computer Programming" to trees as fundamental structures, and the form recurs across computing: file systems, scene graphs, parse trees. For the artist, the tree is also a generative principle—Aristid Lindenmayer's L-systems, elaborated with Przemyslaw Prusinkiewicz in "The Algorithmic Beauty of Plants," grow botanical form from recursive branching rules, and the same recursion produces fractals. Structure here is directly visual: the data's shape and the rendered image converge, and traversing the hierarchy becomes a way of drawing it.

Turn a key into a bucket for instant lookup.

Prereqs  Arrays · Typography & Text Systems

A hash map turns a key into an integer, that integer into a bucket, and a search into a near-instant lookup—trading order for speed by computing where a value lives rather than scanning for it. The hashing idea, credited to Hans Peter Luhn at IBM, is analyzed in depth in the third volume of Donald Knuth's "The Art of Computer Programming," "Sorting and Searching," where the central tension is collision: distinct keys landing in the same bucket. The aesthetic is less pictorial than architectural—the dictionary as a designed indirection—but visualizing the spread of keys across buckets reveals the quiet mathematics that makes constant-time access feel effortless.

Find the smallest, place it, repeat — sorting made visible.

Prereqs  Arrays · Loops

Selection sort proceeds by a simple, legible discipline: scan the unsorted region for the smallest element, swap it into place, and repeat, growing a sorted prefix one item at a time. Its quadratic cost makes it slow at scale, yet its transparency makes it ideal to watch. The algorithm-visualization tradition—Timo Bingmann's "The Sound of Sorting," which maps array values to pitch, and Steven Halim's VisuAlgo—turns this repetition into image and sound, revealing the comparisons as motion. The aesthetic principle is that an algorithm has a visible rhythm; making the invisible state of computation perceptible is itself a form of explanation.

Split, sort the halves, merge them back — the fast sort.

Prereqs  Selection Sort Visualized · Functions & Modularity

Merge sort embodies divide-and-conquer: split the array in half, sort each half recursively, then merge the two ordered runs into one. Attributed to John von Neumann in 1945, it achieves n-log-n time and is examined closely in the third volume of Donald Knuth's "The Art of Computer Programming." The structural beauty is recursive self-similarity—the same procedure applied at every scale until the base case of a single element—and the merge step, which interleaves two sorted streams in a single pass. Visualized, the recursion descends and reassembles; rendered as sound in Timo Bingmann's "The Sound of Sorting," the rebuilding of order becomes audible.

How work grows with input — fast at scale vs grinding to a halt.

Prereqs  Selection Sort Visualized · Merge Sort & Divide-and-Conquer

Complexity analysis asks not how long an algorithm takes but how its work grows as input grows—a question answered with asymptotic notation. The big-O symbolism originates with Paul Bachmann and Edmund Landau and was brought into computing by Donald Knuth, whose 1976 note "Big Omicron and big Omega and big Theta" fixed the modern usage. The intuition is comparative: constant, logarithmic, linear, quadratic, and exponential growth diverge so sharply that the curve, not the constant, decides what is feasible. For the coding artist this is a felt limit—the difference between a sketch that animates smoothly and one that stalls—and plotting the curves makes that boundary visible.

An x and a y bundled as an arrow — the unit of almost all motion.

Prereqs  Trigonometry with Sin & Cos · Animation & the Frame Loop

A vector binds two numbers—an x and a y—into a single geometric object: an arrow possessing both magnitude (its length) and direction (where it points). This bundling is the atom from which all motion is built; position, velocity, and acceleration are each vectors, and the arithmetic on them—addition, scaling, normalization to unit length—becomes the grammar of movement. Daniel Shiffman's "The Nature of Code" opens here precisely because the abstraction is load-bearing: once a point becomes an arrow, a scene of static dots becomes a field of tendencies. The aesthetic is one of latent energy, of stillness already leaning toward somewhere.

Force → acceleration → velocity → position — believable motion.

Prereqs  Vectors: Magnitude & Direction · Objects & Classes

Force produces acceleration, acceleration accumulates into velocity, and velocity accumulates into position—a cascade that Isaac Newton's second law, F = ma, compresses into a single proportion. Translated to code as repeated small steps, a form of Euler integration, the law lets gravity, wind, and friction be summed as vectors and applied each frame to a mass. The result is weight: objects that ease into motion and resist stopping, that fall and drift with conviction. Daniel Shiffman's "The Nature of Code" treats this as the engine room of simulation—nothing looks physical until acceleration, rather than position, is the thing being pushed. The aesthetic is gravity made legible.

Smooth back-and-forth motion from a sine wave.

Oscillation is motion that returns: a value swinging endlessly between two bounds, traced by the sine function. Mathematically it is the shadow of uniform circular motion projected onto a line—an angle advancing steadily while its sine rises and falls. This is simple harmonic motion, the same pattern governing a pendulum or a mass on a spring, and the parameters of amplitude, period, and phase tune its character. The aesthetic is breath and pulse: the gentle, predictable life of things that sway, bob, and wave. Layered and detuned, many sine waves compound into the complex rhythms underlying sound, ripples, and the appearance of organic ease.

A crowd of short-lived particles — fire, smoke, sparks, rain.

Prereqs  Arrays of Objects · Forces & Acceleration

A particle system manages a crowd of many short-lived elements, each with its own position, velocity, and lifespan, born from an emitter and dying when their time expires. No single particle matters; the population, continuously replenished, is the image—fire, smoke, rain, sparks. William Reeves developed the technique at Lucasfilm to render the Genesis effect for "Star Trek II" (1982), formally describing it in his 1983 paper, and Karl Sims extended it toward art in works such as "Particle Dreams." The aesthetic is the statistical sublime: turbulence and diffusion emerging from thousands of independent, individually trivial trajectories. Robert Hodgin's flight404 experiments show how flocking forces and color, layered over such systems, push them toward the painterly.

Motion that looks alive — an agent steers toward what it wants.

Prereqs  Forces & Acceleration · Vectors: Magnitude & Direction

An autonomous agent is a body that perceives a little of its world and steers itself—motion that reads as alive because desire, not a script, appears to drive it. Craig Reynolds formalized this in 1987 with Boids, where flocking emerges from three local rules—separation, alignment, cohesion—applied by each bird with no leader and no global plan. His later steering behaviors cast seeking, fleeing, and arriving as a force: the difference between desired and current velocity. The aesthetic is uncanny vitality—murmurations, schools, swarms—order arising from the bottom up. Daniel Shiffman devotes a central chapter to it, treating lifelike movement as an achievable, mechanical thing.

A force that pulls toward a rest length — bouncy, elastic motion.

Prereqs  Forces & Acceleration · Oscillation

A spring is a force with a memory of rest: stretched or compressed, it pulls back toward a preferred length in proportion to how far it has been displaced. Robert Hooke captured this in the 1670s as "ut tensio, sic vis"—as the extension, so the force. Coupled to mass and damping, the rule yields oscillation that decays, the bounce and settle of elastic things. Networks of springs become cloth, hair, soft bodies, and jelly-like constraint systems. The aesthetic is responsiveness: matter that wobbles, recoils, and overshoots before coming to rest, lending digital objects a tactile, almost muscular compliance that rigid translation never achieves.

A one-line rule over a row of cells produces fractals.

Prereqs  Arrays · Nested Loops & Grids

A one-dimensional cellular automaton is the minimal recipe for complexity: a single row of cells, each black or white, updated by a rule that reads only a cell and its two neighbors. Stephen Wolfram catalogued all 256 such rules in "A New Kind of Science" and found that a few—Rule 30, Rule 90—generate astonishing structure from a single seed. Rule 90 draws the Sierpiński triangle, a fractal nested in arithmetic; Rule 30 produces a stream so disordered it serves as a randomness source. The aesthetic is emergence at its starkest: deterministic, local, trivially simple, yet unfolding into patterns indistinguishable from the genuinely intricate.

Local rules on a grid that produce lifelike emergence.

Prereqs  1D Cellular Automata · Nested Loops & Grids

Extending the rule to a grid, where each cell consults its eight neighbors, yields John Conway's Game of Life—popularized by Martin Gardner in Scientific American in 1970. Two thresholds, one for birth and one for survival, are enough to produce a menagerie: blinkers that pulse, gliders that walk, guns that fire, configurations that compute. Nothing is choreographed; behavior is purely local, yet the board teems with what looks like ecology. The aesthetic is emergence as wonder—the irreducible gap between a rule one can state in a sentence and a world one cannot predict without running it. Life is the canonical demonstration that simple parts, multiplied, become genuinely surprising.

A function that calls itself on a smaller piece — self-similar form.

Prereqs  Functions & Modularity · Transformations & the Matrix Stack

Recursion is a function that solves a problem by calling itself on a smaller part, and a fractal tree is its most legible image: draw a branch, then ask each branch to draw two smaller branches, until the limbs grow too short to continue. Self-similarity—the whole echoed in every part—is the signature, the property Benoît Mandelbrot placed at the center of fractal geometry, observing that coastlines, ferns, and bronchi share this nesting across scale. The aesthetic is organic inevitability: forms that feel grown rather than placed. Small changes to branch angle or length ratio swing the result from bare winter limbs to lush, drooping canopies.

Rewrite a string with a rule, then draw it — growing plants and fractals.

Prereqs  Recursive Fractal Tree · Typography & Text Systems

An L-system grows form from text. Starting with a short string, a rewriting rule replaces each symbol with a longer phrase, repeated over generations, after which the final string is read as drawing commands—move, turn, branch. Aristid Lindenmayer devised the formalism in 1968 to model how plants and algae develop, and Przemysław Prusinkiewicz elaborated it into the lush imagery of "The Algorithmic Beauty of Plants." Because branching is encoded as bracketed push-and-pop, a handful of rules unfolds into ferns, bushes, and trees of convincing botanical character. The aesthetic is generative growth: development rather than assembly, a single grammar yielding endless non-identical specimens of one species.

Smooth randomness — the secret to organic motion and texture.

Prereqs  Trigonometry with Sin & Cos · Arrays of Objects

Perlin noise is randomness with continuity—values that vary unpredictably yet smoothly, so that neighbors stay close and no harsh jumps appear. Ken Perlin developed it in 1983, shortly after working on the computer imagery for "Tron" — frustrated that the graphics of that era looked mechanically regular rather than natural — and published it in 1985 as "An Image Synthesizer"; the technique earned him an Academy Award for Technical Achievement in 1997. Sampled across space it yields marble, clouds, and terrain; sampled across time it yields wandering, lifelike drift. The aesthetic is the organic middle ground between rigid order and white-noise chaos—the coherence of smoke, water, and wind. It is the standard cure for the tell-tale uniformity of pure random numbers, the texture of believable nature.

Evolve solutions by fitness, selection, and mutation.

Prereqs  Arrays of Objects · Complexity Intuition

A genetic algorithm borrows Darwin's logic as a search method: encode candidate solutions as genomes, score each by a fitness function, then breed the best through crossover and mutation, letting successive generations climb toward what works. John Holland formalized the approach in "Adaptation in Natural and Artificial Systems" (1975), framing evolution as a parallel exploration of possibility. Karl Sims gave it spectacular embodiment in "Evolved Virtual Creatures" (1994), where simulated bodies and brains evolved to swim, walk, and compete—forms no designer authored. The aesthetic is discovery without a designer: solutions that look purposeful yet were found, not drawn, often arriving by strange and unintuitive routes.

Weighted inputs that output yes or no — the simplest neuron.

Prereqs  Vectors: Magnitude & Direction · Trigonometry with Sin & Cos

A perceptron is the simplest learning unit: it multiplies each input by a weight, sums the results, and fires a yes or no depending on whether the total clears a threshold. Frank Rosenblatt introduced it in 1958, building on the earlier McCulloch–Pitts neuron, and showed it could adjust its own weights from labeled examples—learning, geometrically, to place a dividing line that separates one class from another. The aesthetic is conceptual rather than visual: a boundary drifting until it snaps into the right orientation. Its limits are equally instructive—Minsky and Papert noted in 1969 that a single perceptron cannot solve problems, like XOR, that no straight line can divide.

Perceptrons stacked in layers.

Prereqs  Perceptron as Line Classifier · Arrays of Objects

Stack perceptrons into layers and connect them, and the single dividing line becomes a surface that can bend: a network of weighted units, each feeding the next, capable of carving regions no straight boundary could. The hidden layer is the breakthrough—intermediate units that learn features—and training works by propagating error backward through the connections, the backpropagation algorithm popularized by Rumelhart, Hinton, and Williams in 1986, which answered the very limitation Minsky and Papert had exposed. The aesthetic is emergent capability from uniform parts: nothing in a single neuron anticipates the whole. This small architecture is the conceptual seed of every deep network that followed.

Place meshes in x, y, z and look at them with a camera.

Prereqs  Vectors: Magnitude & Direction · Transformations & the Matrix Stack

Three-dimensional graphics begin with a debt to Descartes: every point of form is an address in x, y, z, and a mesh is nothing but a list of such addresses joined into triangles. Nothing is seen until a camera imposes a viewpoint, projecting that coordinate lattice onto a flat image through a view frustum. The aesthetic is one of staged emptiness — a void that becomes architecture the moment vertices are placed and a lens is aimed. Ricardo Cabello's three.js made this stagecraft legible in the browser, descending from Ivan Sutherland's Sketchpad and the long lineage of computer-graphics pipelines that translate measured space into seen space.

In 3D you don't colour a shape — you light it.

Prereqs  3D Coordinate Space & Meshes · Color

A surface in three dimensions has no inherent color; it has a response to light. Shading models encode that response: Johann Heinrich Lambert's eighteenth-century Photometria established that a matte surface's brightness falls with the cosine of the angle to its light, while Bui Tuong Phong's 1973 model added the specular highlight that reads as gloss. Material and illumination are thus a single negotiation — roughness, metalness, and the placement of lamps decide what the eye receives. The aesthetic is chiaroscuro translated to arithmetic: form emerges from the gradient between lit and unlit, and a scene is composed less by painting objects than by directing the light that finds them.

Thousands of copies of one geometry in a single call.

Prereqs  3D Coordinate Space & Meshes · Arrays of Objects

Drawing a thousand objects need not mean a thousand commands. Instancing sends one geometry to the GPU a single time, accompanied by a list of per-copy transforms, so an entire forest, swarm, or crowd resolves in one draw call. The technique descends from the particle systems William Reeves developed for Star Trek II (1982) and formalized in his 1983 paper, and it underwrites the demoscene's appetite for dense, computed multitudes squeezed into tiny executables. Aesthetically it is an argument for emergence: identical parts, varied only in position, rotation, and scale, accumulate into pattern, flock, and field. The repetition is not monotony but the raw material of complexity.

A tiny program per pixel on the GPU — compute a colour from a coordinate.

Prereqs  Color · Trigonometry with Sin & Cos

A fragment shader is a small program the GPU runs independently for every pixel, computing a color from little more than a coordinate. Because thousands run in parallel, the model inverts ordinary drawing: rather than move a brush, one writes a rule that each point evaluates for itself. UV space — a normalized coordinate grid laid over the surface — is the canvas. The demoscene refined this parallel thinking inside kilobyte-sized intros, and Patricio Gonzalez Vivo and Jen Lowe's The Book of Shaders turned it into pedagogy. The aesthetic is procedural and self-similar: image as function rather than stored pixels, where mathematics is felt directly as light.

Draw in a shader by measuring — colour each pixel by distance to a shape.

Prereqs  Fragment Shaders & UV Space · The Coordinate System

A signed distance field asks, for every pixel, a single question: how far to the nearest surface? Color, shadow, and shape all follow from that scalar answer, and surfaces become implicit — defined by an equation rather than a list of vertices. Inigo Quilez ("iq") is the form's great expositor, whose Shadertoy experiments and articles on raymarching and smooth-minimum blending showed how spheres, boxes, and tori can be melted together in a few lines of math. The aesthetic is one of fluid, weightless geometry: shapes that interpenetrate and morph without seams, an austere beauty in which the entire scene is reconstructed from distance alone.

Generate text by which word tends to come next — ancestor of language models.

Prereqs  Hash Maps & Lookup · Typography & Text Systems

A Markov system predicts the next word from the recent past alone, treating language as a chain of probabilistic transitions. The idea is Andrey Markov's, who studied such dependent sequences in the early twentieth century; Claude Shannon turned it toward language in A Mathematical Theory of Communication (1948), generating eerily plausible English from letter and word statistics. The aesthetic is one of recombination — familiar fragments reassembled into uncanny, half-sensical drift, kin to the literary cut-up. Though crude beside modern systems, the Markov chain is their direct ancestor: every contemporary language model is, at heart, a vastly richer answer to the same question of what tends to come next.

Turn meaning into position — distance measures relatedness.

Prereqs  Vectors: Magnitude & Direction · Complexity Intuition

An embedding turns meaning into geometry: each word, sentence, or image becomes a point in a high-dimensional space arranged so that related things sit near one another. The premise is the distributional hypothesis — J.R. Firth's 1957 maxim that "you shall know a word by the company it keeps" — operationalized by Tomas Mikolov and colleagues in word2vec (2013), where vector arithmetic could capture analogy. Distance, usually cosine similarity, then measures relatedness directly. The aesthetic is cartographic and quietly strange: concepts laid out as terrain, with neighborhoods of synonyms and axes that, surprisingly often, correspond to human notions of gender, tense, or scale.

Search by meaning, not keywords — rank by closeness.

Prereqs  Embeddings & Vector Similarity · Merge Sort & Divide-and-Conquer

Semantic search retrieves by meaning rather than by matching characters. Each document and each query is converted to an embedding vector, and results are ranked by closeness — typically cosine similarity — so a search for "ocean" can surface "sea" without sharing a single letter. The approach generalizes across media once text and images occupy one space, as in Radford and colleagues' CLIP (OpenAI, 2021). Built atop the distributional tradition of word2vec, a small index becomes a map in which proximity is relevance. The aesthetic is one of associative recall over literal lookup: a system that gropes toward what is meant, tolerant of paraphrase, indifferent to mere spelling.

How image generators work in spirit — denoise toward structure.

Prereqs  Perlin Noise Fields · Arrays of Objects

Diffusion models build images by reversing decay. Training corrupts data with successive additions of noise until structure dissolves into static; generation learns to undo each step, walking backward from noise toward coherence. The framing comes from Jascha Sohl-Dickstein's 2015 work borrowing nonequilibrium thermodynamics, made practical by Jonathan Ho, Ajay Jain, and Pieter Abbeel in Denoising Diffusion Probabilistic Models (2020). The aesthetic is sculptural in the Michelangelo sense — form already latent in the marble, revealed by removing what is not the figure. Each denoising pass is a small act of resolution, randomness condensing into recognizable structure through many gentle corrections rather than one decisive stroke.

A smooth map of outputs where nearby points look alike.

Prereqs  Embeddings & Vector Similarity · The Coordinate System

A generative model compresses its outputs into a latent space — a continuous coordinate system where every point decodes to an image and nearby points decode to similar ones. Robin Rombach and colleagues' latent diffusion (Stable Diffusion, 2022) made this space efficient by operating in a compressed domain rather than on raw pixels. The aesthetic possibility is interpolation: gliding between points yields smooth morphs, and the space becomes a territory to be navigated rather than a set of fixed results. Artists including Mario Klingemann, Refik Anadol, and Memo Akten have treated these latent manifolds as a medium in themselves — landscapes of the possible, traversed as composition.

Treat a prompt like any input — set it, sweep it, animate it from code.

Prereqs  Variables · Latent Space as Coordinate Space

A prompt is not a one-time instruction but a controllable input — a coordinate that can be set, swept, and animated like any other parameter. Because models such as CLIP (Radford et al., 2021) encode text into the same vector space that conditions image generation, words acquire numeric weight, and small changes in phrasing trace continuous changes in output. Treated programmatically, a prompt can be interpolated across frames or modulated by code, turning language into a dial. The aesthetic descends from the demoscene's parameter-tweaking and from Gene Kogan's Machine Learning for Artists ethos: the generative system as instrument, played by varying its inputs over time.

Describe → build → inspect → refine. You direct; the AI is the fast hands.

Prereqs  Functions & Modularity · Prompt as a Parameter

Creation with an AI tutor proceeds as a loop: describe an intention, let the system build, inspect the result, and refine the description. Authorship stays with the person who judges and redirects; the model supplies the hands, not the aim. The framing is old — J.C.R. Licklider's "Man-Computer Symbiosis" (1960) and Douglas Engelbart's program for augmenting human intellect both imagined the machine as a partner that amplifies rather than replaces judgment. Gene Kogan's view of machine learning as an artist's tool extends it. The aesthetic is conversational and iterative: quality emerges not from a single perfect command but from many rounds of seeing and steering.

Pixels, resolution, aspect ratio, file formats.

A digital image is a grid — a raster — of pixels, each one a sampled point of color stored as numbers. Resolution counts those pixels, width by height; aspect ratio fixes the rectangle's proportions and, with them, the frame a composition must inhabit. File formats trade fidelity against size: JPEG discards detail to shrink, PNG preserves every pixel. Learning to see the grid means understanding that smooth tone and sharp edge alike are illusions assembled from discrete samples — a logic Georges Seurat anticipated in pointillism, building luminous fields from separate dots that the eye fuses into form. Detail is finite; how it is spent matters.

RGB channels, hex, basic colour theory and mood.

Prereqs  What Is a Digital Image?

On a screen, color is light, not pigment: red, green, and blue channels add together, each ranging 0–255 and often written compactly in hexadecimal. Mixing light is additive — full red plus full green yields yellow — the reverse of mixing paint. Beyond mechanics lies perception: Josef Albers showed in Interaction of Color that a hue's appearance depends entirely on its neighbors, while Johannes Itten codified contrasts of warm against cool, light against dark. Albert Munsell's system separates color into hue, value, and chroma, giving an emerging image-maker a vocabulary to control mood deliberately rather than stumble into it. Color is relationship before it is wavelength.

The alpha channel and the mask — the bridge to every edit.

Prereqs  What Is a Digital Image?

Beyond red, green, and blue, a fourth channel — alpha — records opacity, letting one image float transparently over another. The mathematics of stacking were formalized by Thomas Porter and Tom Duff in 1984, whose "over" operator defines how foreground and background blend pixel by pixel. A mask is alpha put to work: white reveals, black protects, gray partially veils, isolating exactly where an edit lands. The instinct is older than the computer — the photomontages of Hannah Höch and John Heartfield, born of Dada, cut and recombined fragments into charged new wholes, teaching that meaning often lives in the seam between layers, in the decision of what to show and what to hide.

Generate a first AI image; diffusion intuition without the math.

Prereqs  What Is a Digital Image?

A diffusion model begins not with a blank canvas but with pure visual noise, then removes that noise step by step until a coherent picture emerges, each step nudged toward the words of the prompt. The idea borrows from physics: Jascha Sohl-Dickstein and colleagues proposed in 2015 that a process which gradually destroys structure could be learned in reverse to create it. Ho, Jain, and Abbeel made it practical in 2020 with denoising diffusion probabilistic models, and Rombach and colleagues' 2022 latent diffusion — the basis of Stable Diffusion — moved the work into a compressed space, fast enough for everyday use. Creation here is subtraction: form revealed by removing chaos.

Subject + setting + style + composition + lighting; negatives.

Prereqs  From Noise to Picture

A strong prompt reads less like a wish and more like a director's brief: subject, setting, style, composition, and lighting, each named with intent. The model can honor such language because of CLIP — the 2021 system from Radford and colleagues that learned to align images with the words describing them, building a shared map between sight and language. Negative prompts steer by exclusion, listing what to suppress. Specifying "low, raking light" or "wide shot, rule of thirds" deploys the same vocabulary a cinematographer or painter uses to govern attention and mood. The prompt becomes a compositional decision rather than a hopeful incantation — precision in, precision out.

Seeds for reproducibility; change one variable at a time.

Prereqs  The Anatomy of a Prompt

Every diffusion image starts from a particular field of random noise; the seed is the number that reproduces it. Hold the seed fixed and the same prompt returns the same picture; change it and the composition reshuffles entirely. Real control comes from the scientific habit of altering one variable at a time — same seed with a new lighting word, or same prompt with a new seed — so each result reveals exactly what shifted. Josef Albers practiced this discipline for decades in Homage to the Square, repeating one rigid format to isolate how color alone behaves. Reproducibility turns generation from a slot machine into a study, and a study into authorship.

Compare model "personalities"; pick the right one for a goal.

Prereqs  The Anatomy of a Prompt

No two generative models see the world the same way. Each is trained on a different collection of images with a different architecture, so each carries inherited tendencies — one leans painterly, another photographic, a third toward crisp illustration — much as film stocks and printmaking processes each impose a signature before a single choice is made. These defaults are not neutral; they reflect what a model was shown and how often, the statistics of its diet. Learning a model's "personality" means running one prompt across several and noticing where each pulls, then choosing deliberately — the way a printmaker selects etching over lithography for the marks the medium naturally wants to make.

Refine an image through chained natural-language instructions.

Prereqs  From Noise to Picture

Editing by conversation treats an image as a draft open to revision: each instruction — "warm the light," "remove the figure on the left," "make it dusk" — refines the previous result while the system remembers the thread. This is the artist-as-director stance made literal, closer to giving notes on a set than to wielding a brush. The skill is seeing precisely and speaking precisely: naming what is wrong, isolating one change, judging the response, iterating. Vague requests yield vague drift; specific, sequenced direction compounds into intention. Authorship here lives not in any single keystroke but in the accumulated judgment carried across the exchange — the editing, not the rendering.

Inpainting, outpainting, background removal, style transfer, AI upscaling.

Prereqs  Layers, Alpha & Masks · Conversational Editing

A working toolkit turns generation into surgery. Inpainting masks a region and regenerates only what lies beneath it; outpainting extends the canvas past its original edges, inventing plausible continuation; background removal isolates figure from ground. Style transfer recasts content in another visual idiom, while AI upscaling — super-resolution — synthesizes convincing detail to enlarge an image. Structural fidelity through such edits owes much to ControlNet, introduced by Lvmin Zhang and colleagues in 2023, which conditions a diffusion model on a pose, edge map, or depth so composition survives a change of style. Each tool teaches a distinct way of seeing: where to cut, where to extend, and above all what to preserve.

Provenance (C2PA/SynthID), bias audits, copyright, responsible disclosure.

Every generated image arrives with questions of origin and responsibility. Provenance standards like C2PA, from the Content Authenticity Initiative, attach a verifiable history to a file, while Google DeepMind's SynthID embeds an invisible watermark marking an image as machine-made. Models inherit the biases of their training data — Joy Buolamwini and Timnit Gebru's Gender Shades exposed how systems fail unevenly across skin tones, and Bender, Gebru and colleagues' "On the Dangers of Stochastic Parrots" warned of scale outrunning scrutiny. Copyright and authorship remain unsettled. Walter Benjamin foresaw the stakes in 1935, asking what becomes of a work's "aura" once it is endlessly reproduced — and now, endlessly generated.

Image-to-video; prompts describe motion, not content.

Image-to-video models inherit their subject from a single frame and invent only what was missing: time. Because content is already fixed, the text prompt governs motion alone—drift, breath, the slow turn of a head. This inversion echoes the earliest motion studies, where Eadweard Muybridge and Étienne-Jules Marey dissected a gallop or a bird's flight into discrete instants, proving movement is information distinct from form. Modern latent video diffusion, the line running through Runway, Kling, and Wan, conditions a denoising process on the still and a description of change. The craft lies in animating sparingly, trusting persistence of vision to bind separate frames into continuous, convincing life.

Cinematography + subject + action + context + style; cap motion.

Prereqs  Animate Your First Still

A reliable motion prompt reads like a shot list: a camera instruction, a subject, one action, a context, and a style register, ordered so the model resolves them in sequence rather than collision. Capping the number of moving elements is not timidity but physics—diffusion video models distribute a limited motion budget, and competing actions blur into incoherence. The structure borrows from the grammar of cinematography, where a single dolly, pan, or tilt frames a single beat. Restraint produces legibility. Naming the lens move, the subject, and one verb mirrors how directors decompose a scene into discrete, photographable intentions before a frame is ever exposed.

Pair one camera move with one subject action.

Prereqs  The Motion Prompt Formula

Cinema separates two motions that the eye reads as one: the world moving, and the camera moving through it. Pairing a single lens gesture—a dolly that advances, a pan that sweeps, an orbit that circles, a tilt that lifts—with one subject action lets a video model render each cleanly, since the two vectors no longer compete for the same motion budget. This is the foundational grammar of cinematography, the vocabulary by which framing becomes meaning: the orbit confers monumentality, the slow push builds intimacy. Constraint sharpens intent. A deliberate camera move, matched to a deliberate gesture, reads as direction rather than drift.

Mask a region, animate only it, freeze the rest.

Prereqs  Animate Your First Still

A cinemagraph holds most of a frame perfectly still and lets one element move—steam off coffee, a flag, hair in wind—so the eye fixes on the living detail against a photographic hush. Jamie Beck and Kevin Burg coined the form around 2011, suturing the authority of photography to the looping GIF. Technically the effect is masked video generation: a region is marked for animation while surrounding pixels stay anchored to the source frame, the approach used by inpainting-style video pipelines such as VACE. The aesthetic power lies in contrast—motion means more when it is rationed, and a single moving region carries the entire temporal weight of the image.

Anchor opening and closing composition for clean morphs.

Prereqs  Directing the Lens

Supplying both an opening and a closing frame turns generation into interpolation: the model must invent a plausible path between two fixed compositions rather than improvise forward from one. The concept descends from traditional animation, where senior artists drew the extreme poses—the keyframes—and assistants filled the in-betweens. Anchoring both ends disciplines the morph, preventing the drift and identity loss that unconstrained image-to-video tends toward. Aesthetically it foregrounds the transition itself: a transformation, a reveal, a match cut across two states. The clarity of a sequence depends on the clarity of its extremes, and well-chosen endpoints make the journey between them legible.

Open-local vs fast-API: speed, quality, and cost trade-offs.

Prereqs  The Motion Prompt Formula

Two production paths diverge by where the computation lives. An open model run locally—the Wan family is representative—offers control, privacy, and no per-second cost, paid for in setup, GPU memory, and slower turnaround. A hosted API in the Runway, Kling, Veo, or Sora lineage trades that ownership for speed and polish, billing by the clip. The choice is less technical than rhythmic: local favors patient, iterative craft and unmetered experimentation, while cloud favors fast comparison and deadline work. Aesthetically the question is how tightly the feedback loop should close, since the cadence of iteration shapes what a maker is willing to try, keep, and discard.

Generate synced sound effects from a silent clip.

Prereqs  Animate Your First Still

Sound is half of moving-image craft, and a silent clip reads as unfinished. Foley—named for Jack Foley, the Universal Studios artist who performed footsteps, cloth, and crockery in sync to picture—is the art of building a world's incidental sound by hand. Video-to-audio models automate the synchronization, analyzing motion and material on screen to generate effects timed to the action. The governing principle is diegetic plausibility: a footfall must land on the frame the foot lands, or the illusion breaks. Sound also directs attention and confers weight, telling the eye what matters. Generated foley closes the loop between what is seen and what is heard.

Build a clean looping clip and export it correctly.

Prereqs  Animate Your First Still

A seamless loop dissolves the seam between end and beginning, so the clip appears to run forever with no visible cut. The technique requires that the final frame resolve back into the first, whether by designing cyclical motion or by anchoring matching endpoints. The form is native to the web: the animated GIF, the autoplaying social clip, and the looping cinemagraph all live in an eternal present, rewarding motion that has no start or finish. Correct export matters as much as the craft—frame rate, duration, and codec must be pinned, or platforms truncate or stutter the result, breaking the very continuity the piece depends on.

Chain shots and references to hold a character across cuts.

Prereqs  Directing the Lens · Keyframes & Transitions

A scene is built from shots, and the cut between them is where meaning is assembled. Lev Kuleshov showed that audiences read relationship and emotion into adjacent images, and Sergei Eisenstein theorized montage as collision and synthesis. Holding a character consistent across those shots is the technical precondition for editing to work at all. Feeding the last frame of one clip as the opening of the next, reinforced by reference images, chains identity through the cuts. The aesthetic reward is continuity: a viewer accepts a sequence as one place and one person seen from multiple angles. Coherence across shots is what turns isolated clips into a scene.

Flicker, morphing, hallucination, physics breaks — named, then tamed.

Prereqs  The Motion Prompt Formula

Generative video fails in characteristic ways, and naming them is the first step to control. Flicker is a temporal-coherence failure, where frames drift in color or texture because the model has not bound them tightly across time. Object morphing and hallucination arise when latent representations lose track of identity between frames. Physics breaks—floating debris, melting limbs, impossible momentum—reveal that the model approximates appearance, not mechanics. Optical flow, which estimates how pixels travel from one frame to the next, is the conceptual lever for diagnosing and reducing these artifacts. Treating each as an expected, named phenomenon rather than a random glitch turns troubleshooting into craft, and constraint into the cure.

Convert a generated image into a textured GLB and orbit it.

A single image fixes one viewpoint; a mesh must exist from every angle. Image-to-3D models close that gap by inferring volume and wrapping the picture's surface onto it, much as a sculptor reads a single reference photograph and imagines the unseen back of the head. The result is a GLB — a compact, self-contained glTF file bundling geometry and texture — that can be lit and orbited in real time. The leap from picture to object is conceptual as much as technical: a flat composition becomes a thing with silhouette, parallax, and occlusion. The generative lineage here runs through Hunyuan3D, TRELLIS, Tripo, and Meshy (2024–2026).

Clean background, even light, centered T-pose — so reconstruction works.

Prereqs  From Flat Art to 3D

Reconstruction can only recover what the input makes legible. A clean, uncluttered background lets the model separate figure from void and read an honest silhouette; flat, even illumination describes form rather than baking dramatic shadow into the surface, where it would later fight the renderer's own lights. A centered subject in a neutral T-pose or A-pose — limbs clear of the torso — keeps later rigging unambiguous, echoing the spread-armed convention shared by life drawing and skeletal animation. The discipline is the same one photogrammetry imposes on capture: control the conditions, and the geometry follows. Cast shadows, motion blur, and busy backdrops get read as form, and become defects.

Intuition for the shape-pass then texture-pass (PBR) pipeline.

Prereqs  From Flat Art to 3D

Generation separates two questions that older pipelines tangled together: what shape is this, and what is its surface made of. A first pass produces only geometry — a raw, untextured mesh resolved from the silhouette and implied volume, the way a sculptor blocks out mass before any finish. A second pass paints that fixed surface with physically based maps: base color, roughness, metallic, and normal, the channels codified by Brent Burley's 2012 Disney "principled" BRDF. Decoupling form from appearance lets each stage specialize, and mirrors studio practice — model first, look-development second. The Hunyuan3D lineage builds shape with a diffusion transformer, then synthesizes texture across the finished geometry.

Present an object as an orbiting turntable; export a rotation.

Prereqs  From Flat Art to 3D

Rotation is how a flat screen confesses that an object is three-dimensional: as the form turns, motion parallax and the traveling specular highlight disclose depth, contour, and surface that no still can. The orbiting turntable is an old presentational grammar — the rotating museum plinth, the jeweller's display, the product-photography lazy Susan — and it became a fixed ritual in animation and VFX studios, where every model is reviewed on a slow 360-degree "turntable" before approval. A steady axis and even ambient light keep attention on the object, not the staging. Exported as a looping rotation, the result reads as evidence: this is a thing, seen from all sides.

Diffuse/roughness/metallic/normal; tris vs quads; polycount.

Prereqs  Shape, Then Texture

Physically based rendering splits a surface into separable channels: base color (diffuse) holds pigment free of lighting; roughness governs whether reflections are sharp or diffuse; metallic flags conductors; and a normal map fakes fine relief by perturbing how light bounces, without adding polygons. Together they let one material respond honestly under any lighting, the goal of Burley's principled model. Topology is the mesh's underlying weave: triangles render universally, but clean quads flow into orderly loops that deform predictably and subdivide cleanly (the Catmull-Clark tradition). Polycount is a budget — real-time work spends polygons where silhouette and motion demand them, and saves them on flat, hidden, or distant surfaces.

One-click rigging — including non-biped creatures.

Prereqs  From Flat Art to 3D · The Perfect Input Image for 3D

Rigging inserts an invisible skeleton into a static mesh and binds each vertex to nearby bones with weights, so that moving a joint deforms the skin smoothly — skeletal animation, or linear blend skinning. It is the armature inside the clay: hidden structure that makes a figure capable of motion. Automatic systems like Adobe's Mixamo place a standard humanoid skeleton in seconds, and learned approaches such as RigNet (Xu et al., 2020) predict joints and skin weights directly from geometry. The harder problem is non-biped creatures, where no fixed template fits; a morphology classifier first reads the body plan — how many limbs, what symmetry — and chooses an appropriate skeleton before binding.

Apply a library animation to a rigged mesh; export FBX/GLB.

Prereqs  Auto-Rig a Character

A walk cycle is a portable performance: stored as joint rotations over time, it lives independently of any particular body and can be retargeted — mapped from a source skeleton onto another of matching structure. Borrow one from a library such as Mixamo, retarget it, and a still figure begins to stride. The walk has been studied as long as motion itself, from Eadweard Muybridge's stop-motion locomotion plates, begun in 1878, to the contact-down-passing-up timing taught in Richard Williams's "The Animator's Survival Kit." Retargeting succeeds when proportions and rest poses align, and fails as drift and foot-slide when they don't. Exported to FBX or GLB, the animated rig travels into any engine.

Print-prep: manifold/watertight, a base, STL export.

Prereqs  From Flat Art to 3D

Printing demands more honesty than rendering: a screen surface can be a hollow, one-sided shell, but a printer must slice a solid, so the mesh has to be manifold and watertight — every edge shared by exactly two faces, no holes, no self-intersections, a clean inside and outside. The form also meets gravity, so a base or feet give it footing and balance. Exported as STL — the triangle-soup format born with Chuck Hull's stereolithography at 3D Systems in the late 1980s — the file feeds a slicer and becomes a physical object. The leap completes here: the generated creature leaves the screen and acquires weight, scale, and a place on a shelf.

Photogrammetry, NeRF and Gaussian splatting vs generative mesh.

Prereqs  From Flat Art to 3D

Two philosophies meet here. Capture reconstructs a thing that exists: photogrammetry triangulates geometry from overlapping photographs (structure-from-motion, as in COLMAP); NeRF (Mildenhall et al., 2020) learns a scene as a continuous radiance field queried per ray; 3D Gaussian Splatting (Kerbl et al., 2023) renders millions of fuzzy ellipsoids for real-time, photoreal novel views. Generation, by contrast, invents — synthesizing a plausible object from a single image and a learned prior, imagining the unseen sides. Capture when the subject is real, present, and fidelity matters: a heritage artifact, a scanned actor. Generate when the subject is imagined, unavailable, or need only be convincing rather than measured.

2D art → mesh → rig → animate → export a character.

Prereqs  Bring It to Life: Walk-Cycle Retargeting · Product Turntable

The whole arc runs in one line: a 2D illustration becomes a textured mesh, the mesh receives a skeleton, the skeleton borrows a walk, and the result exports as a rigged, animated character. Each stage constrains the next — a clean T-pose source eases rigging; honest topology deforms without tearing; matched proportions let a retargeted cycle land — so quality is cumulative and errors compound downstream. What began as a single fixed viewpoint ends as a performer that can be lit, posed, and moved from any angle. The discipline echoes traditional production: design, sculpt, build the armature, animate, deliver. Packaged as glTF/GLB or FBX, the character is ready for any engine.

A seedable generator so one hash reproduces one exact piece.

Prereqs  Functions & Modularity · Arrays

A deterministic pseudo-random generator turns a single seed into an entire reproducible artwork: the same hash always yields the same piece, byte for byte. This is the technical bedrock of long-form generative art, where Art Blocks—founded by Erick "Snowfro" Calderon—feeds each minted token's transaction hash into the artist's code as the sole entropy source. Compact integer generators such as xorshift, descended from George Marsaglia's work, or counter-based variants like sfc32 replace Math.random precisely because the latter cannot be seeded. The aesthetic stakes are real: Vera Molnár's notion of "1% disorder" showed that controlled randomness, not chaos, is the medium. Determinism makes a generative output citable, mintable, and printable.

Rarity-weighted reported traits derived from a token hash.

Prereqs  Seeded Determinism & a Hand-Rolled PRNG

Features—or traits—are the artist's declared vocabulary for describing a piece: palette family, density, structure, rarity tier. Derived deterministically from the token hash, they let a collection be described and ranked without ever re-running the code. Art Blocks formalized this with its "features" field, and Tyler Hobbs's Fidenza is the canonical study: spirals, megaberg outliers, and color moods surface as reported attributes whose frequencies the artist tunes by weighting the underlying random draws. The craft lies in honesty—reported rarity must match what the generator actually produces—and in restraint, since over-engineered rarity tables corrode the work into a spreadsheet. Traits are curation encoded.

Typed, collector-settable params that stay deterministic.

Prereqs  Hash → Traits → Feature Distribution

The fx(params) standard, introduced by fxhash, extends long-form generative art with typed, collector-settable parameters—numbers, colors, booleans, selects—that live alongside the minting hash. The work becomes a parameter space rather than a single curve through randomness, and the collector co-authors a coordinate within it while determinism holds: identical inputs reproduce identical output, forever. This reframes the old tension between artist control and chance, echoing Sol LeWitt's instruction-art logic, where the rules, not the executor, are the artwork. The discipline is bounding the space so every reachable combination is intentional—an aesthetic of designed latitude, not an open sandbox. Range design is composition.

Seeded palette engines: weighted pools, harmony rules, rarity.

Prereqs  Color · Seeded Determinism & a Hand-Rolled PRNG

A palette engine treats color as a seeded system rather than a fixed swatch: weighted pools bias toward signature hues, harmony rules—analogous, complementary, triadic—constrain relationships, and rarity tiers make some palettes scarce. Done well, color becomes the strongest carrier of a collection's identity; Tyler Hobbs has written at length on how Fidenza's color moods do more authorial work than its curves. The lineage runs back through Josef Albers's Interaction of Color, where relationship trumps individual value, and Vera Molnár's restrained plotter palettes. The risk is muddy mid-tones from naive RGB averaging; perceptual color spaces and curated pools keep the output legible and intentional.

Edge-matched / non-periodic tilings from a tiny tile set.

Prereqs  Nested Loops & Grids · Transformations & the Matrix Stack

Truchet tiles—named for Sébastien Truchet, whose 1704 Mémoire enumerated the patterns made by rotating a single split square—generate vast visual variety from one decorated tile and a rule for its orientation. Cyril Stanley Smith revived them for modern readers in 1987, framing tiling as a study of order and disorder. Wang tiles, proposed by Hao Wang in 1961, match on colored edges and can be made to tile the plane only aperiodically, a result entangled with the undecidability of the domino problem. The aesthetic is emergent labyrinth: maze-like continuity from local constraints, the appeal being how little information yields how much structure. Constraint as generator.

Multi-octave and curl-driven fields; agents depositing ink.

Prereqs  Perlin Noise Fields · Autonomous Agents & Steering

A flow field assigns a direction to every point in the plane and releases agents that trace its currents, depositing ink as they drift. Multi-octave Perlin noise—Ken Perlin's 1985 gradient noise, summed across frequencies—gives the field organic, self-similar turbulence; curl noise, formalized by Robert Bridson and colleagues in 2007, makes it divergence-free so streams swirl without sinks. Tyler Hobbs's Fidenza is the defining work of the form, its non-overlapping ribbons proving how much elegance lives in collision avoidance and varied scale. The sensibility is windblown calligraphy: deterministic vector fields rendered as gesture, equal parts fluid dynamics and drawing.

Repel/attract node chains that subdivide and grow organically.

Prereqs  Arrays of Objects · Vectors: Magnitude & Direction

Differential growth models a chain or mesh of nodes that repel neighbors, attract along their connections, and insert new nodes where the curve stretches—producing the buckling, brain-coral convolutions of a line outgrowing its space. Anders Hoff (inconvergent) is the form's clearest expositor, his hyphae and differential-growth studies tracing the algorithm's debt to biological morphogenesis. The deeper lineage is D'Arcy Thompson's On Growth and Form, which argued that organic shape is physics under constraint. Aesthetically the output reads as grown rather than drawn: folded, space-filling, never self-intersecting. The tension between local rules and global form is the entire pleasure.

Feed/kill pattern formation — Turing patterns.

Prereqs  2D Cellular Automata / Game of Life · Images & Pixels as Arrays

Two virtual chemicals, one feeding and one killing, diffuse at different rates across a grid and settle into spots, stripes, and labyrinths that never quite repeat. The Gray-Scott model—popularized for artists by John Pearson's 1993 Science paper "Complex Patterns in a Simple System"—is the workhorse, but the idea descends from Alan Turing's 1952 "The Chemical Basis of Morphogenesis," which proposed diffusion-driven instability as nature's pattern engine. Karl Sims's interactive demonstrations made the dynamics legible to a generation of coders. The aesthetic is unmistakably biological: leopard rosettes, coral, fingerprints—emergent texture that feels found rather than designed. Simple local chemistry, global form.

Space partitioning and image-driven stippling.

Prereqs  Arrays of Objects · Images & Pixels as Arrays

A Voronoi diagram partitions the plane into cells nearest each seed point; its dual, the Delaunay triangulation, connects them—structures named for Georgy Voronoi and Boris Delaunay. Weighted Voronoi stippling, introduced by Adrian Secord in 2002, drives the seeds toward an image's dark regions using Lloyd's relaxation (after Stuart Lloyd) to iteratively recenter each cell on its weighted centroid, yielding dot density that reads as tone. The result evokes the engraver's and pointillist's craft—stipple shading and Seurat's divisionism rendered algorithmically. The aesthetic prizes restraint: gray emerges from the spacing of identical marks, an image built entirely from where dots are not.

Error diffusion, ordered/Bayer dither, rotated halftone screens.

Prereqs  Images & Pixels as Arrays

Dithering trades spatial resolution for tonal depth, scattering a limited palette so the eye blends it into continuous tone. Floyd–Steinberg error diffusion (Robert Floyd and Louis Steinberg, 1976) pushes each pixel's quantization error to its neighbors, producing the characteristic organic grain; ordered dithering uses a fixed Bayer matrix, after Bryce Bayer, for a regular, screen-printed crosshatch. Rotated halftone screens—dots swelling with darkness, angled per channel—are the language of offset litho and comic-book Ben-Day. The aesthetic is unapologetically reproductive: risograph, newsprint, 1-bit Macintosh. Constraint becomes signature, the artifact of cheap printing reclaimed as deliberate texture.

smoothstep/mix/step, cosine palettes, 2D SDF shapes and boolean ops.

Prereqs  Fragment Shaders & UV Space

A fragment shader assigns a color to every pixel in parallel, and the discipline begins with what replaces literal UV sampling: step thresholds, smoothstep's antialiased gradients, and mix's linear blends become a small algebra of light. Inigo Quilez's cosine palette—four vectors driving a periodic RGB function—turns a single scalar into infinite coherent color schemes without lookup tables. Signed-distance fields measure the nearest edge of analytic shapes, so circles, boxes, and segments combine through min and max into unions, intersections, and cuts. Patricio Gonzalez Vivo and Jen Lowe's The Book of Shaders codifies this grammar; the resulting images read crisp, resolution-independent, and mathematically clean.

Hash/gradient noise and fractal Brownian motion layering.

Prereqs  The Fragment Toolkit Beyond UV · Perlin Noise Fields

Procedural texture starts from determinism disguised as chance: a hash function maps coordinates to repeatable pseudo-random values, which value noise interpolates between lattice points and gradient noise—Ken Perlin's 1985 contribution—smooths into the band-limited, organic field that defined a generation of CGI. Stacking octaves at halving amplitude and doubling frequency yields fractional Brownian motion, whose self-similar roughness models clouds, terrain, and smoke. The amplitude falloff tunes the result from soft haze to jagged ridges. Patricio Gonzalez Vivo's The Book of Shaders and Inigo Quilez's noise articles remain the canonical pedagogy, with Steven Worley's 1996 cellular noise an adjacent dialect; the look is soft, statistical, never repeating.

Feed FBM into FBM for organic cloud/marble fields.

Prereqs  Noise in Shaders → FBM

Domain warping perturbs the input coordinates of a field before sampling, so noise is evaluated not at a point but at a point displaced by more noise. Nesting this—fbm of a position offset by the fbm of a position offset again—produces the swirling, marbled, quasi-fluid structures that pure octave-summed noise cannot. Inigo Quilez formalized the technique in a widely cited article, demonstrating how a few recursive warps conjure the look of eroded rock, churning cloud, and oil-on-water iridescence. The aesthetic is turbulent yet coherent: filaments stretch and fold without ever tearing, suggesting advection and flow while remaining a stateless, closed-form evaluation.

Sphere tracing, analytic normals, lambert + soft shadows + AO.

Prereqs  Distance Fields for Shapes · The Fragment Toolkit Beyond UV

Raymarching renders without polygons: a signed-distance function reports how far any point lies from the nearest surface, and sphere tracing advances a ray by exactly that safe radius until it grazes geometry. John Hart named sphere tracing in 1996, but Inigo Quilez turned it into an art form on Shadertoy, where shaders like Rainforest and Snail reconstruct entire ecosystems in a single fragment program. Surface normals follow from the field's gradient, sampled by small offsets; Lambert diffuse, soft shadows estimated from the closest approach along the light ray, and distance-based ambient occlusion complete a lighting model that is compact, analytic, and unmistakably luminous.

smin, infinite domain repetition, Mandelbulb/Apollonian.

Prereqs  Raymarching SDF Scenes

Composition in distance fields trades boolean hard edges for the smooth minimum, Inigo Quilez's polynomial blend that fuses primitives into seamless, claylike unions while preserving the metric. Wrapping coordinates through a modulo before evaluation repeats a single object across infinite space at zero memory cost, the trick behind endless lattices and forests. Iterating a folding-and-scaling map turns the same machinery fractal: the Mandelbulb, devised by Daniel White and Paul Nylander as a spherical-coordinate power of the Mandelbrot set, and the Apollonian gasket of nested tangent spheres both render as raymarched estimated-distance fields. The aesthetic is infinite detail—self-similar, ornate, impossibly intricate under a single camera.

Persistent trails, blur, GPU Game of Life via double buffering.

Prereqs  The Fragment Toolkit Beyond UV · Images & Pixels as Arrays

State persists on the GPU when a render target's output becomes the next frame's input, but a texture cannot be read and written simultaneously, so two buffers alternate roles—the ping-pong pattern. Decaying the previous frame yields motion trails and long-exposure smears; iterating a blur kernel diffuses; sampling a pixel's neighbors and applying a rule runs Conway's Game of Life entirely in parallel. The same substrate hosts reaction-diffusion, the Gray-Scott model whose spots and stripes echo Alan Turing's 1952 theory of morphogenesis. The aesthetic is emergent and temporal: simple local rules accumulate across frames into organic pattern, decay, and self-organizing structure no single pass could produce.

Positions/velocities in float textures; curl-noise motion at scale.

Prereqs  Feedback / Ping-Pong Buffers · Particle Systems

Simulating millions of particles on the GPU means abandoning per-object state for texture memory: each pixel of a floating-point render target holds one particle's position, another its velocity, updated every frame by a fragment shader and read back by the vertex stage for drawing. Motion gains life from curl noise—Robert Bridson, Jim Houriham, and Marcus Nordenstam's 2007 technique of taking the curl of a noise field to produce a divergence-free flow that swirls without sources or sinks, mimicking incompressible fluid. three.js exposes the pattern through its GPUComputationRenderer. The aesthetic is volumetric and turbulent: dense clouds of points eddying coherently, fast enough for real time at hundreds of thousands of elements.

Storage-buffer compute; one node material → WGSL and GLSL.

Prereqs  GPGPU Particles · Instancing Many Objects

WebGPU brings the modern compute pipeline to the browser: storage buffers hold arbitrary structured data, and compute shaders dispatch work across the GPU's threads without the fiction of drawing pixels, replacing the older texture-packing workarounds with direct random-access memory. Three.js layers the Three.js Shading Language atop this—a node-based abstraction, advanced under Ricardo Cabello's stewardship, where a single material graph compiles transparently to WGSL for WebGPU and GLSL for the WebGL fallback. The shift is architectural rather than aesthetic: simulations, sorting, and particle systems express themselves as readable node trees instead of string-concatenated shaders, and one description targets two backends without rewrite.

Hand-build position/normal/uv/index attributes; compute normals.

Prereqs  3D Coordinate Space & Meshes

A mesh, stripped to essentials, is a set of parallel arrays: vertex positions, surface normals, texture coordinates, and an index list that stitches them into triangles by reference rather than duplication. Building a BufferGeometry by hand—filling typed arrays directly—reveals the contract beneath every model loader and primitive in three.js, Ricardo Cabello's library. Normals, which govern how light reads across a surface, derive from the cross product of two triangle edges and can be averaged per vertex for smooth shading or kept per face for faceting; computeVertexNormals automates the former. The understanding is foundational: procedural geometry, deformation, and custom topology all begin with authoring these attributes deliberately.

InstancedMesh + per-instance attributes for 100k+ objects.

Prereqs  Instancing Many Objects · Arrays of Objects

Drawing a hundred thousand objects individually overwhelms the CPU with draw-call overhead; instancing solves it by uploading one geometry once and issuing a single command the GPU replays with per-instance variation. three.js packages this as InstancedMesh, where each copy carries its own transform matrix and optional attributes—color, scale, animation phase—read in the vertex shader. The constraint is uniformity of mesh and material, but within it scale becomes nearly free: forests, crowds, particle swarms, and architectural arrays render in a few calls. The aesthetic is one of multitude and repetition with variation, the visual density of generative systems where the individual dissolves into the field.

Displace geometry in the vertex stage via noise (terrain, wind).

Prereqs  Custom BufferGeometry From Scratch · Noise in Shaders → FBM

Geometry need not be static: the vertex shader can displace every point before projection, sampling a noise field to push vertices along their normals. Layered fractional Brownian motion over a plane produces rolling terrain whose silhouette and shading emerge entirely on the GPU; a time-shifted noise added to foliage or cloth yields wind. The subtlety is that moving positions invalidates the original normals, so lighting requires recomputing them—analytically from the field's gradient or by finite differences across neighboring samples—lest a deformed surface shade as if flat. Built on Ken Perlin's gradient noise, the aesthetic is living landscape and breathing matter, animated procedurally rather than keyframed.

Blendshapes and skeletal deformation; animate procedurally.

Prereqs  Custom BufferGeometry From Scratch

Two deformation models animate characters in real time. Morph targets, or blendshapes, store alternate vertex positions—a smile, a clench—and interpolate between them by weight, summing offsets to sculpt continuous expression. Skeletal skinning binds each vertex to one or more bones with weights, then transforms it by the bones' matrices; linear blend skinning, the ubiquitous approximation, is fast though it pinches at extreme joint twists. three.js implements both on the GPU, and either can be driven procedurally—weights and bone rotations set by noise, oscillators, or physics rather than baked animation clips. The result is performance and creature movement generated by code, expressive yet computed frame to frame.

EffectComposer: bloom, depth of field, custom full-screen passes.

Prereqs  3D Coordinate Space & Meshes · Lighting & Materials in 3D

Post-processing treats the rendered frame as raw material: the scene is drawn to an offscreen texture, then refined by full-screen fragment passes chained through three.js's EffectComposer. Bloom isolates the brightest regions, blurs them, and adds the result back, simulating the glow of light bleeding in a lens or sensor. Depth of field reads the depth buffer to compute a circle of confusion, blurring by distance to mimic a camera's aperture and focal plane. Custom passes—color grading, chromatic aberration, vignettes—complete the grammar. The aesthetic is photographic and cinematic: the conventions that signal "camera" in film, applied to synthetic images to make light feel physical.

Isosurface meshing from a scalar field for blobby geometry.

Prereqs  Custom BufferGeometry From Scratch

Surfaces can be extracted from volume rather than modeled directly. Marching cubes, introduced by William Lorensen and Harvey Cline at SIGGRAPH 1987, samples a scalar field on a grid, classifies each cube's eight corners as inside or outside a threshold, and consults a table of triangulations to stitch a polygon mesh along the isosurface. The field itself is often a sum of metaballs—Jim Blinn's 1982 "blobby" model, where each source contributes a radial falloff and overlapping sources merge with smooth, surface-tension-like necks. Together they generate organic, mercurial geometry: droplets that coalesce and split, soft implicit forms impossible to build vertex by vertex, meshed on the fly as the field evolves.

Load and render radiance fields; composite splats with meshes.

Prereqs  3D Coordinate Space & Meshes · Post-Processing Pipeline

Gaussian splatting represents a captured scene not as a mesh but as millions of anisotropic 3D Gaussians, each defined by position, covariance, opacity, and view-dependent color encoded in spherical harmonics. Introduced by Bernhard Kerbl, Georgios Kopanas, Thomas Leimkühler, and George Drettakis at SIGGRAPH 2023, the method projects these ellipsoids to screen and alpha-blends them back-to-front, achieving photorealistic radiance fields at real-time rates where the earlier NeRF approach required slow volumetric integration. Rendering in the browser hinges on fast depth sorting and WebGL or WebGPU blending; compositing splats with conventional meshes demands reconciling their depths. The aesthetic is uncanny photographic fidelity—soft, view-dependent, reconstructed reality rather than authored surface.

Position-based motion; distance constraints as the building block.

Prereqs  Forces & Acceleration · Vectors: Magnitude & Direction

Verlet integration tracks a particle by its current and previous positions; velocity lives implicitly in the gap between them, so motion emerges without ever being stored explicitly. Loup Verlet introduced the scheme for molecular dynamics in 1967, and Thomas Jakobsen's 2001 GDC paper "Advanced Character Physics" recast it for games, pairing it with iterative constraint relaxation. The atomic unit is the distance constraint: hold two points a fixed length apart, project them back when stretched, and repeat until the system settles. From this single rule, rope, cloth, and ragdolls assemble. The aesthetic is one of settling weight — overshoot, sag, and a convincing inertia that feels observed rather than scripted.

Structural/shear/bend springs; tearing.

Prereqs  Verlet Integration & Constraints · Springs & Constraints

A cloth is a lattice of point masses joined by springs obeying Hooke's law. Three spring types give fabric its character: structural springs along the weave resist stretch, shear springs across the diagonals resist skew, and bend springs spanning two cells resist folding. Xavier Provot's 1995 model tempers spring superelasticity by clamping over-stretched links, the same relaxation logic Thomas Jakobsen later popularized for real-time use. Sever a link past a strain threshold and the sheet tears, propagating runs along lines of tension. The result reads as drape and gravity made visible — folds that gather, ripples that travel, fabric that catches and releases as it moves.

A closed Verlet shell with internal pressure for jelly physics.

Prereqs  Spring-Mass Meshes & Cloth

A soft body is a closed Verlet shell — a ring or hull of point masses held by distance constraints — inflated from within. Pressure follows the ideal gas law: force scales inversely with the enclosed area or volume and pushes outward along each edge's normal, so a dented balloon springs back as compression raises internal pressure. Maciej Matyka and Mark Ollila described this approach in their early-2000s pressure soft-body papers, building on the mass-spring tradition. The motion is unmistakably jelly: wobble, squash, and recovery, a membrane that dimples on impact then rebounds, holding its volume like something alive and faintly buoyant.

Reynolds' three rules plus a hash grid to break the O(n²) wall.

Prereqs  Autonomous Agents & Steering · Hash Maps & Lookup

Craig Reynolds' 1987 boids, introduced in "Flocks, Herds, and Schools: A Distributed Behavioral Model," derive flocking from three local rules: separation to avoid crowding, alignment to match neighbors' heading, and cohesion to steer toward the local center. No agent sees the whole; the murmuration is emergent. The naive implementation compares every pair, an O(n²) cost that throttles large flocks. A spatial hash divides space into a grid of buckets, so each boid queries only its own cell and its neighbors, collapsing the cost toward linear. Visually the payoff is scale — thousands of agents banking, splitting, and rejoining in fluid, leaderless waves.

Deposit–sense–rotate agents on a trail map; emergent networks.

Prereqs  Autonomous Agents & Steering · Feedback / Ping-Pong Buffers

Physarum models treat the slime mold *Physarum polycephalum* as a swarm of minimal agents, each depositing a chemoattractant onto a shared trail map, then sensing it ahead through three offset sensors and rotating toward the strongest signal. Deposit, sense, rotate — iterated over a diffusing, decaying field, the agents reinforce their own paths and spontaneously weave efficient transport networks. Jeff Jones formalized the model in 2010, and Sage Jensen's "mold" studies have made its aesthetic widely known: filamentous webs that braid, prune, and pulse like neural tissue or river deltas, structure condensing out of noise without any global plan or central coordinator.

Smooth kernels and growth functions; discovering gliders.

Prereqs  2D Cellular Automata / Game of Life · Noise in Shaders → FBM

Lenia generalizes Conway's Game of Life into the continuum: states, space, and time all become smooth. A radial kernel weights each cell's neighborhood, and a bell-shaped growth function nudges the value up or down, so the discrete birth and death rules dissolve into gradients. Bert Wang-Chak Chan introduced the system in 2019, cataloguing a bestiary of self-organizing creatures — most famously Orbium, a gliding ring that drifts and turns while holding its shape. The aesthetic is soft and biological: luminous membranes, rippling cilia, and organisms that breathe, rotate, and recover from perturbation, suggesting protozoa under a microscope rather than cells on a grid.

Semi-Lagrangian advection, diffusion, projection — real-time Navier–Stokes.

Prereqs  Feedback / Ping-Pong Buffers · Verlet Integration & Constraints

Jos Stam's "Stable Fluids," presented at SIGGRAPH 1999, made real-time fluid simulation tractable by solving the Navier–Stokes equations in a way that never blows up. Its key move is semi-Lagrangian advection: rather than push quantities forward, trace each grid cell backward along the velocity field and sample where it came from, an unconditionally stable step. A diffusion stage and a projection stage — enforcing incompressibility via a Helmholtz–Hodge decomposition — complete the loop. Stam's later "Real-Time Fluid Dynamics for Games" distilled it for practitioners. The visual result is the genuine article: ink blooming, smoke curling, velocity advecting dye into swirling, self-similar filaments.

Rigid bodies, joints/constraints, instanced physics in the browser.

Prereqs  3D Coordinate Space & Meshes · Forces & Acceleration

Rapier is a rigid-body physics engine from Dimforge, written in Rust and compiled to WebAssembly for the browser. It integrates Newtonian motion for solid bodies and resolves contacts and joints through a constraint solver, so collisions, friction, and articulated linkages behave consistently across machines — its determinism is a design goal. Joints and constraints — revolute hinges, prismatic sliders, fixed welds — bind bodies into mechanisms, while instancing lets thousands of objects share geometry and tumble at once. The aesthetic is the satisfying physicality of mass and contact: stacks that topple, chains that swing, debris that settles into convincing rest under gravity.

Oscillators, ADSR envelopes, filters, FM/AM.

Prereqs  Functions & Modularity

Sound synthesis begins at the oscillator — sine, square, saw, triangle — whose raw harmonic content is then shaped. Subtractive synthesis, the architecture of Robert Moog's Minimoog, carves a bright waveform with a resonant filter, sculpting timbre by removing rather than adding. An ADSR envelope — attack, decay, sustain, release — governs how amplitude and brightness evolve across a note, the difference between a plucked string and a swelling pad. Modulation routings such as FM and AM — FM being the basis of John Chowning's frequency-modulation work — fold spectra into metallic and bell-like tones. Built on the Web Audio API through Tone.js, these primitives compose the full vocabulary of electronic timbre.

Part/Sequence/Loop, musical time, drift-free scheduling.

Prereqs  Synthesis Fundamentals · Arrays

Musical time needs a clock that does not drift. Tone.js, built by Yotam Mann atop the Web Audio API, provides a Transport — a global timeline addressed in bars, beats, and subdivisions rather than raw seconds — onto which Part, Sequence, and Loop schedule events. The crucial technique is look-ahead scheduling: a coarse JavaScript timer wakes periodically and queues upcoming notes against the sample-accurate audio clock, sidestepping the jitter of setTimeout. Chris Wilson's "A Tale of Two Clocks" set out this pattern for the web. The payoff is rhythmic precision — patterns that lock, loop seamlessly, and stay in phase no matter how heavy the visual frame load.

Reverb/delay/distortion, buses, sidechaining.

Prereqs  Synthesis Fundamentals

Effects live in the signal graph between source and output. Delay reflects a signal back after a set interval; reverb convolves it with an impulse response to place it in a modeled space; distortion reshapes its waveform to add harmonics. Routing matters as much as the effects themselves — buses let several voices share one reverb, and sidechaining uses one signal's amplitude to duck another, the pumping that lets a kick carve room for itself in a dense mix. The Web Audio API exposes this as a connectable node graph, which Tone.js wraps. The aesthetic ranges from intimate, dry presence to vast, blurred, cathedral-scale depth.

The Bjorklund algorithm producing evenly distributed polyrhythms.

Prereqs  Sequencing with Transport

Godfried Toussaint's 2005 paper "The Euclidean Algorithm Generates Traditional Musical Rhythms" observed that distributing k onsets as evenly as possible across n steps reproduces rhythms found across world music — the Cuban tresillo and West African bell patterns among them. The distribution is computed by Bjorklund's algorithm, repurposed from a neutron-source timing problem, which recursively balances groups until the onsets are maximally spread. Sweeping k and n moves through a family of interlocking patterns, and layering several yields shifting polyrhythm. The aesthetic is the deep groove of evenness — figures that feel both mathematically inevitable and unmistakably danceable, ancient logic surfacing from a few integers.

Fourier analysis bins driving a p5 sketch.

Prereqs  Synthesis Fundamentals · Animation & the Frame Loop

The Fourier transform decomposes a signal into the sum of sinusoids that compose it, trading the time domain for the frequency domain. Its fast discrete implementation — the FFT — runs on each audio frame to yield a spectrum of magnitude bins, from sub-bass to presence, which the Web Audio API's AnalyserNode exposes directly. Mapping those bins to visual parameters — bar heights, radii, displacement, color — couples image to sound so that motion tracks the music's actual energy rather than a guessed beat. The aesthetic is synesthetic legibility: a kick swelling a form, a hi-hat glittering the edges, the eye reading what the ear hears.

Probabilistic/Markov note selection; self-evolving ambient.

Prereqs  Sequencing with Transport · Markov Text Systems

Generative composition cedes moment-to-moment choices to a system the composer tunes rather than dictates. Probabilistic note selection — often a Markov chain whose transition weights bias which pitch follows which — produces music that is coherent yet never quite repeats. Brian Eno named and championed this approach, from "Discreet Music" to "Music for Airports," seeking pieces that unfold differently at every listening; Steve Reich's phasing works, where identical patterns drift slowly out of sync, are a kindred mechanism for wringing emergent complexity from simple rules. The aesthetic favors slow evolution and ambient drift — overlapping cycles of differing length recombining into ever-shifting, self-renewing texture.

transformers.js pipeline + the WebGPU backend; no server.

Prereqs  Iterate with the AI Tutor

Inference once meant a server round-trip; transformers.js collapses it into the page itself. Maintained by Joshua "Xenova" Lochner at Hugging Face, the library runs ONNX-exported models through WebGPU—falling back to WebAssembly—so a classifier, embedder, or small language model executes entirely on the visitor's GPU. The aesthetic consequence is material: no API key, no latency budget, no telemetry, no cost ceiling on iteration. A model becomes a static asset, distributable as art that runs offline and indefinitely. This lineage runs through TensorFlow.js and ml5.js (Daniel Shiffman, NYU ITP), which first argued that machine learning belongs in the browser, beside the canvas, not behind it.

Body and hand landmarks as a live controller.

Prereqs  Mouse Input & Events · Vectors: Magnitude & Direction

Google's MediaPipe regresses a skeleton from ordinary video: twenty-one normalized keypoints per hand, thirty-three across the body, tracked frame by frame on commodity hardware. Treated as a controller, these coordinates turn the body into an instrument—pinch distance mapped to scale, wrist velocity to turbulence, posture to palette. The theory is cheap, robust landmark regression; the craft is the mapping, where a number acquires the feel of a gesture. The idea predates the model: Myron Krueger's "Videoplace" (1970s) and the Theremin already made the moving body a continuous parameter. ml5.js wraps handpose and pose models in the same friendly grammar, lowering the threshold from research demo to sketch.

Fast arbitrary neural style transfer on a webcam feed.

Prereqs  Images & Pixels as Arrays · Run a Model Client-Side

Style transfer rests on a 2015 insight from Leon Gatys, Alexander Ecker, and Matthias Bethge: in a convolutional network, content lives in feature activations while style lives in their Gram-matrix correlations, and the two can be optimized apart. The original was slow; feed-forward distillation (Johnson and colleagues, 2016) and adaptive instance normalization (Huang and Belongie, 2017) compressed it to a single pass, fast enough for a webcam. The result is a painterly filter that respects structure—a live feed rendered continuously in another work's hand. ml5.js ships browser-ready style models, making the medium itself adjustable in real time rather than a post-process applied once.

Monocular depth turning a webcam image into 3D displacement.

Prereqs  Run a Model Client-Side · Procedural Vertex Deformation

Monocular depth estimation asks a network to infer what one eye cannot measure: per-pixel distance from a single flat image. Depth Anything V2, trained on massive synthetic and pseudo-labeled data, returns a dense, stable depth map; read as a heightfield, it displaces a mesh so a photograph becomes relief. The aesthetic territory is 2.5D—parallax, extrusion, a portrait pushed toward sculpture—where the camera's loss of depth is hallucinated back as form. The approach descends from MiDaS (Ranftl and colleagues at Intel), which established robust cross-dataset depth. Coupled with WebGL displacement, an ordinary webcam frame becomes navigable terrain, lit and rotated like geometry rather than viewed like an image.

Traversing and interpolating latent space as animation.

Prereqs  Latent Space as Coordinate Space · Embeddings & Vector Similarity

A generative model learns a continuous space in which nearby points decode to similar outputs; to animate is to move through it. Linear paths drift, so practitioners interpolate on the hypersphere—Tom White's "Sampling Generative Networks" (2016) popularized the technique for latent spaces, borrowing the slerp formula Ken Shoemake had introduced for rotation animation in 1985—yielding morphs that feel inevitable rather than crossfaded. Specific directions encode attributes, turning navigation into a choreography of meaning. This terrain is what Mario Klingemann and Refik Anadol have mined for the uncanny in-between, and what Memo Akten's "Learning to See" framed as a machine projecting its memories onto the present moment. The frame is no longer drawn; it is located.

Embed text and images, rank by cosine, build a semantic sorter.

Prereqs  Semantic Search Mini-Index · Run a Model Client-Side

CLIP, introduced by Alec Radford and colleagues at OpenAI in 2021, trains an image encoder and a text encoder together until a picture and its caption land near each other in a shared space. Distance there is cosine similarity, and that single number becomes a tool: rank a folder of images against the phrase "loneliness," sort a collection by how "baroque" it reads, build a search that understands description rather than filename. The shared embedding is the engine later guiding text-to-image diffusion, but on its own it is a semantic lens—language used to measure pictures. Run through transformers.js, the entire sorter lives client-side, no server required.

Build, evaluate, and steer a generative system collaboratively.

Prereqs  Iterate with the AI Tutor · Prompt as a Parameter

A generative system is not authored once; it is steered. The artist sets constraints, generates, judges, and adjusts—an arrangement Gene Kogan's "Machine Learning for Artists" (ml4a) framed early as a literacy rather than a magic trick. Authorship migrates from the mark to the loop: taste, evaluation, and the design of feedback become the medium, the human directing while the model proposes. The discipline is honest assessment—deciding what "good" means for this system and encoding it—so iteration converges instead of wandering. It is the human-in-the-loop ethos taken seriously: the machine as a fast, tireless collaborator whose output is raw material, and the editing of that output the actual work.

Perceptually-uniform ramps, equal-lightness palettes, robust contrast.

Prereqs  Color

Most code still interpolates color in sRGB, where equal numeric steps look wildly uneven and blends drift through muddy grays. OKLab and its cylindrical form OKLCH, designed by Björn Ottosson in 2020, fix this with a perceptually uniform space: equal distances look equally different, lightness is decoupled from hue and chroma, and gradients stay clean. Working in OKLCH lets a palette hold constant lightness across hues, guarantee legible contrast, and rotate hue without darkening—controls that matter enormously for print and accessibility. It is the modern heir to CIELAB, now native to CSS Color 4. Perceptual uniformity turns color from guesswork into geometry.

Vector-first: hatching, single-line fills, layer separation.

Prereqs  Advanced Flow Fields

Vector-first thinking treats the drawing as paths, not pixels: a pen-plotter renders only lines, so tone must come from hatching, cross-hatching, and single-stroke fills, and color from physical layer separation and pen changes. The medium is also the origin of computer art—Georg Nees and Frieder Nake exhibited plotter drawings in 1965, and Manfred Mohr and Vera Molnár made the plotter a lifelong instrument. The contemporary scene, built around the AxiDraw, prizes the honest wobble of real ink on paper over flawless raster. Exporting clean SVG—deduplicated, layer-ordered, path-optimized—is the craft. Resolution-independence and physical mark-making are the whole point.

Tiled rendering, print DPI, colour management, canvas ceilings.

Prereqs  Seeded Determinism & a Hand-Rolled PRNG · Transformations & the Matrix Stack

A generative piece must survive the jump from a thousand-pixel preview to a meter-wide print, and that demands resolution independence: geometry expressed in normalized or scalable units, line weights tied to canvas size, and rendering tiled into chunks to beat the browser's maximum-canvas-dimension ceiling. Tyler Hobbs has written candidly about the labor of producing archival Fidenza prints, where determinism guarantees the on-chain hash and the gallery print are the same artwork at different scales. Print DPI of 300 or more, color management into the print gamut, and deterministic seeding together make output trustworthy. The aesthetic ambition is permanence—work that earns paper.

Draw-call batching, frame budget, workers, GPU profiling.

Prereqs  GPU Instancing at Scale · Particle Systems

Real-time generative work lives inside a frame budget: sixty frames per second leaves about 16.7 milliseconds to compute and draw, and exceeding it stutters. Optimization means measuring before cutting—profiling with the browser's own tools to find the true cost—then batching draw calls, minimizing state changes, offloading heavy computation to Web Workers, and pushing parallel math to the GPU via shaders. The discipline is borrowed from games and demoscene culture, where constraint breeds invention. Aesthetically it widens the possible: smoother interaction, denser particle counts, larger spaces explored live. Performance is not separate from the art here—it sets the ceiling on what the work can attempt.

Design as intentional problem-solving — changing situations into preferred ones, not decoration.

Design is not decoration but deliberate problem-solving. Herbert A. Simon gave the field its enduring definition in "The Sciences of the Artificial": everyone designs who devises "courses of action aimed at changing existing situations into preferred ones." The emphasis falls on intent and consequence, not surface — design begins by framing a problem under real constraints, then choosing among possible futures. John Heskett's "Design: A Very Short Introduction" (2005) widens this to the human capacity to shape our environment to serve our needs and give our lives meaning. The UK Design Council's Double Diamond, refreshed in 2019, still insists on defining the right problem before solving it.

How the eye groups marks into wholes: proximity, similarity, closure, figure–ground.

Prereqs  What Design Is

The whole is other than the sum of its parts — Kurt Koffka's formulation captures the wager of Gestalt psychology, founded when Max Wertheimer's 1912 studies of apparent motion showed perception actively organizes rather than passively records. Alongside co-founders Koffka and Wolfgang Köhler, Wertheimer set out the laws of grouping in his 1923 paper: proximity, similarity, closure, common fate. Each follows from the law of Prägnanz, the mind's pull toward the simplest, most stable interpretation. Edgar Rubin's figure–ground demonstrations show one scene flipping between vase and faces. For designers this is foundational: contemporary design systems like Google's Material Design 3 still encode proximity and similarity as spacing and alignment, letting structure emerge before a single label is read.

Directing attention through scale, contrast, weight, and position.

Prereqs  Gestalt Principles of Perception

Hierarchy is the designer's grammar of attention: by manipulating scale, contrast, weight, and position, a composition declares what matters first, second, and third. Dominance and subordination give the eye a path rather than a field of equals. The Bauhaus and Swiss schools formalized this through typographic emphasis, and Jan Tschichold's "Die neue Typographie" (1928) argued that contrast, not ornament, should rank information. Empirically, Nielsen Norman Group's 2006 eyetracking revealed the F-shaped scanning pattern for dense text, while the older Z-pattern guides the eye across sparse, image-led layouts — proof that people scan rather than read. Today WCAG 2.2 (2023) folds contrast minimums into accessibility, making hierarchy an ethical as well as aesthetic obligation.

Color systems, harmony, meaning, and accessible contrast.

Prereqs  What Design Is

Every color holds three dimensions — hue, value, and chroma — the axes Albert Munsell systematized in his 1905 color order system, giving designers a measurable language beyond names. Harmony schemes like complementary, analogous, and triadic arrange hues by relationship, yet Johannes Itten's seven color contrasts and Josef Albers's "Interaction of Color" (1963) insist a color has no fixed identity: it shifts with its neighbors. Color also carries cultural meaning, so one red signals luck or warning depending on the viewer. On screens, contrast becomes an accessibility requirement, not a preference — the WCAG contrast ratio, current at version 2.2 (W3C Recommendation, 2023), sets a 4.5:1 minimum for body text at Level AA, making legibility something you verify rather than assume.

Type anatomy, hierarchy, and legibility — type as voice and as system.

Prereqs  Visual Hierarchy & Emphasis

Type is language given a body. Robert Bringhurst's "The Elements of Typographic Style" (1992) treats that body as both voice and system: a letter's anatomy — stem, bowl, counter, x-height — determines how a face speaks, while measure, leading, and the column decide whether a reader endures it. Bringhurst's rule of thumb, roughly sixty-six characters to the line, marks the difference between legibility, telling letters apart, and readability, reading for an hour. Ellen Lupton's "Thinking with Type" (2004) extends this into typographic hierarchy, where size, weight, and space rank meaning. Today WCAG 2.2's contrast and text-spacing minimums make legibility an auditable standard, not merely a craftsman's intuition.

Spatial systems and alignment — the rational armature beneath a composition.

Prereqs  Visual Hierarchy & Emphasis

A grid is the rational armature beneath a composition — a spatial system that converts a blank field into a set of aligned, proportioned relationships. Josef Müller-Brockmann codified the practice in "Grid Systems in Graphic Design" (1981), distilling the International Typographic Style that Swiss designers had forged in the 1950s into an objective discipline of columns, modules, and flowlines. The modular grid extends this into a matrix, so alignment and proximity become structure rather than decoration: elements that share an edge or a margin read as belonging together. The stance is that constraint enables clarity. Contemporary practice inherits it directly — CSS Grid translates Müller-Brockmann's modular thinking into the browser's layout engine.

Composition, balance, and rhythm — the active role of the void.

Prereqs  Grids, Layout & Composition

Empty space is not absence but a compositional element with weight and direction. Jan Tschichold's "Die neue Typographie" (1928) overturned the centered, symmetric page, arguing that asymmetric balance — type and white space held in dynamic tension rather than mirrored — was the honest expression of a machine age. This rests on Gestalt psychology: Edgar Rubin's 1915 figure–ground demonstrations showed that perception assigns one region as form and the rest as ground, so the void is never neutral. White space sets rhythm, isolates the focal point, and signals hierarchy through restraint. Contemporary design systems such as Material Design 3 formalize this discipline as spacing tokens, treating the negative as a measurable resource.

Don Norman’s interaction principles: affordances, signifiers, feedback, mapping, constraints.

Prereqs  What Design Is

An object should explain itself. Don Norman's The Design of Everyday Things — first published in 1988 as The Psychology of Everyday Things and revised in 2013 — argues that good design narrows two gaps: the gulf of execution, between intention and action, and the gulf of evaluation, between a system's state and our reading of it. He borrowed affordance from perceptual psychologist James J. Gibson, whose 1979 ecological theory named the action possibilities an environment offers; Norman later split off the signifier, the perceptible cue that advertises an affordance. Natural mapping ties control to effect spatially, constraints rule out error, and feedback confirms it. Today Google's Material Design 3 encodes these signifiers and feedback states as reusable components.

“Less, but better” — good design as restraint, honesty, and longevity.

Prereqs  What Design Is

Dieter Rams, who led Braun's design from 1961, distilled a working philosophy into the Ten Principles of Good Design (Zehn Thesen für gutes Design), formulated around 1980 when he asked whether his own products counted as good design. His motto, "Weniger, aber besser" — less, but better — frames design as restraint: good design is honest, unobtrusive, long-lasting, and ultimately "as little design as possible." Braun's functionalism treated ornament as dishonesty and durability as ethics. The endurance is literal — the 606 Universal Shelving System he designed in 1960 is still manufactured by Vitsœ, a half-century argument that good design outlasts trend.

Ten heuristics as a fast, shared lens for evaluating an interface.

Prereqs  Affordances, Signifiers & Feedback

Heuristic evaluation is usability's cheapest lens: a few inspectors judge an interface against a short list of principles instead of recruiting users. Jakob Nielsen and Rolf Molich introduced the method in 1990, and Nielsen refined the set into the canonical "10 Usability Heuristics for User Interface Design" in 1994 — visibility of system status, match between system and the real world, user control and freedom, consistency, error prevention, recognition over recall, and the rest. He framed it as "discount usability engineering": three to five evaluators surface most serious problems for a fraction of a lab study's cost. The Nielsen Norman Group still publishes the ten as design's default evaluative vocabulary.

A human-centered, iterative, bias-to-action mindset for ill-defined problems.

Prereqs  What Design Is

Design thinking reframes design as a general method for ill-defined problems — a human-centered, iterative, bias-to-action mindset rather than a styling craft. Its lineage runs from Herbert Simon's "The Sciences of the Artificial" (1969) through IDEO, which David Kelley founded in 1991 and where Tim Brown's "Change by Design" (2009) codified the practice around desirability, feasibility, and viability. Kelley also founded Stanford's Hasso Plattner Institute of Design (the d.school, 2005), whose five-mode loop — empathize, define, ideate, prototype, test — is still taught today through the school's own process guides. Critics like Natasha Iskander (2018) counter that its empathy can be shallow and politically conservative.

Discover, Define, Develop, Deliver — diverge then converge, twice.

Prereqs  Introduction to Design Thinking

The Double Diamond is the Design Council's (UK) 2005 map of how good design actually proceeds: two adjacent diamonds, each widening then narrowing. The first diamond is the problem space — Discover, then Define — where divergent thinking gathers evidence before convergent thinking frames the real question. The second is the solution space — Develop, then Deliver — diverging into many concepts, then converging on one to ship. Its discipline is refusing to solve before you understand. The Council's 2019 Framework for Innovation kept this rhythm but added four principles — put people first; communicate visually and inclusively; collaborate and co-create; and iterate, iterate, iterate — and remains widely taught across design and public-sector practice today.

Qualitative research — interviews, observation, and contextual inquiry — to understand people.

Prereqs  Introduction to Design Thinking

Good design begins not with solutions but with people, and the methods for understanding them are qualitative, not statistical. Ethnography, borrowed from anthropology's tradition of participant observation, teaches designers to watch behavior in its lived context rather than trust what people claim they do. Contextual inquiry, the field technique Karen Holtzblatt and Hugh Beyer formalized in "Contextual Design" (1998), pairs disciplined observation with the user interview, studying the work where it actually happens. Such generative design research surfaces latent needs — the unspoken, the improvised, the worked-around. IDEO.org's "The Field Guide to Human-Centered Design" (2015) remains the canonical contemporary toolkit, insisting that empathy, not expertise, is the designer's first discipline.

Synthesis into a sharp, actionable point of view and reframed opportunity.

Prereqs  Empathize: Design Research & Interviews

Research yields data; framing turns data into a point of view. Donald Schön argued in "The Reflective Practitioner" (1983) that designers do not solve given problems but set them — naming and framing what deserves attention. Synthesis distills field observations into insight, which a point-of-view statement crystallizes in the Stanford d.school's form: a user, a need, and a surprising insight. From that stance comes the "How Might We" question — a phrasing Min Basadur introduced at Procter & Gamble in the early 1970s and IDEO later canonized in its widely used Design Kit. Kees Dorst's "Frame Innovation" (2015) names the deeper move: reframing the problem itself is where opportunity lives.

Generate many options before judging — quantity, deferral, and structured methods.

Prereqs  Define: Problem Framing & “How Might We”

Creativity has two motions, and the first is expansion. J.P. Guilford's 1950 presidential address to the American Psychological Association launched the modern study of creativity; he later named divergent thinking — the fluent generation of many possibilities — as distinct from convergent thinking, the search for one right answer. Alex Osborn, the advertising executive behind BBDO, turned this into method: his 1953 "Applied Imagination" codified brainstorming and its cardinal rule — defer judgment, because evaluating and generating at once strangles both. Structured prompts push divergence further: SCAMPER interrogates an idea from seven angles, while Crazy Eights demands eight sketches in eight minutes. Both remain staples of today's ideation workshops. The discipline is sequence — make many, then choose.

Make ideas tangible cheaply — paper to interactive — to learn fast.

Prereqs  Ideate: Divergent Thinking

A prototype is an argument made tangible: not a small version of the final thing but a question asked in material. Fidelity is therefore a deliberate choice, not a measure of progress — Carolyn Snyder's "Paper Prototyping" (2003) shows that hand-sketched screens can answer interaction questions a polished mockup would only delay. Rapid, throwaway prototyping trades finish for speed, embodying IDEO's maxim to "fail often to succeed sooner": build the cheapest artifact that resolves your uncertainty, then discard it. The principle is to match fidelity to the question — low to explore, high to validate. Today Figma's interactive prototyping collapses that spectrum into one continuous tool.

Watch real people use it; learn; iterate — the loop that closes the process.

Prereqs  Prototype: Fidelity & Making Tangible

Usability testing closes the design loop: you watch real people attempt real tasks rather than asking whether they like an interface — behavior, not opinion, is the data. The think-aloud protocol, grounded in K. Anders Ericsson and Herbert Simon's "Protocol Analysis" (1984), has participants narrate their reasoning so confusion becomes audible. Jakob Nielsen's "Why You Only Need to Test with 5 Users" (2000) argues five testers surface about 85% of problems, so frequent small-n rounds beat one large study — now routinely run as remote, unmoderated sessions. Steve Krug's "Don't Make Me Think" (2000) reframes this as cheap, continuous practice: observe, fix, re-test.

Put people first — their needs, contexts, and capabilities drive the whole process.

Prereqs  Introduction to Design Thinking

Human-centered design begins from a stance: people — their needs, contexts, and capabilities — drive the process, not the technology at hand nor the business that wants to ship. Don Norman crystallized this in "The Psychology of Everyday Things" (1988), later retitled "The Design of Everyday Things," reframing usability breakdowns as design failures rather than user error. The philosophy hardened into method with ISO 13407 in 1999, maintained today as ISO 9241-210:2019, which specifies an iterative loop — understand the context of use, specify requirements, produce solutions, evaluate against real use — repeated until needs are met. Practitioners still operationalize it through IDEO.org's "Field Guide to Human-Centered Design" (2015) and its Design Kit, moving from inspiration to ideation to implementation while keeping the person central.

Design for the full range of human diversity — WCAG, inclusive design, disability as a driver.

Prereqs  Human-Centered Design Foundations · Nielsen’s Usability Heuristics

Accessibility is not accommodation added late but a constraint present from the start. The W3C's Web Accessibility Initiative, founded in 1997, codified this in the Web Content Accessibility Guidelines, whose current 2.2 release (2023) still rests on four principles — Perceivable, Operable, Understandable, Robust, or POUR. Yet standards measure conformance, not empathy. Ronald Mace's universal design and Microsoft's Inclusive Design Toolkit reframe disability as a mismatch between body and environment, a driver of invention rather than a deficit. Their stance — "solve for one, extend to many" — holds that designing for a permanent constraint yields tools the whole range of human diversity can use.

Design with people, not just for them — sharing power with those affected.

Prereqs  Human-Centered Design Foundations

Participatory design began as politics, not method: in 1970s–80s Scandinavia, the cooperative or "collective resource" tradition asked who holds power when technology reshapes labor. Pelle Ehn's UTOPIA project (1981–1985) put typographers beside designers, treating workers as co-authors of the systems imposed on them rather than mere users. Liz Sanders and Pieter Jan Stappers later reframed this as co-design, supplying generative tools — making, telling, enacting — so non-designers could express tacit needs; their "Convivial Toolbox" (2012) codified a front-end practice now standard in civic and service design. Sasha Costanza-Chock's "Design Justice" (2020) sharpens the stakes: participation without shared agency is merely consultation.

Reusable components, patterns, and design tokens that scale consistency across a product.

Prereqs  Grids, Layout & Composition · Nielsen’s Usability Heuristics

A design system is not a style guide but a contract: a single source of truth that lets a product scale consistency without re-deciding it. Brad Frost's "Atomic Design" (2016) gave the idea its grammar — atoms, molecules, organisms — recasting a flat pattern library as a composable hierarchy that designers and engineers share. Beneath the components sit design tokens, the named variables Jina Anne coined at Salesforce in 2014 to store a decision once and distribute it everywhere — web, iOS, Android. Today that bridge is formalizing: the W3C Design Tokens Community Group's Format Module reached its first stable version in October 2025, a vendor-neutral handoff between design and code.

Design the whole experience over time and the system that delivers it — not just the screen.

Prereqs  Human-Centered Design Foundations

Service design treats the product as the whole experience over time, not a single screen. G. Lynn Shostack's "Designing Services That Deliver" (Harvard Business Review, 1984) introduced the service blueprint, drawing a line of visibility that separates what the customer sees — the frontstage — from the backstage processes and support systems that actually deliver it. The customer journey map traces that arc as lived; the blueprint exposes the machinery beneath. Donella Meadows's "Leverage Points: Places to Intervene in a System" (1999) reframes the work as systems thinking: the highest-leverage interventions are rarely the visible touchpoint but the goals and feedback loops underneath. Contemporary practice, codified in "This Is Service Design Doing" (2018), pairs both views routinely.

Behavior over time — microinteractions, feedback, and motion as a functional material.

Prereqs  Affordances, Signifiers & Feedback · Prototype: Fidelity & Making Tangible

Interaction design is the design of behavior, not just appearance — Bill Moggridge and Bill Verplank, who coined the term in the late 1980s, framed it as choreographing how a product responds over time. Alan Cooper's "About Face" (1995) grounded that behavior in users' goals rather than features, and Dan Saffer's "Microinteractions" (2013) showed that a single trigger-and-feedback loop — a toggle, a pull-to-refresh — carries a product's character. Motion is the functional material here: easing curves give weight and causality, signaling feedback, continuity, and meaning rather than decoration. Contemporary practice tempers this with the CSS prefers-reduced-motion query, treating motion as an accessibility contract, not an indulgence.

Human-AI interaction patterns, generative UX, and calibrating trust under uncertainty.

Prereqs  Human-Centered Design Foundations · Nielsen’s Usability Heuristics

Designing for AI means designing for probability: a generative system answers the same prompt differently each time, so the interface must make uncertainty legible rather than conceal it. The discipline now rests on codified guidance — Microsoft's eighteen Guidelines for Human-AI Interaction (Amershi et al., CHI 2019), operationalized in the HAX Toolkit (2021), and Google PAIR's People + AI Guidebook (2019). Beneath both lies Lee and See's "Trust in Automation" (2004), which named the real target: not maximal trust but calibrated trust, reliance matched to actual capability. Hence current generative-UI practice — and NIST's AI RMF Generative AI Profile (2024) — treats error, control, and explanation as first-class material, not garnish.

Consequences, values, and futures — value-sensitive design, speculative design, dark patterns, sustainability.

Prereqs  Participatory & Co-Design · Designing With & For AI

Design carries consequences, so ethics is not a finishing coat but structure. Batya Friedman's value sensitive design, formalized in the 1990s, treats human values — privacy, autonomy, justice — as first-class design criteria, surfaced through stakeholder analysis rather than assumed. Victor Papanek's "Design for the Real World" (1971) had already indicted designers for serving consumption over need and ecology. The inverse is deception: Harry Brignull named "dark patterns" in 2010, now reframed as deceptive patterns and outlawed by the EU Digital Services Act's Article 25, applicable across the EU since February 2024. Against complicity, Anthony Dunne and Fiona Raby's "Speculative Everything" (2013) uses design fictions to interrogate futures before we build them.

Pre-training predicts the next token at web scale; post-training — instruction tuning and RLHF — turns the raw predictor into an assistant with someone's chosen taste.

Every model you build on was made twice. Pre-training is the first act: self-supervised next-token prediction over web-scale text, from which grammar, facts, and style emerge as by-products of a single objective (Brown et al., 2020). The result is a base model — fluent, unruly, and indifferent to instruction. Post-training is the second act: supervised instruction-tuning followed by preference optimization — reinforcement learning from human feedback, proposed by Christiano and colleagues in 2017 and industrialized in OpenAI's InstructGPT (Ouyang et al., 2022) — shapes the raw predictor into an assistant. For a creative founder the lesson is that a model's default taste is not nature but curation: human raters chose the behavior that made it agreeable, cautious, and generic. Knowing where behavior comes from tells you which layer — prompt, fine-tune, or post-training — you must change to make it yours.

Founder question Which of your product's behaviors come from the base model, and which from someone else's post-training choices?

Fine-tuning teaches form — voice, format, style — while fresh facts belong in retrieval; LoRA made custom style models cheap enough to be a norm.

Prereqs  How Models Learn

Fine-tuning continues training on your own examples, nudging weights until the model's defaults become your defaults. Full fine-tuning updates every parameter; low-rank adaptation — LoRA (Hu et al., 2021) — freezes the base model and trains small adapter matrices instead, cutting the cost so far that custom style models became a hobbyist norm. The intuition that matters: fine-tuning teaches form — voice, format, visual style, behaviors demonstrated across many examples — and it is a poor vehicle for fresh facts, which belong in retrieval or context where they can be updated and audited. A studio fine-tunes so a model consistently sounds or draws like the house; it retrieves so the model knows this week's catalog. The business half of the decision — build, buy, fine-tune, or orchestrate — is its own tutorial; this is the mechanism underneath it.

Founder question What in your product must be consistent enough to train in, and what must stay swappable in context?

Attention weighs every token against every other; the context window is the model's entire working memory, and whatever is not in it does not exist.

Prereqs  How Models Learn · Noise → Structure: Diffusion Intuition

The transformer, introduced in "Attention Is All You Need" (Vaswani et al., 2017), replaced reading in order with attention: text is split into tokens, and every token computes how much every token before it matters, in parallel, layer after layer. That is the whole trick — relationships, not sequence, weighted and re-weighted until the next token falls out. The context window is the span attention can see, and because attention compares tokens against each other, cost climbs steeply as the window grows — which is why long context is metered and why models forget what falls outside it. The practical intuition for creative work: the window is the model's entire working memory. Whatever is not in it does not exist. Prompts, references, excerpts, and examples are not commands so much as material — what you place in the window is what the attention has to work with.

Founder question What would you place in the window if you treated it as a moodboard rather than a command line?

Closed rents frontier quality by the token; open weights buy control — local generation, fine-tuning rights, provenance, and a cost floor you own.

Prereqs  Fine-Tuning Intuition

Closed models — GPT, Claude, Gemini — are reachable only through an API: capability rented by the token, weights kept home. Open-weight models publish the parameters themselves: Stability AI's public release of Stable Diffusion in August 2022 ignited an ecosystem of fine-tunes and tools almost overnight, and Meta's Llama family ships weights under a community license with its own restrictions — the Open Source Initiative's 2024 Open Source AI Definition reserves the term for far fewer models than the label gets applied to. The trade for a creative company: closed buys frontier quality with zero operations; open buys control — local generation, fine-tuning rights, auditable provenance, a cost floor you own, and independence from a vendor's taste and terms of service. Durable studios usually run both, and know exactly which capabilities sit on which side.

Founder question Which capability in your stack must you own outright, and which are you happy to rent?

Training-data consent, style mimicry, and machine authorship — the ethics that arrive as lawsuits, licenses, and credits, and the studio stance that survives them.

Prereqs  Open vs. Closed Models · Ownership, Licensing & Provenance

The ethics of creative AI arrive concretely — as lawsuits, licenses, and credits. Training data is the first front: Getty Images sued Stability AI in 2023 over scraped photographs — its U.K. claims largely failed at trial in 2025, while its U.S. case continues — and the artists' class action Andersen v. Stability is still testing whether ingestion for training infringes. Style is the second: style as such is not copyrightable, yet prompting "in the style of" a living, named artist can drain the very market that artist built. Authorship is the third: the U.S. Copyright Office's 2023 guidance holds that material generated wholly by a machine is not registrable — human authorship must be shown, a line drawn in practice in the Zarya of the Dawn decision. Provenance standards like C2PA content credentials let work carry its own history. The durable stance for a studio is consent and disclosure as defaults — not because the law is settled, but because it is not.

Founder question If the artist whose style you're borrowing were in the room, would your workflow survive the conversation?

The model in the core loop, not bolted on — and why compounding capability makes it the default architecture.

An AI-native product has the model in its core loop — the software's central verb is performed, judged, or planned by a model — where an AI-enabled product bolts a model onto a workflow that ran fine without it. The distinction matters because capability compounds: Rich Sutton's "The Bitter Lesson" (2019) observed that seventy years of AI research reward general methods that ride growing computation over hand-built cleverness that caps out. A company whose architecture assumes today's model inherits a ceiling; one whose architecture assumes next year's inherits a tailwind. Marc Andreessen argued in 2011 that software was eating the world; the AI-native founder's wager is the sequel — models are eating software, and every interface, data structure, and business process will eventually be renegotiated around a collaborator whose competence compounds on a timescale shorter than a product roadmap.

Founder question Is the model in your product’s core loop, or bolted onto it?

The marginal cost of intelligence is collapsing; plan for the model six months out — without needing it to survive.

Prereqs  What AI-Native Means

The startling economic fact of this era is not that machine intelligence exists but how fast its price falls: Stanford's AI Index measured a more-than-280-fold drop in the cost of GPT-3.5-level inference in roughly eighteen months, and Andreessen Horowitz's Guido Appenzeller dubbed the broader pattern "LLMflation" in 2024 — roughly tenfold cheaper per year at constant capability, faster than Moore's law by a wide margin. Two consequences follow. First, anything uneconomic today at the margin — reading every document, reviewing every line, personalizing every interaction — should be planned as if it will soon be nearly free. Second, William Stanley Jevons's paradox from "The Coal Question" (1865) applies: when using a resource gets more efficient — and thus cheaper — total consumption of it explodes rather than shrinks. The founder's discipline is double-entry: plan for the model six months out, but stress-test the venture against the curve stalling — the business needs today's viable case with capability and cost as upside, never an exponential as a requirement merely to exist.

Founder question If intelligence becomes ten times cheaper next year, what becomes possible in your product?

What remains valuable when everyone rents comparable intelligence — and which layers above the model compound into companies.

Prereqs  The New Cost Curve

When every competitor can rent the same frontier model, the model itself is no moat — so what remains valuable when everyone rents comparable intelligence? Hamilton Helmer's "7 Powers" (2016) still names the durable sources of advantage — switching costs, network economies, scale, brand, cornered resources, counter-positioning, process power — and none of them is "better weights." That is also the honest answer to "just a GPT wrapper": some wrappers are companies and some are features awaiting absorption, and the difference is whether the layer above the model accumulates anything — workflow depth, proprietary data exhaust, integration into systems of record, a customer relationship the lab will never service. Joel Spolsky's "Strategy Letter V" (2002) supplies the uncomfortable corollary: platforms commoditize their complements, and the labs treat application-layer cleverness as a complement to be absorbed. Every capability jump deletes the wrappers whose only asset was compensating for model weakness, and strengthens the ones whose asset was context the model cannot reach. The moat question is therefore not "is our AI better?" but "what do we own that gets stronger each time everyone's AI gets better?"

Founder question What do you own that gets stronger when everyone’s model gets better?

Failure probability × cost × detectability × reversibility — the calculus that finds the jobs AI can hold today.

Prereqs  What AI-Native Means

Clayton Christensen's jobs-to-be-done lens — buyers hire products to do a job, the insight behind the milkshake study he made famous and "Competing Against Luck" (2016) — needs one amendment for probabilistic software: the job must tolerate uncertainty because its outputs are reviewable, recoverable, or measurable. Failure needs an acceptable cost structure, and the calculus has four factors: probability of failure, cost of failure, detectability, and reversibility. Draft-shaped work — writing, code, research, triage — scores well on all four and is AI-native territory today; wire transfers and dosage fail on cost and reversibility and demand a human in the loop. The evidence says this discipline is not optional: Stanford's 2026 AI Index reports that agents, for all their advances, still fail roughly one in three attempts on structured benchmarks. The frontier of "reviewable" expands with every release, but founders who map their market by failure calculus rather than by industry find the openings incumbents miss — and know exactly when the curve unlocks the next one.

Founder question What happens when your product is wrong — who notices, what does it cost, and can it be undone?

The beachhead where today’s reliability already clears the bar — chosen on a frontier that widens every release.

Prereqs  Jobs-to-be-Done for Probabilistic Software

Geoffrey Moore's beachhead doctrine from "Crossing the Chasm" (1991) — dominate one narrow market completely before expanding — gains a new selection criterion when the product is probabilistic: the wedge is where today's reliability already clears the bar. Apply the failure calculus market by market: with agents still failing roughly one in three attempts on structured benchmarks (Stanford AI Index, 2026), the entry point is work where a two-thirds hit rate with cheap review is already ten times better than the status quo — not work that needs five nines the curve has not delivered. The AI-era amendment to Moore is that the beachhead sits on a moving coastline: capability jumps widen the set of jobs the product can hold, so choose a wedge on a widening frontier — where each release extends your reach into adjacent work — rather than a niche the next release lets anyone serve. The wedge is also a data position: small enough that your corrections corpus clears the local quality bar fast, specific enough that the flywheel it starts is yours.

Founder question Where is today’s model already reliable enough to be ten times better than the status quo?

What the model accelerates (synthesis) and what it cannot replace (contact with reality).

Prereqs  Finding the AI Wedge

Steve Blank's "The Four Steps to the Epiphany" (2005) built customer development on a blunt rule — get out of the building, because the facts live with customers — and Rob Fitzpatrick's "The Mom Test" (2013) added the interviewing discipline: ask about their life and past behavior, never about your idea, because people lie to be kind. Models accelerate everything around that contact: synthesizing fifty transcripts, clustering complaints, drafting interview guides, simulating skeptical personas to pressure-test questions before spending a real conversation on them. What they cannot do is replace the contact itself — a model interpolates from what people have already said publicly, and a startup's edge is precisely the non-consensus fact nobody has written down yet. The AI-native discipline is a division of labor: machines for synthesis at scale, founders for the surprising sentence a customer says that no training corpus contains.

Founder question What did a customer tell you this week that no model could have predicted?

When a working demo costs an afternoon, the demo stops being evidence — the bar moves.

Prereqs  Customer Discovery with AI

When Andrej Karpathy named "vibe coding" in early 2025 — describing software conjured conversationally, accepting the model's output without reading every line — he marked the collapse of prototyping cost from weeks to an afternoon. That collapse inverts an old evidence hierarchy. When demos were expensive, a working demo signaled commitment and competence; now that anyone can produce one, the demo itself proves almost nothing, and the scarce signals move upstream to problem selection and downstream to retention. The IDEO tradition treats a prototype as a question made tangible — build to think, build to ask. At AI speed a founder can ask a dozen such questions a week: functional prototypes as interview props, put in front of users while a competitor is still writing a spec. The discipline that survives is knowing what each prototype is supposed to falsify — speed without a hypothesis is just faster noise.

Founder question What hypothesis is this prototype supposed to falsify?

Concierge tests, Wizard-of-Oz, and fake doors — humans behind the curtain until the model catches up.

Prereqs  Prototyping at AI Speed

Eric Ries's "The Lean Startup" (2011) defined the minimum viable product as the smallest experiment that produces validated learning, and the classic repertoire predates AI: Zappos began in 1999 with Nick Swinmurn photographing shoes in local stores and buying them retail only when orders arrived — a Wizard-of-Oz demand test, humans behind the curtain where software would eventually go, with no inventory system behind it. Concierge tests do the manual work overtly as a service; fake-door tests measure clicks on a feature that does not exist yet. The exponential gives this old repertoire new force: "humans behind the curtain until the model catches up" is now a strategy with a plausible payoff horizon, because the curtain-work you staff manually this year is a fine-tuning corpus and an eval suite for the model that automates it next year. Validate the demand curve first; the capability curve is coming to meet you.

Founder question What is the cheapest test that could kill this idea this week?

Services-shaped revenue is not failure — if every engagement leaves behind workflows, data, evals, and software.

Prereqs  Validate Before You Build

Much of what works in AI entrepreneurship does not begin looking like software at all: it begins as a human expert plus an AI workflow plus a proprietary process, embedded in a customer's operation — the pattern institutionalized by the forward-deployed engineer, the Palantir-coined role now common across AI startups. Investors learned to discount "services-shaped revenue" for good reason — Casado and Bornstein's 2020 a16z analysis showed AI companies' margins dragged toward services economics — but the discount misses a distinction that decides ventures: whether each engagement compounds into reusable assets. A service delivery that leaves behind workflows, evals, fine-tuning corpora, and eventually product is a software company being assembled in the field; one that leaves behind only invoices is consulting with extra steps. The exponential makes the first kind a strategy rather than a compromise, because the manual expertise you sell this year defines the job, generates the data, and writes the spec for the software that delivers it next year. The test is not the revenue's shape but its residue.

Founder question Does each service engagement leave behind software, data, and evals — or just invoices?

Seats, usage, or outcomes — what to charge for when the product is labor, not a license.

Prereqs  Service First, Software Later

AI-native products increasingly sell finished work rather than access to tools, and pricing is migrating to match: per-seat licensing assumes value scales with human headcount — exactly the assumption agents break — while usage pricing tracks cost and outcome pricing tracks value. Intercom's Fin resolving support conversations for a posted price per resolution made the pattern concrete: the unit sold is the completed job. Outcome pricing demands an auditable definition of "done," which is why it pairs naturally with eval discipline, and it exposes the seller to the model's variance, which is why margins must be modeled per-outcome rather than per-license. The exponential is the pricing founder's ally twice over: falling inference cost widens the margin on every outcome sold, and rising capability grows the set of jobs deliverable at a promised quality — provided the price was anchored to customer value, not to a token cost that will look quaint in eighteen months.

Founder question What is the customer’s definition of “done,” and would they pay per instance of it?

Gross margin when COGS is tokens — and why the falling curve forgives sins it shouldn’t excuse.

Prereqs  Pricing AI Outcomes

Martin Casado and Matt Bornstein's "The New Business of AI" (a16z, 2020) warned early that AI companies were shipping software economics with services-shaped costs: gross margins dragged into the 50–60 percent range, well below the 60–80-plus benchmark of comparable SaaS, by inference bills, human review, and per-customer variance. The response is an engineering discipline unit economics has never had to include before — caching repeated work, routing easy queries to small models and hard ones to frontier models, distilling expensive capability into cheap specialized weights, and batching where latency allows. The falling cost curve forgives much of this over time, and that is precisely its danger: a business that is only viable because tokens got cheaper has no moat against competitors enjoying the same discount. Model the margin at today's prices, treat the curve as upside, and know your cost per successful outcome — not per API call — because failures and retries are part of the true unit.

Founder question What does one successful outcome cost you, retries and review included?

Models, retrieval, orchestration, evals — what to build, what to rent, what to expect to throw away.

Prereqs  Unit Economics of Inference

The stack above the model has stabilized into recognizable layers: retrieval that grounds generation in your data — the pattern formalized as retrieval-augmented generation by Patrick Lewis and colleagues in 2020 — orchestration that sequences model calls and tools, evaluation harnesses that say whether any of it works, and the models themselves, rented from labs or run as open weights. The build-versus-rent line keeps moving as capability compounds, and the durable rule is to own what differentiates and rent what commoditizes: your evals, your data pipelines, and your workflow integration are yours; the model layer is a supplier relationship with unusually healthy vendor competition. Anthropic's Model Context Protocol (2024) marks the architectural turn worth building toward — a standard interface for connecting models to tools and data, on the premise that software increasingly presents itself to agents, not only to people. Expect to rewrite a large fraction of this stack yearly; design so the rewrites are cheap.

Founder question Which layer of your stack would hurt a competitor most to lose — and do you own it?

The decision ladder from foundation API to custom model — climbed only where ownership creates unreproducible value.

Prereqs  The AI-Native Stack

The stack describes the layers; the entrepreneurial decision is where on the ladder to own. The rungs run from renting a foundation API, to running open weights, to grounding with retrieval and context, to wiring tools, to orchestrating workflows and agents, to fine-tuning on proprietary data, to distilling capability into cheap specialized models, to — rarely, and expensively — training something custom. Each rung upward trades capital and maintenance burden for control, margin, and differentiation, and each is worth climbing only where it passes one test: does this produce customer value that somebody else cannot economically reproduce? Renting the frontier is usually right for raw capability, because the labs' vendor competition does your R&D; owning becomes right where proprietary data makes a fine-tune genuinely yours, or where distillation converts a proven expensive behavior into margin at scale. And the ladder moves: the exponential regularly turns yesterday's fine-tuning project into today's prompt, so date every ownership decision and re-decide it annually.

Founder question What are you building that somebody else cannot economically reproduce?

Interfaces for a system that is sometimes wrong: confidence, review loops, and graceful failure.

Prereqs  The AI-Native Stack

Jakob Nielsen called generative AI the first new interaction paradigm in sixty years: intent-based outcome specification, where the user states what they want and the system decides how. Designing for it means designing for a collaborator that is sometimes wrong — the product must make review cheap, error recovery graceful, and confidence legible without drowning the user in caveats. The craft patterns are converging: show provenance so claims can be checked, stage autonomy so trust is earned action by action, keep the human approval step exactly where the cost of error exceeds the cost of review, and log everything so failures become training data. The moving part is the exponential: autonomy thresholds set for last year's model patronize this year's, so the review architecture itself needs dials, not constants. The products that feel magical are rarely the most capable — they are the ones whose designers placed the checkpoints where users actually feared the mistake.

Founder question Where exactly does the cost of an error exceed the cost of a review?

The eval suite is the spec, the regression test, and the roadmap in one artifact — built from your job, not borrowed benchmarks.

Prereqs  The AI-Native Stack

In AI-native development the evaluation suite quietly absorbs three jobs that used to be separate documents: it is the specification (what does good output mean, made executable), the regression test (did the new model or prompt break what worked), and the roadmap (the failing evals are the backlog, ranked by customer pain). Stanford's HELM project (2022) demonstrated the form at research scale — holistic, multi-metric, scenario-based measurement — but the entrepreneurial translation cuts against borrowing: public benchmarks saturate, drift, and leak into training data, so a score on someone else's test says little about your customer's job. Build evals from the job you are hired for — real user failures, held-out cases the team cannot overfit — because a capability you have not written an eval for is a capability you do not actually manage. Evals are also what make the exponential navigable: "the new model dropped — are we better or broken?" becomes an afternoon's run, and teams with strong evals ship the upgrade while competitors are still collecting anecdotes.

Founder question How would you know this output was actually good?

Usage that makes the product better — engineering the loop and surviving the empty start.

Prereqs  Evals Are the Product Spec

A data flywheel is the loop where using the product generates data that makes the product better, which attracts more use — the compounding engine behind the strongest AI-native businesses, and the modern home of Andrew Ng's data-centric argument that improving your data beats improving your architecture. The loop must be engineered, not assumed: capture the correction, not just the click; structure feedback so it becomes evals and fine-tuning corpora rather than a sentiment dashboard; close the loop visibly so users see their corrections take effect. Andrew Chen's "The Cold Start Problem" (2021) names the hard part — every flywheel begins stationary — and the AI-era answers are concierge phases that manufacture early data, synthetic data to rough in coverage, and wedge markets small enough that modest data still clears the local quality bar. One caution the exponential adds: generic capability improvements accrue to everyone renting the same model, so the flywheel only defends you when the data it captures is workflow-specific — the corrections only your customers, in your product, could have produced.

Founder question What does your product learn from each use that only your product could learn?

Predefined steps or self-directed loops — the simplest structure that works, architected to be promotable.

Prereqs  Product Design Under Uncertainty

Anthropic's "Building Effective Agents" (2024) drew the load-bearing distinction: workflows orchestrate models through predefined steps, while agents direct their own process — choosing tools and looping until done, the pattern research formalized as reasoning-plus-acting (ReAct, 2022). The engineering guidance is conservative and correct: use the simplest structure that works, because a workflow's predictability is a feature you surrender only when the task genuinely requires open-ended judgment about what to do next. The strategic guidance points the other way: as capability compounds, the frontier of tasks trustable to agents expands monthly, so architect workflows you can promote to agents without rewriting the product — the same decomposition, evals, and tool interfaces serve both, and the difference becomes a dial rather than a rewrite. The test for any given task is the question this lecture leaves you with: does it require judgment about the next step, or execution of known steps? Bill both accordingly, and re-ask the question every release.

Founder question Does this task require judgment about the next step, or execution of known steps?

Machine-readable capabilities, delegated auth, meterable pricing — designing for the buyer who never sees your landing page.

Prereqs  Workflows vs. Agents

Software's newest buyer never sees your landing page: an agent, acting on a customer's behalf, discovers capabilities from machine-readable descriptions, negotiates authentication and permissions, compares prices, invokes the tool, and judges the result. The infrastructure for that world is consolidating fast — Anthropic donated the Model Context Protocol to the Linux Foundation's Agentic AI Foundation in December 2025, with OpenAI, Google, Microsoft, and AWS participating, and the July 2026 specification revision pushed the protocol toward stateless, enterprise-scale agent deployments. For a founder this is a second product surface with its own go-to-market: capabilities must be described the way an agent parses them, permissions delegated safely, pricing meterable per invocation, reliability legible as machine-checkable trust signals rather than testimonial logos. Every question this track asks about human customers re-asks itself mechanically — how do agents discover you, what convinces one to choose you, what makes it return? The companies that answer early become the suppliers the agentic economy routes through by default.

Founder question When an agent evaluates your product on a customer’s behalf, what does it see?

A reachable customer beats a better benchmark — channels, wedges, and speed as strategy.

Prereqs  Moats, Wrappers & Commoditization

"First-time founders are obsessed with product; second-time founders are obsessed with distribution" — the adage, often credited to Justin Kan, predates this era and rules it. ChatGPT reached an estimated hundred million users in two months not only because the model was good but because the interface was universal and free; countless technically comparable products died unfound. In the model era the advantage is structural: a benchmark lead evaporates at the next release, while a customer relationship, a channel, an installed workflow persist through every capability jump and get to deliver each one as a product improvement. Distribution-first tactics look unglamorous — wedge into one underserved niche, embed where work already happens, let the product's output carry the signature that markets it. The exponential's corollary is speed: when your differentiating feature will be a commodity in a year, the window in which to convert it into distribution is the strategy.

Founder question How will the first hundred customers discover you?

Generated content erased the advantage of volume — authority, proprietary knowledge, and community became the scarce assets.

Prereqs  Distribution Beats Model Quality

AI made content infinitely scalable and thereby erased the advantage of scalable content: when anyone can generate a thousand adequate articles, adequacy becomes noise. What collapsed was undifferentiated volume — commodity SEO content — and the channels formalized the collapse: Google's March 2024 update introduced spam policies naming "scaled content abuse", and sites that mistook volume for strategy were deindexed during the rollout. What becomes scarce, and therefore valuable, is what cannot be generated: lived expertise with a name attached, opinionated teaching that takes real positions, proprietary data only you can publish, and community — people choosing to be in a room together, asking questions and showing work. Community is also quietly the era's proprietary-data engine: the platforms learned this when Reddit's licensing deal with Google (reported around sixty million dollars a year, 2024) priced authentic human conversation as model feedstock. The playbook inverts the old arithmetic: use models to multiply the leverage of genuinely scarce voice — research assistance, repurposing, translation — never to replace it.

Founder question What do you publish that could not have been generated?

Inputs, outputs, weights, likeness, and feedback — the rights stack that determines what the business can actually sell.

Prereqs  Moats, Wrappers & Commoditization

Before the pricing page, do the rights audit: an AI-native venture is a stack of claims about ownership, and each layer has different law and different leverage. Outputs: the U.S. Copyright Office's guidance holds that copyright requires human authorship, so purely machine-generated work is not copyrightable — what your customers own in what your product makes is a contract question you must answer deliberately. Inputs: training-data rights, customer-data rights, and the increasingly valuable right to learn from feedback — the flywheel runs on permissions you must actually have. Terms above you: model providers' commercial-use terms and training opt-outs; weights below you: open-weight licenses that differ meaningfully in what commercial use they allow. Around all of it: likeness, voice, and publicity rights that creative products trip over first, and provenance — C2PA content credentials — that turns "we can prove where this came from" into both a compliance answer and a feature. The rights stack is not legal hygiene; it determines what the business can actually sell, and to whom.

Founder question What, precisely, does your company own — and can you prove it?

Privacy, liability, and accuracy commitments — the enterprise buys the guarantee, not the demo.

Prereqs  Ownership, Licensing & Provenance

The enterprise does not buy the demo; it buys the guarantee. Objections to AI purchases are by now a stable catalog — where does our data go, is it trained on, who is liable when the model is wrong, how do you know how often it is wrong — and each has become a sellable artifact: data-processing agreements and no-training commitments, SOC 2 audits, accuracy SLAs backed by published eval results, and insurance-shaped contract language. The liability question stopped being hypothetical in 2024 when a Canadian tribunal held Air Canada responsible for a bereavement-refund entitlement its website chatbot invented: the company argued, in effect, that the bot was a separate entity responsible for its own actions, and lost. For startups this catalog is an opening, not a burden — a prepared founder walks procurement in days while unprepared competitors stall for quarters, and trust artifacts compound like code. Sell the ceiling too: buyers adopting you are underwriting the agent you will ship next year, and they need to trust the trajectory, not just the release.

Founder question Which artifact — audit, SLA, or agreement — would unblock your hardest procurement conversation?

Replacement captures an existing budget; creation must build both the behavior and the budget — different playbooks entirely.

Prereqs  Distribution Beats Model Quality

Geoffrey Moore's "Crossing the Chasm" (1991) mapped selling to pragmatists who buy references, not visions; Al Ramadan and colleagues' "Play Bigger" (2016) argued the biggest outcomes design new categories and crown themselves king. AI splits the paths cleanly, and the split is budgetary: replacement — "AI for X" — captures an existing budget line and comparison set, faster to sell, easy to price against the incumbent, and exposed to that incumbent bolting on the same model; category creation must build both the behavior and the budget, with no line item to claim and missionary sales to fund, but it wins definitional power when the category lands — the way ChatGPT turned the general-purpose AI assistant into a budget line that did not exist before late 2022 — enterprises had long paid for task-specific chatbots, but not for an assistant that could be handed any task. The exponential advantages the creators: capability jumps continually mint behaviors that have no incumbent, and each jump is a category-naming window that closes as fast as it opens. The test of an honest category: describe the product without naming the technology — if nothing distinct remains, you have a feature, not a category.

Founder question Are you capturing an existing budget line or creating a new behavior — and does your go-to-market match?

The model providers will absorb the obvious; position where the next capability jump helps you.

Prereqs  Selling Trust · Category Creation vs. Replacement

Every application founder lives with the fear that the next model release ships their product as a feature — the era's version of Apple "sherlocking" Watson in 2002, or Microsoft bundling the browser that ended Netscape. The labs are explicit about absorbing the obvious layer above the model; Spolsky's commoditize-your-complement logic runs downhill from whoever owns the platform. Survival is positional. Lose if your product is a generic capability at the model's natural surface — summarization, transcription, first-draft anything. Persist if you hold what platforms structurally avoid: deep vertical workflow, regulated-industry trust, systems-of-record integration, community, or a data loop the platform cannot see. The sharpest test runs forward along the curve: for each capability jump you can foresee, ask whether it makes your product stronger or unnecessary. If model improvement is your tailwind — your product does more per release for the same engineering — you are positioned; if it is your countdown, reposition now, while the exponential still gives you time it will later take away.

Founder question What happens to your company if the next model release gains your headline feature?

Automate, augment, supervise, own — deciding what humans do when software performs much of the knowledge work.

Prereqs  When Your Customer Is an Agent

The AI-leveraged company is organized around a question older org design never had to ask: for each unit of knowledge work, should software do it, should software draft it for a human to finish, should a human supervise software doing it, or must a human own it outright? Automate, augment, supervise, own — the ladder every role decomposes onto, and the decomposition moves yearly as capability compounds, so it is a standing planning instrument rather than a one-time reorg. What survives from classic doctrine is Matthew Skelton and Manuel Pais's "Team Topologies" (2019): stream-aligned teams owning customer outcomes, platform teams reducing everyone else's cognitive load — with eval and data infrastructure now a platform concern as fundamental as CI. What is new is where humans concentrate: judgment, taste, trust, and customer contact — the edges of the work — which is why the forward-deployed engineer matters more than another layer of management. The leaders among AI-native companies run revenue-per-employee figures that make classic SaaS benchmarks look industrial; the discipline behind that number is asking, before every hire, what an agent plus the existing team cannot do — and whether that answer survives next year's model.

Founder question For each role you plan to hire: automate, augment, supervise, or own — which is it?

Raising when everything is overpriced: milestones investors believe, and burn discipline the curve rewards.

Prereqs  Unit Economics of Inference

Carlota Perez's "Technological Revolutions and Financial Capital" (2002) reads every great technology surge the same way: frenzied capital overshoots, crashes, and then the durable deployment period builds the real economy — a rhythm Gartner's hype cycle restates in miniature. Raising in the frenzy phase is a discipline of its own: capital is abundant but priced on narrative, and the valuation that flatters today becomes the bar that indicts tomorrow. The AI-specific traps are twofold — burn that scales with usage (inference is a variable cost venture math often models as fixed) and milestones borrowed from the platform story ("we'll train our own model") rather than the business ("we'll own this workflow"). David Sacks's burn multiple — dollars burned per dollar of net new recurring revenue — travels well here, with one AI-native amendment: report margin per outcome alongside growth, because investors have learned that AI revenue can be services in a software costume. Raise against evidence the curve will strengthen: retention, data loops, and evals — not against a demo the next release gives everyone.

Founder question What milestone would you still be proud of if the hype cycle ended tomorrow?

Logging, provenance, oversight, and documentation as one architecture that yields both compliance and sales advantage.

Prereqs  Selling Trust

Treat the regulatory landscape as a snapshot, and the architecture as the durable lesson. The snapshot, as of mid-2026: the EU AI Act — the first comprehensive AI law — entered into force in August 2024, its prohibitions and AI-literacy requirements applying from February 2025, its general-purpose AI obligations from August 2025, with further high-risk provisions phasing in on evolving schedules; the United States' NIST AI Risk Management Framework (2023) and its Generative AI Profile (2024) remain the de facto vocabulary for governing AI systems even where nothing mandates them. The durable lesson is that regulatory architecture is product architecture: logging, provenance (C2PA content credentials), evaluation evidence, human-oversight points, and data governance are one set of design decisions that yields compliance and sales advantage simultaneously. The startup that builds them early converts a legal requirement into a moat — procurement clears faster, regulated industries open sooner, and later competitors face a retrofit the pioneers amortized years before. The agentic future raises the stakes: autonomous systems acting on customers' behalf will be judged by their audit trails, and whoever designed for accountability from the first commit owns that conversation. Build the paper trail as product, not paperwork.

Founder question Which compliance artifact could you build this quarter that doubles as a sales asset?

Retention over signups, margin over revenue, evals over vibes — measuring an AI product honestly.

Prereqs  Data Flywheels & Cold Starts

Sequoia's "Generative AI's Act Two" (2023) said the quiet part with data: AI apps were acquiring users at historic speed and retaining them far below the mobile-era benchmarks, because novelty drives signups and only embedded value drives return visits. The honest dashboard for an AI-native product starts there — cohort retention over cumulative signups, and a north-star metric denominated in completed jobs, not sessions. Around it sit the metrics this architecture makes newly necessary: margin per successful outcome (tokens, retries, and human review included), eval pass rates trended across model versions, escalation rate — how often the human behind the curtain still catches the work — and correction rate feeding the data flywheel. Vanity has new costumes: "AI interactions" is the new page views, and services-shaped revenue that builds no reusable asset shows up only in margin — the Service First test applies: measure the residue, not the shape. The exponential adds one composite worth watching — capability leverage: does each model upgrade raise your completed-jobs-per-user while costs fall? A durable product answers yes reflexively.

Founder question When the models improve, do your completed-jobs-per-user rise without you shipping anything?

Capstone: assembling everything into a venture that gets stronger with every model release.

Prereqs  Living in the Platforms’ Shadow · Metrics That Matter · The AI-Leveraged Company

Jeff Bezos's planning dictum was to build on what will not change — customers will always want lower prices, faster delivery — and the AI-native translation is exact: build on the one thing this era most reliably promises: that models will be dramatically more capable and dramatically cheaper every year. The durable company is assembled from everything this track has argued, arranged so the curve compounds it: a job chosen because its failure calculus welcomes probabilistic work, a wedge on a widening frontier, a wrapper thickened into workflow ownership, prices anchored to outcomes, margins engineered honestly, evals that make every model release an upgrade shipped in a day, a flywheel of corrections only your product could capture, a rights stack you can prove you own, distribution and trust that persist through capability jumps, humans placed where judgment lives and agents everywhere else, capital raised against retention rather than spectacle, and an audit trail that turns regulation into an asset. Hamilton Helmer calls power what makes advantage durable; here, durability has a single test, applied release after release: when the models get better, does your company get stronger — automatically, structurally, without a meeting? Build until the answer is yes, then keep it yes.

Founder question Does the next model release make your company stronger automatically?

AI is not an add-on: it changes how software is built, what runs inside it, and who — or what — can use it.

The claim is broader than "use AI to help write code." AI now enters the web stack in three places at once: a coding agent joins the development process — reading the repository, editing many files, running commands, browsing the application it just changed; models and agents become runtime components alongside the database and the queue; and the product grows a second, machine-readable face, because its next user may be another agent. Andrej Karpathy's "Software 2.0" essay (2017) anticipated the turn — software increasingly specified by data and optimization rather than hand-written logic — and by 2026 the frameworks had caught up, with Next.js publicly rebuilding its developer experience "for an agentic future." The durable skill is therefore architectural literacy — boundaries, state, permissions, failure modes, verification — directed at both deterministic code and probabilistic collaborators. The reference stack will change; the conceptual stack outlives every implementation of it.

Builder question Which parts of your application should remain deterministic, and which genuinely benefit from model judgment?

Browser → server → database → model → tools → external services: draw the system before asking an agent to build it.

Prereqs  What AI-Native Full-Stack Means

A full-stack application is a conversation among boundaries: the browser renders and emits events, HTTP carries requests, server code applies rules, the database keeps durable facts, and in an AI-native app a model may choose a tool that calls a service that streams results back mid-response. Roy Fielding's 2000 dissertation, which named REST, modeled the discipline: derive the architecture from explicit constraints — client–server, statelessness, uniform interface — before writing code. So draw the system before asking an agent to build it, and make every arrow answer four questions: what crosses this boundary, who may send it, where does state live, what happens when the call fails. That habit prevents the signature failure of agent-generated software — locally plausible files that do not form a coherent system — and it keeps secrets and consequential writes on the trusted side of the map even when the framework makes both sides feel syntactically identical.

Builder question Can you draw every important boundary in your application and identify the state and authority on each side?

Commits, diffs, and branches turn agentic code changes into inspectable, reversible experiments.

Prereqs  Map the Whole System

Linus Torvalds wrote Git in 2005, in the weeks after the Linux kernel lost its license to BitKeeper, to answer a question agentic development has made urgent again: how do thousands of loosely coordinated contributors change one codebase without losing history or trust? A coding agent can modify ten files in seconds; the chat transcript is not a record of what actually changed, but the diff is. The core vocabulary is small — repository, working tree, diff, commit, branch, merge — and it turns delegation into a sequence of inspectable, reversible experiments: commit a known-good state, ask the agent for one bounded change, read the diff, run verification, commit again. Reverting is not failure; it is the experimental loop working. The history that accumulates is a trace of decisions that stays intelligible long after the model conversation that produced it is gone.

Builder question If an agent made a bad multi-file change right now, could you identify it, explain it, and restore the last known-good state?

Replace prompt-and-hope with a disciplined loop: specify → plan → build → run → inspect → verify → revise.

Prereqs  Git as Memory & Reversibility

When Andrej Karpathy named "vibe coding" in early 2025 — conversational software, the model's output accepted without reading every line — he was describing a mode, not a method. The method is a controlled loop: specify → plan → build → run → inspect → verify → revise, with the agent as an operator inside it rather than an oracle above it. Give it a bounded objective, the relevant repository context, explicit constraints, and a definition of done; ask it to inspect before editing and to run the result after. The tooling has converged on this shape — by 2026, Next.js was shipping agent-oriented project context, diagnostics, and browser visibility in its 16.2/16.3 releases, on the observation that agents get more reliable when they can observe the real environment instead of inferring it from pasted snippets. The human role moves upward: choose the architecture, constrain the scope, judge the evidence. The operative skill is not prompting; it is directing a tool-using collaborator.

Builder question What evidence should the coding agent produce before you accept that a feature is actually finished?

Give the agent the right project knowledge, constraints, tools, and examples before giving it more words.

Prereqs  Build With a Coding Agent

An agent can only act well on what it can perceive, and "context engineering" — the term Shopify's Tobi Lütke put in circulation in mid-2025, with Karpathy's endorsement, as the successor to "prompt engineering" — names the discipline of shaping that perception: architecture notes, naming conventions, run commands, version-matched documentation, examples, and clear task boundaries. The objective is not maximal context but the smallest context that makes correct action likely, because stale or contradictory instructions are worse than missing ones. Durable projects externalize their knowledge into the repository itself — the AGENTS.md convention (2025) is the emerging cross-tool home for it, and existing tests specify expected behavior more precisely than prose ever will. Context is also a security boundary: an agent that can read files should not thereby hold secrets. Good context engineering makes a repository legible to humans and agents at once — a workable definition of maintainable software in an agentic era.

Builder question What does an unfamiliar agent need to read or run before it can safely change this repository?

The agent’s explanation is not evidence; running code, tests, browser behavior, and diffs are.

Prereqs  Build With a Coding Agent · Context Engineering for a Codebase

Edsger Dijkstra's 1970 warning — "program testing can be used to show the presence of bugs, but never to show their absence" — gains a sharper corollary when the programmer is probabilistic: an agent's explanation can be fluent, confident, and describe work that was never executed. AI-native development therefore runs on an evidence hierarchy. A passing type-check outranks "this should compile"; a passing browser test outranks "the button is wired"; an inspected database row outranks "the save succeeded." Design the verification before the implementation: define observable acceptance criteria, then give the agent tools capable of checking them — compilers, linters, unit tests, database assertions, browser automation. Playwright's own best-practices guidance points the same way: test user-visible behavior, not implementation detail, so an agent may refactor internals while the specification holds. The deeper principle is epistemic — separate what the model claims from what the system demonstrates — and it is what lets builders delegate larger work without delegating judgment.

Builder question For your current feature, what observable result would prove success without relying on the agent’s own description?

Learn the browser’s durable substrate well enough to inspect and correct generated interfaces.

Prereqs  Verification-Driven Development

Frameworks come and go, but every one of them compiles down to the substrate Tim Berners-Lee proposed at CERN in 1989 and shipped as HTML: a document of elements, styled by CSS, represented at runtime as the DOM tree, reacting to events. AI-native builders do not need every property memorized; they need enough web literacy to inspect what generated code ultimately becomes. Semantic HTML is the load-bearing part — a button should be a `button`, form fields should carry labels — because native elements bring keyboard behavior, accessibility semantics, and predictable tooling with them, which is what the W3C's WCAG guidelines and the browser's accessibility tree measure. Coding agents make this literacy more important, not less: a generated interface can be visually plausible while being unnavigable by keyboard and incoherent to assistive technology. Open the inspector; read the tree; know when the agent has produced the wrong thing under a right-looking surface.

Builder question If the visual styling disappeared, would the underlying document still communicate its structure and controls correctly?

Read, modify, and constrain generated code with types instead of memorizing a language from scratch.

Prereqs  Read the Web: HTML, CSS, the DOM & Accessibility

TypeScript — released by Microsoft in 2012 under Anders Hejlsberg, the language designer behind Turbo Pascal and C# — is JavaScript plus a static type system that checks assumptions before the program runs. For an AI-native builder its value is not syntax mastery but contract visibility: a function declares what it accepts and returns, an object declares its shape, and the compiler rejects whole classes of agent-generated mistakes in seconds, inside the tight feedback loop both humans and agents need. The working vocabulary is compact — values, objects, functions, modules, promises and async/await, unions, interfaces, narrowing — and the pedagogical emphasis is reading and modification: given generated code, can you identify the data flowing through a function, change a type safely, follow an asynchronous request, and treat a compiler error as information rather than obstruction? The same schema thinking then carries directly into tool inputs, model outputs, and API payloads. Types do not make software correct; they move ambiguity out of runtime and into the loop.

Builder question What assumption in this function is currently implicit that should be made explicit in its type?

Build interfaces as components whose rendered output changes in response to state and events.

Prereqs  TypeScript for AI-Native Builders

React — built at Facebook by Jordan Walke and open-sourced in 2013 — popularized the mental model this tutorial actually teaches: an interface is a function of state. Decompose the UI into components that receive data and return rendered output; hold state for what changes over time; let events — clicks, keystrokes, submissions — drive state transitions, and let the framework re-render what follows. The critical design question is where state belongs: shared state lives at a shared boundary, and a value derivable from existing state should be derived, not duplicated, because a second copy is a standing invitation to contradiction. AI-native interfaces expand the state space rather than change the model — a stream of partial output, a tool call awaiting approval, a background agent mid-task are all just conditions to render. Understanding components and state is what lets you make agent behavior visible instead of hiding a working system behind a spinner.

Builder question What are the smallest pieces of state required to render every meaningful condition of this interface?

Decide what executes in the browser, what executes on the server, and how URLs map to application behavior.

Prereqs  Components, State & Events · Map the Whole System

Full-stack frameworks make client and server feel like one codebase; they do not make them one trust domain. The browser is controlled by whoever operates it and must be treated as untrusted; the server holds secrets, enforces authorization, and performs privileged writes. React's Server Components — and the Next.js App Router built on them — make the boundary explicit inside a single component model: server components render with privileged access, client components handle interaction, and server functions let forms invoke mutations without hand-built endpoints, while routing turns URLs into the application's information architecture. The durable lesson is placement, not directory syntax: render public data on the server, keep the drag interaction in the client, keep the model API key server-side only, and authorize every mutation where it executes. Agent-generated code fails here in a characteristic way — logic lands in the easiest file rather than the least-privileged place — and the reviewer's job is to catch exactly that.

Builder question For each operation in your feature, what is the least-privileged place where it can safely execute?

Requests and responses are the connective tissue of the web — including when the response arrives a piece at a time.

Prereqs  Server/Client Boundaries & Routing · TypeScript for AI-Native Builders

HTTP is the protocol under everything in this course — pages, JSON APIs, model calls, webhooks, MCP transports — first sketched by Tim Berners-Lee in 1991 as a one-page, GET-only protocol, its request/response grammar stabilized by mid-decade into the shape it still has: method, URL, headers, body over; status, headers, body back. JSON, which Douglas Crockford specified in the early 2000s from a subset of JavaScript, became the lingua franca of the payloads. Students need the working set — GET versus POST, status codes, content types, auth headers, idempotent reads versus consequential writes, timeouts and retries — because most "integrations" are just structured agreements about these. AI adds the pattern that changes interface design: streaming. A model generates over seconds, and the WHATWG Streams API lets both server and browser process data incrementally, so partial results become visible as they arrive. Once HTTP and streams are understood as primitives, every SDK reveals itself as a convenience over a protocol you can inspect with developer tools.

Builder question What exactly crosses the network in this interaction, and what should happen if the connection ends halfway through?

Persistent application state becomes tables, relationships, and queries rather than an opaque backend service.

Prereqs  HTTP, JSON, APIs & Streaming

E. F. Codd's "A Relational Model of Data for Large Shared Data Banks" (1970) proposed the abstraction this tutorial rests on: store durable facts as rows in tables, relate them through keys, and query them declaratively — say what data you want, not how to walk the storage. SQL, which grew from IBM's System R project in the mid-1970s, remains that declarative language half a century later, and PostgreSQL — descended from Michael Stonebraker's Postgres project at Berkeley (1986) — is the reference implementation here. The essential vocabulary is small: table, row, column, primary and foreign key, SELECT/INSERT/UPDATE/DELETE, filter, aggregate, and above all JOIN, the conceptual leap that reveals relationships as queryable structure rather than a pile of spreadsheets. Agents and ORMs will write most queries; verification still requires reading them — predicting which rows a query touches is part of checking an agent's work, and agentic systems only raise the stakes, since tool runs, approvals, and memories all need durable representation somewhere.

Builder question What are the durable nouns in your application, and which relationships between them must the database enforce?

Design the shape of persistent state, evolve it deliberately, and make related writes succeed or fail together.

Prereqs  Relational Data & SQL · Git as Memory & Reversibility

A schema is an executable model of what the application believes exists: columns encode attributes, constraints encode rules, relationships encode structure — product design at the most durable layer. Schemas evolve, and a migration is to data what a commit is to source: a versioned, reviewable transformation with history. The asymmetry deserves respect — reverting code is cheap, but a destructive migration can lose data no rollback recovers, so agent-drafted migrations are precisely where human inspection concentrates. Transactions handle the other integrity problem: Jim Gray formalized the transaction concept around 1981, and Theo Härder and Andreas Reuter named the ACID properties — atomicity, consistency, isolation, durability — in 1983. PostgreSQL wraps related writes between BEGIN and COMMIT so they succeed or fail as one unit: create the order and decrement the inventory together or not at all. Agentic systems intensify the need, because one model decision may fan out into several side effects — and a model's intention is not an atomic, validated state transition until the database makes it one.

Builder question Which operations in your application would leave the system inconsistent if only half of them succeeded?

Authentication answers who; authorization answers what that identity may do — including when an agent acts on its behalf.

Prereqs  Data Modeling, Migrations & Transactions · Server/Client Boundaries & Routing

Identity is not permission. Authentication establishes who a user or service is; a session carries that identity across requests; authorization decides what the identity may do right now — and collapsing the three into one "logged in" check is among the most common sources of insecure application logic. Saltzer and Schroeder's 1975 principles, least privilege chief among them, remain the standing rules: every action should execute with the narrowest authority that accomplishes it. In the reference stack, sessions ride cookies or tokens whose transport, lifetime, and script access need deliberate handling, and PostgreSQL's row-level security moves access rules into the data layer itself — policies decide which rows an identity may read or write. The AI-native extension is delegated authority: an agent acting for a user must not inherit unlimited power because a model emitted a tool call — which is why OAuth's core separation of client, resource owner, and authorization server matters here, and why RFC 9700 (2025), the current OAuth security best-practice, tightens how tokens and grants may flow between them. Ask of every request: acting as whom, allowed to do exactly what?

Builder question When this request reaches the database or tool, what identity is it acting as and what exact authority does that identity possess?

Large binary assets belong in object storage while metadata, ownership, and permissions remain explicit application data.

Prereqs  Identity, Sessions & Authorization

Creative-technology applications are never only text: they accumulate images, video, audio, 3D models, source assets, and generated derivatives. The architecture that scaled — object storage, the model Amazon S3 made ubiquitous from 2006 — gives each binary an address and an efficient delivery path, while the database keeps the metadata that makes the asset meaningful: owner, project, type, provenance, moderation state, generation parameters. The separation clarifies permissions, since a public portfolio image and a private source file can share a storage system but not an access policy. AI expands the pipeline into lineage: a user uploads an image, a model transforms it, an agent produces derivatives, and the application must preserve the relationship between original and outputs — the same provenance problem the C2PA content-credentials standard (coalition formed 2021) addresses at the media layer. The durable principle: treat media as first-class data with lifecycle, ownership, and provenance, never as anonymous blobs — and know what you would still know about the file if the filename disappeared.

Builder question For every stored asset, what metadata and access rule would you need if the filename disappeared?

Treat a model call as a typed capability with validated input and output, not a free-form prompt hidden in application code.

Prereqs  TypeScript for AI-Native Builders · Server/Client Boundaries & Routing

String in, string out is the easiest model integration and the hardest to build on, because downstream code must scrape structure out of prose. The durable pattern treats a model call as a typed capability: the application supplies input, the model performs a bounded transformation or judgment, and the result is validated against an explicit schema before anything else touches it — the approach current toolkits like Vercel's AI SDK implement as schema-constrained structured output. The schema guarantees shape, not truth; it makes generation inspectable by the rest of the program while everyone remembers the contents are probabilistic. The deeper shift is from prompt engineering to interface design: name capabilities for the job — classifySubmission, proposeLayout, extractEntities, critiqueComposition — and keep model choice and prompt text hidden behind the boundary, so provider and wording can change without rewriting the product. Evals then measure the capability against its contract, independent of whichever prompt or model currently implements it.

Builder question What stable input/output contract could represent this model capability even if you replaced the prompt or provider tomorrow?

Design interfaces around partial results, tool events, and evolving state rather than one final block of text.

Prereqs  Models as Typed Capabilities · HTTP, JSON, APIs & Streaming · Components, State & Events

Human-factors research has held steady since Robert Miller's 1968 paper on response times, and Jakob Nielsen's 1993 formulation made it canon: at a tenth of a second an interface feels instantaneous, at one second the flow of thought survives, and by ten seconds attention is gone. Model latency lives in exactly the danger zone — seconds of generation — but unlike a database query, a model produces useful partial output the whole way, and streaming turns the wait into an interaction surface. The important idea is progressive state, not a chat window: text appearing incrementally, structured data arriving in parts, tool and agent events updating a board, a timeline, a composition before the task completes. The interface should distinguish provisional output from committed state and keep cancellation and correction reachable mid-stream. The browser primitive underneath is the WHATWG Streams API, with typed model and UI streams layered above it; learn both levels — what actually crosses the network, and how those events become rendered state.

Builder question What useful state could your interface reveal before the model or agent reaches its final answer?

A tool turns model intent into a bounded, typed action over real application capabilities.

Prereqs  Models as Typed Capabilities · Identity, Sessions & Authorization

A language model only generates tokens; a tool is the boundary where the surrounding application converts a model's stated intent into a real, validated action. The pattern went mainstream when OpenAI shipped function calling in June 2023 — describe a function with a JSON Schema, let the model propose arguments, then let ordinary code validate and execute — and it now underlies every agent framework in production. The boundary is the point: the model does not become the database or the payment system; it requests access to capabilities you defined, described, and scoped. Tool design is therefore interface design for a probabilistic caller. Descriptions matter because the model chooses tools by reading them; schemas matter because they constrain inputs; permissions matter because a well-formed call can still be an unauthorized act. Saltzer and Schroeder's least privilege applies verbatim: `searchWorks` over `runAnySQL`, `createDraftInvoice` as a different tool from `sendInvoice` — deterministic boundaries around side effects, with the model choosing among them rather than reaching past them.

Builder question Can this tool be made narrower, more descriptive, or less privileged without preventing the agent from completing its job?

Model → choose action → call tool → observe result → update context → continue or stop.

Prereqs  Tool Calling: Giving Models Capabilities

Strip the mystique and an agent is a loop. The runtime sends input and context to a model; the model returns either a final answer or a request to use tools; the runtime executes the permitted calls, appends the results, and asks again — until the model finishes, a stopping rule fires, or a safety limit trips. The shape was formalized in the ReAct paper (Yao et al., 2022), which interleaved reasoning traces with actions, and Anthropic's "Building Effective Agents" (December 2024) distilled the production consensus: simple, composable loops beat elaborate frameworks. The harness matters as much as the model — it caps turns, validates tool calls, records traces, applies approval rules, and decides what context flows forward; a bare while(true) around an LLM is not an architecture, it is an unbounded failure mode. Build one minimal loop by hand before adopting a framework's: once you can see the state transition after every step, cost, latency, runaway loops, and error recovery all become things you can reason about precisely.

Builder question What are the explicit stopping conditions that prevent this agent from continuing forever or taking unnecessary actions?

Separate what the model sees now from what the application knows, stores, retrieves, and may remember later.

Prereqs  The Agent Loop · Data Modeling, Migrations & Transactions

"Memory" is an overloaded word in AI systems, and the architecture only becomes designable once it is split apart: the model's context window holds what is visible to the current generation; application state holds what the code knows during a run; persistent storage outlives the run; retrieval selects old information back into visibility; summarization compresses a history that no longer fits. These are different mechanisms with different failure modes. The practical distinction current agent SDKs draw — local context the tools can use versus model-visible context the LLM reasons over — matters for both cost and safety: confuse the two and you either waste tokens or leak information the model never needed. Memory is also governed data, not exhaust. What must persist, for how long, owned by whom, inspectable and deletable by the user? A reliable agent does not append its entire history forever; AI-native architecture treats context as a scarce working surface and persistence as application data with rules.

Builder question Which information belongs in model context, which belongs only in application state, and which deserves durable storage?

Retrieve the right evidence into context instead of expecting the model to remember or ingest everything.

Prereqs  Context, State & Memory · Relational Data & SQL

An application knows more than any model request should carry, so retrieval is a selection problem: given the task, find the few pieces of information most likely to help. The generation side was formalized as retrieval-augmented generation by Patrick Lewis and colleagues (2020); the semantic side rests on embeddings — the dense vector representations that entered mainstream practice with word2vec (Mikolov et al., 2013) — which place related content near each other so meaning can be searched by distance. But retrieval methods are complementary, not ideological: exact identifiers, relational queries, full-text search, and vector similarity each win on different information needs, and the pgvector extension makes the point concretely by putting embeddings inside PostgreSQL, where ownership and metadata stay queryable with SQL and results can be filtered before entering context. Resist the cargo-cult reflex of standing up a vector database for every feature — and evaluate retrieval separately from generation, because a model cannot faithfully use evidence it never received.

Builder question What retrieval method best matches this information need: exact lookup, relational query, keyword search, vector similarity, or a combination?

Use predefined steps when the path is known; spend agentic autonomy only where choosing the next step creates value.

Prereqs  The Agent Loop · Tool Calling: Giving Models Capabilities

Not every sequence containing a model call should be an agent. Anthropic's "Building Effective Agents" (December 2024) drew the line that stuck: workflows orchestrate models and tools through predefined code paths, while agents direct their own process, choosing which tools to use and how many steps to take. Autonomy is a cost — more model calls, more variance, harder testing, new security surface — so the design rule is conservative: encode known structure in ordinary code, and spend model judgment only on decisions that cannot be specified economically in advance. A workflow can still contain models, branching, retries, and parallelism; an agent is earned when choosing the next step is itself the value. The boundary also moves: a task that needs an agent today becomes a deterministic workflow tomorrow, once its successful trajectories are understood — and building both around explicit tools, schemas, and evals is what keeps that promotion cheap. The goal is never maximum autonomy; it is the simplest control structure that reliably does the job.

Builder question Does this task require judgment about the next step, or only execution of steps the application already knows?

Autonomy is a permission gradient: read, propose, draft, modify, publish, spend, delete — each deserves a different threshold.

Prereqs  Workflows vs. Agents · Identity, Sessions & Authorization

Human-in-the-loop is not an "Are you sure?" dialog bolted on at the end; it is the deliberate placement of approval boundaries before consequential side effects. The framing has half a century of history — Thomas Sheridan and William Verplank's 1978 taxonomy described automation as a spectrum of levels between full manual control and full autonomy, not a switch — and agentic software has rediscovered it as a permission gradient: reading public data, proposing a draft, modifying a record, publishing, spending, and deleting each deserve a different threshold. Current SDKs make the pattern concrete with tool-approval policies that pause a run, preserve its state, and resume on the human's decision — which is the important architectural idea, independent of any vendor: the decision to act must be separable from the act. Classify tools by consequence, reversibility, scope, and detectability; let the low-risk, reversible ones run free; show proposed arguments before the irreversible ones execute. And authorization still applies after approval — a user cannot approve power they do not possess.

Builder question At which exact action does the cost of a mistaken autonomous decision become greater than the cost of asking for approval?

Long-running agent work must survive request timeouts, retries, restarts, and moments when no browser is connected.

Prereqs  Human Approval & Degrees of Autonomy · Context, State & Memory

An HTTP request is a poor home for work that takes minutes, waits for a human, retries after failure, or continues after the browser closes. Durable execution separates accepting work from completing it: record a task, return an identifier, and let a worker proceed while persistent state tracks progress — queues supply buffering and retry semantics, and checkpointed workflows resume after interruption instead of restarting. The pattern is now protocol-level: the Model Context Protocol's 2026-07-28 revision moved long-running work into a Tasks extension with durable task handles and polling semantics, and Cloudflare's Agents runtime documents queues, schedules, state, and recovery as first-class primitives — evidence from opposite ends of the stack, as of 2026, that the industry has converged on the same shape. The conceptual payoff: an agent becomes a durable process with a lifecycle, not a long response. Model the statuses explicitly — queued, running, waiting-for-approval, failed, cancelled, completed — and the UI becomes a view onto persistent task state, which is exactly what it should be.

Builder question If the server process vanished halfway through this job, what persisted state would let another process continue safely?

Create another agent only when separate context, expertise, authority, or lifecycle earns the added coordination cost.

Prereqs  The Agent Loop · Workflows vs. Agents · Durable Tasks, Queues & Background Agents

Named specialists — researcher, critic, coder, manager — feel intuitive, which is why multi-agent systems are chronically overbuilt. Every additional agent is another context that can diverge, another hop of latency and cost, another evaluation problem; Cognition's "Don't Build Multi-Agents" (2025) argued from production experience that fragile hand-offs sink most such architectures, and Anthropic's account of its multi-agent research system (2025) reported the bill even when it works — around fifteen times the tokens of an ordinary chat interaction, against roughly four for a single agent, justified only because research parallelizes cleanly. So the default is one well-equipped agent plus deterministic tools, and a second agent is earned by isolation with architectural value: different instructions or model, a narrower tool set, separate memory, different permissions, an independently durable lifecycle. Compare three decompositions — one agent with many tools, a workflow containing several model calls, multiple collaborating agents — and choose whichever yields the clearest contracts and the easiest verification. Composition should follow responsibility and authority, not anthropomorphic storytelling.

Builder question What architectural boundary does this second agent enforce that a function, workflow step, or ordinary tool would not?

Expose application capabilities through a standard agent-facing interface instead of rebuilding proprietary connectors for every host.

Prereqs  Tool Calling: Giving Models Capabilities · Identity, Sessions & Authorization

Anthropic introduced the Model Context Protocol in November 2024 — "a USB-C port for AI applications," as its documentation puts it: one standard interface through which agents discover and use tools, resources, and context, replacing a combinatorial explosion of proprietary connectors. For web developers the significant shift is that a product now has two first-class surfaces: the human one rendered in a browser, and an agent-facing one described in machine-readable capabilities. The protocol has matured into web infrastructure — the 2026-07-28 revision of the specification made the core stateless and moved long-running work into extensions such as Tasks, with authorization aligned to modern OAuth practice — and, as of 2026, the major TypeScript agent toolkits consume MCP servers as ordinary tool sources. Building a small MCP server over capabilities you already shipped is a forcing function for good API design: names, descriptions, schemas, permissions, and error behavior that make sense with no visual UI in sight. The architectural principle underneath: never make the model scrape your interface when the application can expose the capability directly.

Builder question If an external agent could not see your UI, how would it discover what your application can do and invoke those capabilities safely?

MCP connects an agent to capabilities; A2A gives independently operated agents a protocol for discovering and collaborating with one another.

Prereqs  MCP: Make Your Application Usable by Agents · Multi-Agent Composition Without the Hype

Tool calling describes an agent using a capability; it does not describe two independently operated agents finding each other and collaborating on work that outlives a single request. That interoperability layer is what Google introduced the Agent2Agent protocol for in April 2025 — donated to the Linux Foundation that June, and reaching a 1.0 specification in 2026. Its Agent Card is a machine-readable declaration of identity, skills, endpoints, and authentication requirements, enabling discovery; its tasks are stateful units of work with their own lifecycle, making collaboration explicit rather than disguised as a function call. Students should learn A2A conceptually and build only a small demonstration — the layer is young and will keep moving — because the durable lesson is the distinction itself: MCP exposes capabilities to an agent; A2A addresses peers, autonomous services that manage their own task state. Architecture improves when those roles are named. Ask of every remote system: is this a tool I invoke, or a peer I negotiate with?

Builder question Is the remote system best modeled as a tool you invoke or as an autonomous peer with its own identity, skills, and task lifecycle?

Treat model output, retrieved content, tool arguments, and agent instructions as untrusted input crossing privilege boundaries.

Prereqs  Human Approval & Degrees of Autonomy · MCP: Make Your Application Usable by Agents

Everything classical still applies — validate input, protect sessions, isolate secrets, authorize every privileged operation — and then agentic systems add a genuinely new problem, the one Simon Willison named prompt injection in September 2022: natural-language content can steer the component that decides which tools to invoke, and the model cannot reliably distinguish data-to-summarize from instructions-to-obey. Injection arrives indirectly too — through a webpage, a document, a database record the agent retrieves — so security cannot rest on prompting. Willison's "lethal trifecta" (2025) states the design rule compactly: an agent combining access to private data, exposure to untrusted content, and the ability to communicate externally is exfiltration waiting to happen — break at least one leg. OWASP now maintains both a GenAI/LLM Top 10 and, for 2026, an Agentic Applications Top 10, institutionalizing the point that autonomous action creates system-level risk beyond output quality. Threat-model the whole graph — user, model, retrieved content, tools, external systems — and ask not "will the model behave?" but "what is the maximum damage if it does not?"

Builder question If the agent followed a malicious instruction hidden inside otherwise legitimate data, what capabilities could that instruction reach?

Test deterministic code, evaluate probabilistic behavior, and trace the trajectory that connected inputs to actions and outcomes.

Prereqs  Verification-Driven Development · The Agent Loop · Security for Agentic Web Applications

An AI-native application carries two kinds of uncertainty, and each needs its own instrument. Deterministic code still breaks deterministically — routes fail, queries return wrong rows — and belongs in conventional tests, Playwright's user-visible-behavior discipline included. Model and agent behavior is probabilistic — outputs vary, tool choices change, a trajectory may succeed by a different path — and needs evals: representative cases with defined acceptable outcomes, run repeatedly, scored honestly. Tracing connects the layers: OpenTelemetry — the CNCF project formed in 2019 from the merger of OpenTracing and OpenCensus — models a request's journey as spans, and an agent trace extends it through model calls, tool invocations, approvals, and retries, so a failure can be reconstructed rather than guessed from the final answer. The working discipline is regression: capture every real failure as a future test or eval case, keep held-out examples the development loop cannot overfit, and re-run the suite when a prompt, model, or tool changes. In this environment the spec is executable — "good" is whatever your suite can repeatedly distinguish from "bad."

Builder question What failure from a real user would you want permanently converted into a test, eval, or trace assertion so it never becomes anecdotal again?

A production AI system is a governed service: deployable, observable, rate-limited, recoverable, and economically measurable.

Prereqs  Evals, Tests, Traces & Regression · Durable Tasks, Queues & Background Agents

A prototype proves a path can work once; production asks whether it keeps working under real users, failures, upgrades, and cost. The baseline is the discipline Google's Site Reliability Engineering (2016) codified — reproducible builds, protected secrets, staged environments, health signals, rollback paths, and error budgets that make reliability a number rather than a mood. AI adds operational variables ordinary web apps never had: model latency, token cost, provider rate limits, tool-call fan-out, background-agent duration, and quality drift when a provider silently updates a model. Measure them per successful user outcome, not per request — an agent that retries five times looks cheap per call and expensive per completed job. OpenTelemetry gives traces, metrics, and logs a vendor-neutral shape, and the capstone exercise is operational: deploy the full application, then break it on purpose — fail a tool, exceed a limit, reject an approval — and read the trace. The final literacy of this track is not building the system but understanding it while it runs.

Builder question What signals would tell you that your deployed system is becoming slower, less reliable, less safe, or more expensive before users report it?