# ij8 — Curriculum Roadmap

Short essays on the theory, aesthetics, references, and inspiration behind every tutorial.


---

## Part 01 · Creative Coding — the existing 50 — Foundations

The first rung: the canvas as a coordinate space, and the smallest vocabulary — position, colour, variable, condition, loop — from which every later sketch is built. p5.js throughout.

### 1. The Coordinate System  (p5.js; Beginner)

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.

### 2. Color  (p5.js; Beginner)

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

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.

### 3. Variables  (p5.js; Beginner)

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

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.

### 4. Conditionals  (p5.js; Beginner)

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

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.

### 5. Loops  (p5.js; Beginner)

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

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.

### 6. Nested Loops & Grids  (p5.js; Beginner)

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

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.

### 7. Mouse Input & Events  (p5.js; Beginner)

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

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.

### 8. Animation & the Frame Loop  (p5.js; Beginner)

Smooth motion from a small change every frame.

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.

### 9. Functions & Modularity  (p5.js; Beginner)

Name a behaviour once, reuse it everywhere.

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.

### 10. Transformations & the Matrix Stack  (p5.js; Intermediate)

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

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.

### 11. Trigonometry with Sin & Cos  (p5.js; Intermediate)

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

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.

### 12. Arrays  (p5.js; Beginner)

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

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.

### 13. Images & Pixels as Arrays  (p5.js; Intermediate)

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

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.

### 14. Typography & Text Systems  (p5.js; Intermediate)

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

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.


---

## Part 01 · Creative Coding — the existing 50 — Objects, Data Structures & Algorithms

Where a sketch gains real nouns and verbs: classes, collections, and the classic structures and algorithms, each made visible as motion rather than abstraction.

### 15. Objects & Classes  (p5.js; Intermediate)

Bundle data and behaviour into a reusable entity.

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.

### 16. Arrays of Objects  (p5.js; Intermediate)

Manage many independent entities with one loop.

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, introduced by William Reeves 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.

### 17. OOP Design & Responsibility  (p5.js; Intermediate)

Give each class one clear job.

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.

### 18. Stacks & Queues  (p5.js; Intermediate)

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

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.

### 19. Linked Lists  (p5.js; Intermediate)

A sequence built from nodes that point to each other.

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.

### 20. Trees & Hierarchies  (p5.js; Intermediate)

Data that branches from a root into parents and children.

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.

### 21. Hash Maps & Lookup  (p5.js; Intermediate)

Turn a key into a bucket for instant lookup.

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.

### 22. Selection Sort Visualized  (p5.js; Intermediate)

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

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.

### 23. Merge Sort & Divide-and-Conquer  (p5.js; Advanced)

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

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.

### 24. Complexity Intuition  (p5.js; Intermediate)

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

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.


---

## Part 01 · Creative Coding — the existing 50 — Physics, Motion & Emergence

The Nature of Code core: vectors and forces give weight, and simple local rules — automata, recursion, noise, evolution — give rise to lifelike, self-organising form.

### 25. Vectors: Magnitude & Direction  (p5.js; Intermediate)

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

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.

### 26. Forces & Acceleration  (p5.js; Intermediate)

Force → acceleration → velocity → position — believable motion.

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.

### 27. Oscillation  (p5.js; Intermediate)

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.

### 28. Particle Systems  (p5.js; Intermediate)

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

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 introduced the technique in 1983 to render the Genesis effect for "Star Trek II," 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.

### 29. Autonomous Agents & Steering  (p5.js; Intermediate)

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

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.

### 30. Springs & Constraints  (p5.js; Intermediate)

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

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.

### 31. 1D Cellular Automata  (p5.js; Intermediate)

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

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.

### 32. 2D Cellular Automata / Game of Life  (p5.js; Intermediate)

Local rules on a grid that produce lifelike emergence.

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.

### 33. Recursive Fractal Tree  (p5.js; Intermediate)

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

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.

### 34. L-Systems & Grammar Drawing  (p5.js; Intermediate)

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

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.

### 35. Perlin Noise Fields  (p5.js; Intermediate)

Smooth randomness — the secret to organic motion and texture.

Perlin noise is randomness with continuity—values that vary unpredictably yet smoothly, so that neighbors stay close and no harsh jumps appear. Ken Perlin devised it in the early 1980s while working on "Tron," needing textures that looked natural rather than mechanically regular, and the technique later earned him an Academy Award. 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.

### 36. Genetic Algorithms & Evolution  (p5.js; Advanced)

Evolve solutions by fitness, selection, and mutation.

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.

