Bible — Creative Coding: Code as Authorial Language

Public reference document. Complete history, technical foundations, creative mathematics, application domains, 2026 tools, ethics and AI. Every fact is sourced.

Chapter 1 — Definition & Posture

1.1 Creative Coding vs. Classical Development

Creative coding designates a practice where writing code is a means of expression rather than a tool for solving functional problems. The goal is not to deliver operational software — it is to produce an aesthetic, poetic or conceptual experience.

1.2 Code as Material

In creative coding, code is a material in the same way as paint or bronze. It has its own properties: the loop (repetition with variation), the random (controlled unpredictability), time (animation, event), response (interaction, data). Understanding these properties means mastering your material.

1.3 Authorial Posture

The creative coder is simultaneously author (intention, aesthetic choices), artist (sensitivity to form) and craftsperson (technical skill). The distinction from the "developer who makes beautiful things" lies in intention: the author builds a point of view, not a feature.

"To misquote Klee, the computer is like a hammer — it amplifies the artist's intentions, for better or worse." — Casey Reas

Chapter 2 — Complete History (Chronological, Sourced)

2.1 The Algorithmic Precursors (1960–1968)

1959–1960 — Vera Molnár, combinatorial art before the computer The Franco-Hungarian painter Vera Molnár began in 1959 creating works from systematic combinatorial rules — grids, transformations, variations on a base form — entirely by hand, before having access to a computer. She co-founded the Groupe de Recherche d'Art Visuel (GRAV) in 1960 in Paris. In 1968, she gained access to an IBM computer at the University of Paris and produced her first machine-generated algorithmic works. She remained active past 90, a recognized pioneer of generative art.

Source: Wikipedia. Vera Molnár. https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r

1963 — Ivan Sutherland, Sketchpad Ivan Sutherland presented his doctoral thesis Sketchpad: A Man-Machine Graphical Communication System at MIT. It is the first interactive computer graphics program — drawing with a light stylus on a cathode-ray screen. It introduces the concepts of graphical objects, constraints and inheritance. The conceptual foundation of all future graphical interaction.

Sutherland, I. (1963). Sketchpad: A Man-Machine Graphical Communication System. PhD Thesis, MIT.

February 1965 — Georg Nees, first computer art exhibition Georg Nees, an engineer at Siemens, presented at the Design Studies Gallery of the Hochschule für Gestaltung in Stuttgart the first graphic works generated by computer presented in an artistic context. Generally considered the first computer art exhibition.

Source: Wikipedia. Georg Nees. https://en.wikipedia.org/wiki/Georg_Nees

November 1965 — Frieder Nake Mathematician Frieder Nake exhibited at the Galerie Wendelin Niedlich in Stuttgart. His algorithmic works (matrices, lines) are among the first to explore the tension between mathematical rule and visual aesthetics.

Source: Wikipedia. Frieder Nake. https://en.wikipedia.org/wiki/Frieder_Nake

1969–1971 — Manfred Mohr Painter and musician Manfred Mohr produced his first algorithmic drawings in 1969 in Paris, after discovering the potential of computers. In 1971, he exhibited at the Musée d'Art Moderne de la Ville de Paris (ARC) — the first computer art exhibition in a major museum.

Source: Wikipedia. Manfred Mohr. https://en.wikipedia.org/wiki/Manfred_Mohr

2.2 Tools and Democratization (1985–2001)

1985 — Max (Miller Puckette, IRCAM) Miller Puckette developed Max at IRCAM in Paris — a graphical flow-based programming environment for interactive music. Max allows non-computer-scientist musicians to create real-time sound/gesture interactions. In 1997, Cycling '74 published the commercial version Max/MSP (Miller Smith Puckette), adding digital audio processing.

Source: Wikipedia. Max (software). https://en.wikipedia.org/wiki/Max_(software)

1996 — Pure Data (Pd) Miller Puckette created Pure Data (Pd), the open-source and free version of Max. Pd became the reference for sound artists, performers and researchers who could not or did not want to depend on commercial software.