### 37. Perceptron as Line Classifier  (p5.js; Advanced)

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

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.

### 38. Tiny Neural Network  (p5.js; Advanced)

Perceptrons stacked in layers.

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.


---

## Part 01 · Creative Coding — the existing 50 — 3D, Shaders & AI Intuition

The advanced end of the intro corpus drops to three.js and GLSL where complexity warrants, then turns to the conceptual machinery of generative AI — Markov chains, embeddings, diffusion, latent space.

### 39. 3D Coordinate Space & Meshes  (three.js; Intermediate)

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

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.

### 40. Lighting & Materials in 3D  (three.js; Intermediate)

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

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.

### 41. Instancing Many Objects  (three.js; Intermediate)

Thousands of copies of one geometry in a single call.

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 formalized in 1983 to render fire and grass for Star Trek II, 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.

### 42. Fragment Shaders & UV Space  (GLSL; Intermediate)

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

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.

### 43. Distance Fields for Shapes  (GLSL; Advanced)

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

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.

### 44. Markov Text Systems  (p5.js; Intermediate)

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

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.

### 45. Embeddings & Vector Similarity  (p5.js; Advanced)

Turn meaning into position — distance measures relatedness.

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.

### 46. Semantic Search Mini-Index  (p5.js; Advanced)

Search by meaning, not keywords — rank by closeness.

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.

### 47. Noise → Structure: Diffusion Intuition  (p5.js; Advanced)

How image generators work in spirit — denoise toward structure.

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.

### 48. Latent Space as Coordinate Space  (p5.js; Advanced)

A smooth map of outputs where nearby points look alike.

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.

### 49. Prompt as a Parameter  (p5.js; Advanced)

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

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.

### 50. Iterate with the AI Tutor  (p5.js; Advanced)

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

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.


---

## Part 02 · Digital & Generative Imaging — proposed — Imaging — beginner / high school

A net-new media track taught on the Studio surfaces rather than in code: digital-image fundamentals, the generative core, the editing toolkit, and image literacy. The arc adapts — Play means steering the live model; Make means generating and editing your own.

### 1. What Is a Digital Image?  (ij8 Studio, generation presets; Beginner)

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.

### 2. Color & Light  (ij8 Studio, prompt colour/mood; Beginner)

RGB channels, hex, basic colour theory and mood.

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.

### 3. Layers, Alpha & Masks  (ij8 Studio, mask painter · remove-bg; Beginner)

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

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.

### 4. From Noise to Picture  (ij8 Studio, chat text-to-image; Beginner)

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

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.

### 5. The Anatomy of a Prompt  (ij8 Studio, chat · prompt-enhance; Beginner)

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

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.

### 6. Controlled Iteration  (ij8 Studio, seed · variations; Beginner)

Seeds for reproducibility; change one variable at a time.

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.

### 7. Many Models, Many Styles  (ij8 Studio, model pool; Beginner)

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

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.

### 8. Conversational Editing  (ij8 Studio, Gemini multi-turn edit; Beginner)

Refine an image through chained natural-language instructions.

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.

### 9. Repair, Expand & Remix  (ij8 Studio, inpaint · outpaint · style · upscale; Beginner)

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

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.

### 10. Whose Image Is It?  (ij8 Studio, literacy capstone; Beginner)

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.


---

## Part 03 · Generative AI Video — proposed — Video — beginner → intermediate

Directing motion, time, and the cut with the Studio video models (Wan 2.2 local, Hailuo cloud) plus VACE masked-region animation and video→audio foley. Camera grammar and the named failure modes are treated as craft.

### 1. Animate Your First Still  (ij8 Studio, image-to-video; Beginner)

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.

### 2. The Motion Prompt Formula  (ij8 Studio, text-to-video (Wan); Beginner)

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

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.

### 3. Directing the Lens  (ij8 Studio, image/text-to-video; Beginner)

Pair one camera move with one subject action.

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.

### 4. Cinemagraph: Animate One Region  (ij8 Studio, VACE masked region; Beginner)

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

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.

### 5. Keyframes & Transitions  (ij8 Studio, start/end frame; Intermediate)

Anchor opening and closing composition for clean morphs.

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.

### 6. Local vs. Cloud  (ij8 Studio, Wan (local) + Hailuo (API); Intermediate)

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

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.

### 7. Add Sound: Foley From Video  (ij8 Studio, HunyuanVideo-Foley; Intermediate)

Generate synced sound effects from a silent clip.

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.

### 8. Seamless Loops for Social  (ij8 Studio, video + share-export; Intermediate)

Build a clean looping clip and export it correctly.

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.

### 9. Consistency & the Mini Multi-Shot Scene  (ij8 Studio, I2V + last-frame chaining; Intermediate)

Chain shots and references to hold a character across cuts.

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.

### 10. Failure Modes & How to Tame Them  (ij8 Studio, any video model; Intermediate)

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

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.


---

## Part 04 · Generative AI 3D — proposed — 3D — beginner → intermediate

From a flat image to a rigged, animated, exportable object, on the Studio 3D surfaces (HunYuan3D image-to-mesh, the viewer, UniRig + Mixamo retargeting). Capture vs. generate is taught as a deliberate choice.

### 1. From Flat Art to 3D  (ij8 Studio, image-to-3D (HunYuan3D); Beginner)

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).

### 2. The Perfect Input Image for 3D  (ij8 Studio, generation → image-to-3D; Beginner)

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

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.

### 3. Shape, Then Texture  (ij8 Studio, dual-pass pipeline; Beginner)

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

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.

### 4. Product Turntable  (ij8 Studio, viewer + rotation-APNG; Beginner)

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

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.

### 5. PBR Textures & Topology Basics  (ij8 Studio, textured output + viewer; Intermediate)

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

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.

### 6. Auto-Rig a Character  (ij8 Studio, UniRig + morphology classifier; Intermediate)

One-click rigging — including non-biped creatures.

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.

### 7. Bring It to Life: Walk-Cycle Retargeting  (ij8 Studio, Mixamo FBX (Blender); Intermediate)

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

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.

### 8. 3D-Printable Creature  (ij8 Studio, image-to-3D + export; Intermediate)

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

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.

### 9. Capture vs. Generate  (ij8 Studio, concept; Intermediate)

Photogrammetry, NeRF and Gaussian splatting vs generative mesh.

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.

### 10. Full Pipeline Capstone  (ij8 Studio, whole pipeline; Intermediate)

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

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Advanced Generative Art

The long-form / Art Blocks / fxhash idiom: deterministic seeding, trait distribution, palette systems, tilings, flow fields, growth, and reaction-diffusion. p5.js, dropping to GLSL where the field must run on the GPU.

### 1. Seeded Determinism & a Hand-Rolled PRNG  (p5.js; Medium)

A seedable generator so one hash reproduces one exact piece.

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.

### 2. Hash → Traits → Feature Distribution  (p5.js; Medium)

Rarity-weighted reported traits derived from a token hash.

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.

### 3. fx(params): Parameterized Longform  (p5.js; Hard)

Typed, collector-settable params that stay deterministic.

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.

### 4. Palette Systems  (p5.js; Medium)

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

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.

### 5. Truchet & Wang Tiling  (p5.js; Medium)

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

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.

### 6. Advanced Flow Fields  (p5.js; Hard)

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

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.

### 7. Differential Growth  (p5.js; Hard)

Repel/attract node chains that subdivide and grow organically.

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.

### 8. Reaction-Diffusion (Gray-Scott)  (GLSL; Hard)

Feed/kill pattern formation — Turing patterns.

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.

### 9. Voronoi/Delaunay & Weighted Stippling  (p5.js; Hard)

Space partitioning and image-driven stippling.

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.

### 10. Dithering & Halftone  (p5.js; Medium)

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

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Advanced Shaders & GPU

The GPU-art ladder, from the fragment toolkit and noise to raymarched SDF scenes, feedback buffers, GPGPU particles, and the WebGPU + TSL frontier. GLSL, crossing into three.js for compute.

### 11. The Fragment Toolkit Beyond UV  (GLSL; Medium)

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

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.

### 12. Noise in Shaders → FBM  (GLSL; Medium)

Hash/gradient noise and fractal Brownian motion layering.

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.

### 13. Domain Warping  (GLSL; Hard)

Feed FBM into FBM for organic cloud/marble fields.

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.

### 14. Raymarching SDF Scenes  (GLSL; Hard)

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

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 the method 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.

### 15. SDF Composition, Repetition & Fractals  (GLSL; Insane)

smin, infinite domain repetition, Mandelbulb/Apollonian.

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.

### 16. Feedback / Ping-Pong Buffers  (GLSL; Hard)

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

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.

### 17. GPGPU Particles  (GLSL; Hard)

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

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.

### 18. WebGPU & TSL: Compute Shaders 101  (three.js; Insane)

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

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Advanced 3D

three.js beyond primitives: custom geometry, instancing at scale, vertex deformation, skinning, the post-processing pipeline, isosurfaces, and browser Gaussian splatting.