Source: Wikipedia. Pure Data. https://en.wikipedia.org/wiki/Pure_Data

~1998–2000 — vvvv The MESO Digital Interiors team (Joreg et al.) in Frankfurt developed vvvv (Quad V), a visual programming environment for real-time creation of video installations, graphics and interactions. Particularly influential in museum installations and live performance.

Source: Wikipedia. Vvvv. https://en.wikipedia.org/wiki/Vvvv_(software)

2000 — TouchDesigner Greg Hermanovic at Derivative (Toronto) used Houdini 4.1 as a base to build TouchDesigner in 2000 — a node-based visual programming environment oriented toward real-time, interactive installations, video mapping, and VJing. Became the industry reference for audiovisual installations and performances.

Source: Wikipedia. TouchDesigner. https://en.wikipedia.org/wiki/TouchDesigner

2001 — Processing (Casey Reas & Ben Fry) Processing was born in 2001 at the MIT Media Lab (John Maeda's Aesthetics and Computation group), created by Casey Reas and Ben Fry. It is a Java-based language/environment designed to facilitate access to visual code for non-programmers. Its setup() / draw() syntax became the reference model. Processing Foundation created in 2012.

Source: Wikipedia. Processing. https://en.wikipedia.org/wiki/Processing_(programming_language) · https://processing.org

2.3 The Web Era and Radical Democratization (2004–2016)

2004 — openFrameworks Zachary Lieberman (with Theo Watson and Arturo Castro) launched openFrameworks, an open-source C++ toolkit for creative coding, designed for performance and flexibility. Popular for real-time installations, computer vision, and high-performance projects.

Source: https://openframeworks.cc

~2010 — Cinder The Barbarian Group developed Cinder, an open-source C++ toolkit similar to openFrameworks, oriented toward high performance and visual ambition. Adopted by creative design studios.

Source: https://libcinder.org

2013 — p5.js (Lauren Lee McCarthy) Lauren Lee McCarthy created p5.js in 2013, a port of Processing to native JavaScript. The idea: Processing's values (accessibility, sketchbook) in the browser, without installation. p5.js became the most used tool for teaching creative coding in the world. In 2022, leadership passed to Qianqian Ye.

Source: Wikipedia. p5.js. https://en.wikipedia.org/wiki/P5.js · https://p5js.org

2013 — Shadertoy Pol Jeremias and Inigo Quilez launched Shadertoy (live: February 2013), a web platform for writing, sharing and visualizing GLSL shaders directly in the browser. It became the world reference point for the shader community and web demoscene.

Source: Wikipedia. Shadertoy. https://en.wikipedia.org/wiki/Shadertoy · https://www.shadertoy.com

2.4 Contemporary Generative Art and NFTs (2020–2026)

Mid-1980s — The Demoscene The demoscene emerged in the 1980s from the culture of "cracktros" — animated intros attached to pirated software. Groups of programmers (in Scandinavia, Eastern Europe, Germany) began creating size-optimized real-time animations (the challenge: 64 kb, 4 kb, 256 bytes). The demoscene established the standards for real-time graphics programming (shaders, optimization, music synchronization).

Source: Wikipedia. Demoscene. https://en.wikipedia.org/wiki/Demoscene

2020 — Art Blocks (Erick Calderon / Snowfro) Erick "Snowfro" Calderon launched Art Blocks on the Ethereum blockchain in 2020 — a platform where artists deploy algorithmic generation scripts, and each purchase generates a unique work. Chromie Squiggle (Snowfro himself), Ringers (Dmitri Cherniak) and Fidenza (Tyler Hobbs) became emblematic of the movement.

Source: Wikipedia. Generative art (cryptocurrency).

2021 — fxhash (Tezos) fxhash was launched in October/November 2021 on the Tezos blockchain — a more accessible and decentralized alternative to Art Blocks, with lower fees. It accelerated the production of on-chain generative art, particularly outside the Ethereum market.

Source: Wikipedia. Generative art (cryptocurrency).

2021 — Tyler Hobbs, Fidenza Tyler Hobbs published Fidenza on Art Blocks in 2021. Fidenza uses a turbulence flow algorithm to generate 999 works with distinctive organic compositions. It became one of the most recognized and studied generative art works.

Source: https://tylerxhobbs.com

Chapter 3 — Technical Foundations

3.1 The Drawing Loop: setup/draw

Every creative coding program rests on two fundamental functions:

`javascript // p5.js — canonical structure function setup() { createCanvas(800, 600); // runs once background(0); }

function draw() { // runs in a loop (~60 times/sec by default) // here: all drawing, animation, interactions } `

setup(): initialization (canvas size, background, parameters). draw(): rendering loop — each call = one frame.

3.2 Coordinates

The canvas coordinate system is inverted relative to the standard mathematical plane:

• Origin (0, 0) at the top left
• x axis: to the right
• y axis: downward (note: y = 0 at top, y = height at bottom)

3.3 Color

p5.js manages color in RGB (0–255) or HSB (Hue 0–360, Saturation 0–100, Brightness 0–100).

javascript colorMode(HSB, 360, 100, 100, 100); // HSB with alpha fill(45, 80, 95); // warm, saturated hue stroke(0, 0, 0, 50); // semi-transparent black outline

HSB mode is often more intuitive for animating color (cycling through hues in a loop).

3.4 Random vs. Perlin Noise

Raw random (random()): independent, "jumping" values. Ideal for placing unrelated elements.

Perlin noise (noise()): continuous, smooth values. Neighboring values are close. Ideal for simulating the natural (wind, terrain, organic movement).

`javascript // random: each call = independent value let x = random(0, width);

// noise: moving through noise space = continuous variation let t = frameCount 0.01; let x = noise(t) width; // smooth movement let y = noise(t + 100) * height; // offset 100 so y is independent of x `

Perlin, K. (1985). An Image Synthesizer. SIGGRAPH '85 Proceedings, pp. 287–296. https://doi.org/10.1145/325334.325247

3.5 Transformations

Transformations (translate, rotate, scale) apply to everything drawn after, until pop():

javascript push(); // save transformation state translate(cx, cy); // move origin rotate(angle); // rotation in radians scale(1.2); // scale factor //... drawing here... pop(); // restore previous state

3.6 Time & Animation

frameCount: number of frames since start. millis(): milliseconds since start. sin() / cos(): oscillation between -1 and 1 — basis of all cyclic animation.

javascript // Oscillation: y position that rises and falls let y = height/2 + sin(frameCount * 0.05) * 50;

Chapter 4 — Creative Mathematics

4.1 Trigonometry

sin() and cos() allow placing points on a circle, creating oscillations, generating organic curves.

javascript // Place N points on a circle let n = 12; for (let i = 0; i < n; i++) { let angle = (TWO_PI / n) * i; let x = cx + radius * cos(angle); let y = cy + radius * sin(angle); ellipse(x, y, 8, 8); }

4.2 Vector Fields

A vector field associates a direction vector with each point in space. Perlin noise can generate an organic field — each particle follows the local direction of the field.

javascript // Local direction in a noise field let angle = noise(x * 0.003, y * 0.003, frameCount * 0.0008) * TWO_PI * 2; let v = p5.Vector.fromAngle(angle);

4.3 Fractals and Self-Similarity

Fractals exhibit self-similarity at different scales — zooming in reveals the same structure. Examples: Mandelbrot set, Koch snowflake, Barnsley fern.

Recursion in p5.js: javascript function branch(x, y, length, angle, depth) { if (depth === 0) return; let x2 = x + cos(angle) * length; let y2 = y + sin(angle) * length; line(x, y, x2, y2); branch(x2, y2, length * 0.67, angle - 0.4, depth - 1); branch(x2, y2, length * 0.67, angle + 0.4, depth - 1); }

4.4 L-Systems

Introduced by botanist Aristid Lindenmayer in 1968, L-systems are formal rewriting grammars that model plant growth.

Axiom: F Rule: F → F[+F]F[-F]F Iterations: 5

At each iteration, each F is replaced by the rule. After 5 iterations, the resulting string is interpreted as drawing instructions (F = forward, + = turn right, - = turn left, [ = push, ] = pop).

4.5 Cellular Automata

A cellular automaton is a grid of cells whose state evolves according to local rules (neighbors' state). Conway's Game of Life (1970) is the canonical example: 4 simple rules generate patterns of infinite complexity — gliders, oscillators, spaceships.

4.6 Particle Physics

Simulating physical particles requires: position, velocity, acceleration. Each frame: velocity += acceleration; position += velocity; apply friction, bounds, forces.

javascript class Particle { constructor(x, y) { this.pos = createVector(x, y); this.vel = p5.Vector.random2D().mult(2); this.acc = createVector(0, 0.1); // gravity } update() { this.vel.add(this.acc); this.vel.mult(0.98); // friction this.pos.add(this.vel); } }

Chapter 5 — Application Domains

5.1 Generative Art

Generative art uses autonomous systems (algorithms, rules, randomness) to generate works. The artist defines the system, not the work. Each generation produces a variation.

5.2 Data Art

Data art transforms data into visual forms with aesthetic and narrative intent, beyond simple information. The work DATA RUG by Kamel Ghabte is a generative rug where Moroccan open data becomes textile pattern.

5.3 Generative Typography

Animating, deforming, fragmenting text according to algorithmic rules — the letter becomes a moving form. The calligrapher and the algorithm share the same concern for the stroke.

5.4 Patterns and Algorithmic Ornament

Traditional geometries (Moroccan zellige, Amazigh patterns, Islamic tessellations) lend themselves naturally to algorithmic generation — their rules of symmetry and repetition are already code.

→ See Masterclass: Masterclass Zellige

5.5 Audio-Reactive

Audio-reactive coding transforms in real time an audio signal (amplitude, FFT frequencies) into visual parameters. The visuals "dance" with the music.

javascript // p5.js with p5.sound let fft = new p5.FFT(); //... function draw() { let spectrum = fft.analyze(); for (let i = 0; i < spectrum.length; i++) { let h = map(spectrum[i], 0, 255, 0, height); rect(i * 2, height - h, 2, h); } }

5.6 Real Time and Installation

Interactive installations trigger visual/sonic behaviors in response to sensors (presence, gesture, voice). TouchDesigner is the technical reference for large-scale installations.

5.7 GLSL Shaders

Shaders are programs executed directly on the GPU — infinitely faster than the CPU for parallel visual operations. The fragment shader computes the color of each pixel independently and in parallel.

glsl // Minimal GLSL fragment shader void main() { vec2 uv = gl_FragCoord.xy / u_resolution; vec3 color = vec3(uv.x, uv.y, 0.5 + 0.5 * sin(u_time)); gl_FragColor = vec4(color, 1.0); }

5.8 AR/VR Bridge

Creative coding provides the technical foundations for AR and VR experiences: shaders for materials, particle physics for effects, procedural generation for environments.

→ See AR Bible and VR Bible

Chapter 6 — Tools & Ecosystem 2026

6.1 Generalist Environments

6.2 Node-Based Environments (Real Time)

6.3 Shaders and GPU

6.4 Communities & Galleries

Chapter 7 — From Sketch to Exhibited Work

7.1 Performance and Resolution

A p5.js sketch runs at 60 fps on a standard laptop for simple compositions. Beyond ~50,000 objects drawn per frame, optimizations are necessary:

• Use images/textures rather than redrawing each frame
• createGraphics(): off-screen buffer for static parts
• GLSL shaders for parallel visual effects
• WebWorkers for heavy computation outside the UI thread

High-resolution export: javascript // p5.js: save a high-resolution image pixelDensity(3); // 3× screen resolution saveCanvas('composition', 'png');

7.2 Scenography

For an installation or exhibition presentation:

• Format: what screen size? Portrait/landscape? Resolution?
• Interaction: is the work interactive (sensor, mouse, keyboard, mic) or autonomous?
• Loop: duration of one cycle? Automatic reset?
• Robustness: does the work run without intervention for 8h?

7.3 AR/VR Bridge

Creative coding techniques (shaders, particles, procedural generation) integrate directly into AR (three.js + WebXR) and VR (Unity shaders, TouchDesigner live) pipelines.

Chapter 8 — Ethics & AI

8.1 Generative AI and Authorial Posture

Generative AI (Stable Diffusion, MidJourney, GPT, Claude) is now a tool available in the creative pipeline. The question posed to the creative coder is the same as with any other tool: what is the intention? who decides?

AI as a raw generation tool (without intention) ≠ creative coding as an authorial practice. The tool doesn't make the art — the decision of what to do with the output does.

8.2 Rights and Reproduction

A work algorithmically generated from an original program is covered by the author's copyright of the program (in most jurisdictions). A work "generated by AI" alone (without substantial human creative contribution) is in a legal gray area that is rapidly evolving. Consult for each jurisdiction.

8.3 Reproducibility and Seed

A deterministic program with a fixed seed always produces the same work. Publishing the seed with the work is a form of transparency (the buyer can verify uniqueness and reproducibility). This is the Art Blocks model.

javascript // p5.js: fixed seed for reproducibility randomSeed(42); noiseSeed(42);

8.4 Open Source and Community

Creative coding is a profoundly open source movement. p5.js, Processing, openFrameworks, PureData are free and maintained by communities. Contributing — reporting bugs, documenting, translating — is a way to participate in the ecosystem.

Chapter 9 — Glossary (42 terms)

Chapter 9 — Full Bibliography

Primary Sources

• Perlin, K. (1985). An Image Synthesizer. SIGGRAPH '85, pp. 287–296. https://doi.org/10.1145/325334.325247
• Lindenmayer, A. (1968). Mathematical models for cellular interactions in development. Journal of Theoretical Biology, 18(3), 280–315.
• Sutherland, I. (1963). Sketchpad: A Man-Machine Graphical Communication System. PhD Thesis, MIT.

Secondary Sources & Resources

• Wikipedia. Processing (programming language). https://en.wikipedia.org/wiki/Processing_(programming_language)
• Wikipedia. p5.js. https://en.wikipedia.org/wiki/P5.js
• Wikipedia. openFrameworks. https://en.wikipedia.org/wiki/OpenFrameworks
• Wikipedia. TouchDesigner. https://en.wikipedia.org/wiki/TouchDesigner
• Wikipedia. Vera Molnár. https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r
• Wikipedia. Georg Nees. https://en.wikipedia.org/wiki/Georg_Nees
• Wikipedia. Frieder Nake. https://en.wikipedia.org/wiki/Frieder_Nake
• Wikipedia. Manfred Mohr. https://en.wikipedia.org/wiki/Manfred_Mohr
• Wikipedia. Demoscene. https://en.wikipedia.org/wiki/Demoscene
• Wikipedia. Shadertoy. https://en.wikipedia.org/wiki/Shadertoy
• Wikipedia. Max (software). https://en.wikipedia.org/wiki/Max_(software)
• Wikipedia. Pure Data. https://en.wikipedia.org/wiki/Pure_Data

Further Reading

• p5.js documentation: https://p5js.org/reference/
• The Nature of Code (Daniel Shiffman): https://natureofcode.com
• The Coding Train (YouTube): https://www.youtube.com/c/TheCodingTrain
• The Book of Shaders (Patricio Gonzalez Vivo & Jen Lowe): https://thebookofshaders.com
• Generative Design (Hartmann, Hochgesang, Klaas, Lazaros): Processing/p5.js reference book
• Form+Code (Casey Reas & Chandler McWilliams): https://formandcode.com
• OpenProcessing: https://openprocessing.org
• Shadertoy: https://shadertoy.com

Bridge to Training

This bible is a public reference document. To go further:

→ Creative Coding Training — from sketches to exhibited works → Intensive workshop for higher education schools and creative studios (1–3 days) → Book a 30-min call — free