### 19. Custom BufferGeometry From Scratch  (three.js; Medium)

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

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.

### 20. GPU Instancing at Scale  (three.js; Hard)

InstancedMesh + per-instance attributes for 100k+ 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.

### 21. Procedural Vertex Deformation  (three.js; Hard)

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

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.

### 22. Morph Targets & Skinning  (three.js; Medium)

Blendshapes and skeletal deformation; animate procedurally.

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.

### 23. Post-Processing Pipeline  (three.js; Medium)

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

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.

### 24. Marching Cubes / Metaballs  (three.js; Hard)

Isosurface meshing from a scalar field for blobby geometry.

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.

### 25. Gaussian Splatting in the Browser  (three.js; Hard)

Load and render radiance fields; composite splats with meshes.

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Simulation & Complexity

Physically-based motion and continuous systems: Verlet constraints, cloth and soft bodies, spatial-hash boids, Physarum, Lenia, stable fluids, and rigid-body physics.

### 26. Verlet Integration & Constraints  (p5.js; Medium)

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

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.

### 27. Spring-Mass Meshes & Cloth  (p5.js; Hard)

Structural/shear/bend springs; tearing.

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.

### 28. Soft Bodies (Pressure Model)  (p5.js; Hard)

A closed Verlet shell with internal pressure for jelly physics.

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.

### 29. Advanced Boids with Spatial Hashing  (p5.js; Hard)

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

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.

### 30. Physarum / Slime-Mold  (GLSL; Hard)

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

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.

### 31. Lenia: Continuous Cellular Automata  (GLSL; Insane)

Smooth kernels and growth functions; discovering gliders.

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.

### 32. Stable Fluids (Jos Stam)  (GLSL; Insane)

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

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.

### 33. Physics with Rapier  (three.js; Hard)

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

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Audio-Visual & Generative Music

Tone.js as an instrument: synthesis and sequencing, signal routing, Euclidean rhythms, FFT-driven audio-reactive visuals, and probabilistic composition.

### 34. Synthesis Fundamentals  (Tone.js; Medium)

Oscillators, ADSR envelopes, filters, FM/AM.

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, 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.

### 35. Sequencing with Transport  (Tone.js; Medium)

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

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.

### 36. Effects & Signal Routing  (Tone.js; Medium)

Reverb/delay/distortion, buses, sidechaining.

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.

### 37. Euclidean Rhythms  (Tone.js; Medium)

The Bjorklund algorithm producing evenly distributed polyrhythms.

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.

### 38. FFT → Audio-Reactive Visuals  (Tone.js; Medium)

Fourier analysis bins driving a p5 sketch.

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.

### 39. Generative Composition  (Tone.js; Hard)

Probabilistic/Markov note selection; self-evolving ambient.

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Creative ML & AI-in-the-Loop

Running models in the browser as a live creative material: client-side inference, body and depth as input, real-time style transfer, latent walks, CLIP similarity, and designing systems with an AI partner.

### 40. Run a Model Client-Side  (cross-framework; Medium)

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

Inference once meant a server round-trip; transformers.js collapses it into the page itself. Maintained by Joshua "Xenova" Lummis 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.

### 41. MediaPipe Hand/Pose as Input  (p5.js; Medium)

Body and hand landmarks as a live controller.

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.

### 42. Real-Time Style Transfer  (p5.js; Medium)

Fast arbitrary neural style transfer on a webcam feed.

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.

### 43. Depth Estimation → Geometry  (three.js; Hard)

Monocular depth turning a webcam image into 3D displacement.

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.

### 44. Latent Walks & Interpolation  (cross-framework; Hard)

Traversing and interpolating latent space as animation.

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 spherical sampling ("Sampling Generative Networks", 2016) named the technique—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.

### 45. CLIP-Style Text↔Image Similarity  (cross-framework; Hard)

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

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.

### 46. Designing a Generative System With an AI Partner  (cross-framework; Hard)

Build, evaluate, and steer a generative system collaboratively.

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.


---

## Part 05 · Advanced Creative Coding — proposed (50) — Craft & Production

The professional finish: perceptual colour, pen-plotter and SVG output, deterministic high-resolution export for print, and performance profiling.

### 47. Perceptual Color in Code (OKLab/OKLCH)  (p5.js; Medium)

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

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.

### 48. Pen-Plotter Aesthetics & SVG Export  (p5.js; Hard)

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

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.

### 49. Deterministic High-Res / Print Export  (p5.js; Hard)

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

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.

### 50. Performance Optimization & Profiling  (cross-framework; Hard)

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

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.