Last time we sat with the quiet engine under this whole series -- daily practice, the sketch-a-day habit, finishing ugly, treating a block as data instead of a verdict. And right at the end I made you a small promise: on the flat grey Tuesdays when your own little sketches feel pointless, it helps enormously to remember that you're not the first. People have been making art with rules, machines, and systems for a very, very long time -- long before p5.js, long before the browser, long before computers as we'd recognise them. So today we go back and walk that chain. This is the episode about art and technology, and where creative coding actually sits in the long story of art.
I'll be honest with you, this is my favourite episode to write, because the history genuinly changed how I feel about my own work. For years I thought I was doing something new and slightly weird -- making pictures with for loops instead of a brush. Then I found out that women and men were feeding punch cards to plotters in the 1960s to make art that looks startlingly like the stuff on my screen today, and that the urge goes back further still, thousands of years. It reframed everything. I'm not an oddity. I'm a link in a chain. Allez, let me show you the chain, because once you see it you can't unsee it.
Here's the first thing to unlearn: "art made from rules" is not a computer thing. It's an ancient human thing. Islamic geometric tiling, Celtic knotwork, the strict counterpoint rules in a Bach fugue, the pattern grammar of a woven textile -- all of them are algorithms, executed by hand centuries before anyone had a CPU. The computer didn't invent rule-based art. It just gave us a faster, tireless executor. I like to make that concrete the way we do everything in this series -- by writing the "machine" as a tiny function:
// rule-based art is ancient. the "machine" was a human hand following a system.
function ruleBasedArt(rules, executor) {
return rules.map((rule) => executor.apply(rule)); // the loom, the monk, the tiler... or you.
}
const islamicTiling = ["reflect", "rotate 90", "repeat across grid"];
// a 14th-century craftsman ran this loop by hand. we just run it faster.
console.log(islamicTiling); // -> the same repetition + symmetry we coded back in episode 145
Look at that executor -- it used to be a person, patiently obeying a system. That's the whole idea. When you wrote the wallpaper-group symmetries back in episode 145, or the tessellations in 144, you were doing exactly what a tiler in the Alhambra was doing, just with different tools. The insight that changes everything: you are not inventing generative art, you are inheriting a five-thousand-year-old practice and running it on new hardware. That thought alone has carried me through a lot of pointless-feeling Tuesdays.
The bridge between craft and computing runs straight through a machine you'd never guess: the loom. In 1804 Joseph Marie Jacquard built a loom controlled by punched cards -- holes in cardboard that told the machine which threads to lift. Change the cards, change the pattern. That's a program. It's the first time a physical machine executed swappable instructions to make an image, and it directly inspired Charles Babbage and Ada Lovelace. Let me model the leap:
// 1804: the Jacquard loom ran on punched cards. swap the cards, swap the pattern.
// this IS a program -- separable instructions driving a machine to make an image.
function jacquardLoom(punchCards) {
return punchCards.map((card) =>
card.holes.map((lifted) => (lifted ? "raise thread" : "leave thread"))
);
}
const card = { holes: [true, false, true, true, false] };
console.log(jacquardLoom([card])); // instructions in, woven image out. sound familiar?
Ada Lovelace saw this loom and understood something nobody else did: if a machine could weave patterns from instructions, it could one day weave anything representable as numbers -- including, she wrote, music. She was imagining generative art in the 1840s, on a machine that was never even finished. So the next time someone tells you code-art is a passing tech fad, you can gently mention that its founding vision is nearly two hundred years old. We didn't start this. We're finishing a very old sentence.
Fast forward to the 1920s and a school in Germany changed how everyone thinks about design: the Bauhaus. Their radical idea was that art and craft and technology belong together, and that good form could come from systematic principles rather than lone genius -- grids, primary colours, geometric reduction, "form follows function". Artists like Moholy-Nagy and Josef Albers treated composition almost like a set of parameters to explore. That's a mindset we run on directly:
// Bauhaus, 1920s: reduce art to systematic parameters. explore the space methodically.
function bauhausComposition(params) {
return {
shapes: params.primitives, // circle, square, triangle -- nothing fancy
palette: params.primaryColours, // red, yellow, blue + black/white
grid: params.alignment, // everything on a system, not by whim
rule: "form follows function",
};
}
const study = bauhausComposition({
primitives: ["circle", "square"],
primaryColours: ["#e63946", "#f1c40f", "#1d3557"],
alignment: "12-column grid",
});
The Bauhaus never touched a computer -- but their attitude is pure creative coding. Albers spent years making his "Homage to the Square" series: the same nested-squares structure, over and over, varying only the colours to study how they interact. That's a parameterised system explored by iteration. That's a for loop in oil paint. Every time you sweep a variable across a range to see what falls out, you're doing an Albers colour study. The tools got faster; the method is a hundred years old.
Now we hit the real turning point, and it's a moment most people have never heard of. In 1965 -- yes, 1965 -- three separate exhibitions of computer-generated art opened, in Stuttgart and New York, within months of each other. The pioneers were mostly mathematicians and engineers with access to rare mainframes and pen plotters: Georg Nees, Frieder Nake, A. Michael Noll. They fed algorithms to a computer, which drove a plotter, which drew with actual ink on actual paper. Look at what they were making:
// 1965: Nees, Nake, Noll drive pen plotters with algorithms. randomness-within-rules.
function earlyPlotterPiece(seed, rng) {
const lines = [];
for (let i = 0; i < 100; i++) {
lines.push({
x1: rng(seed + i), // controlled randomness -- the core discovery
y1: rng(seed + i * 7),
angle: rng(seed + i) * Math.PI,
length: 20 + rng(seed + i * 3) * 40,
});
}
return lines; // ink on paper, driven by a program. this is the whole ancestry.
}
Look closely at that comment -- controlled randomness. These pioneers discovered the exact thing we spent episode 4 and episode 24 on: art gets interesting when you blend a rule with a controlled dose of chance. Nees called one famous piece "Schotter" (gravel): a grid of squares that starts perfectly ordered at the top and slowly descends into rotated chaos as you go down. It's a for loop where the disorder increases with the row index. I could write it tonight in p5.js in ten minutes. They spent hours on a room-sized machine to make it in 1968. Same idea, exactly.
Of all those pioneers, the one who owns my heart is Vera Molnar -- a Hungarian-French artist who is, for my money, a founding mother of generative art. She'd actually been making rule-based art by hand since the 1940s (she called it her "machine imaginaire", the imaginary machine in her head) before she ever got to a real computer in 1968. And her signature move is the most useful lesson in this whole episode: take a rigid geometric order, then break it just slightly. She called it introducing "1% disorder":
// Vera Molnar's core idea: perfect order is dead. break it by ~1% and it comes alive.
function molnarDisorder(grid, disorderAmount, rng) {
return grid.map((cell, i) => ({
x: cell.x + (rng(i) - 0.5) * disorderAmount, // nudge, don't destroy
y: cell.y + (rng(i * 3) - 0.5) * disorderAmount,
rotation: (rng(i * 7) - 0.5) * disorderAmount * 0.1,
}));
}
// disorderAmount near 0 = sterile grid. near 1 = noise. the magic lives around 0.01-0.05.
const alive = molnarDisorder(perfectGrid, 0.03, seededRandom);
That tiny disorderAmount is one of the deepest truths in generative art, and Molnar found it decades before the rest of us. A perfect grid is dead -- the eye slides off it. Pure noise is also dead -- there's nothing to hold on to. The life is in the tension between them, that sliver of controlled imperfection. It's the same reason we added a touch of Perlin noise to everything back in episode 12, and it's the beating heart of Molnar's work. She kept making it, brilliantly, until she died in 2023 at ninety-nine years old. Ninety-nine. If you ever feel too old or too late to start, think about Vera.
Meanwhile a completely different lineage was forming, and its patron saint is Nam June Paik, the Korean-American artist who basically invented video art. Where the plotter pioneers used the computer as a tool to make a static image, Paik treated the technology itself -- TVs, video signals, magnets warping the screen -- as the actual medium and message. He stacked televisions into sculptures, he made robots out of them, he asked what it means that our lives are lived through screens. That distinction matters for you:
// two lineages. one uses tech to MAKE art. the other makes art ABOUT tech itself.
function artistsRelationshipToTech(work) {
if (work.techIsInvisibleTool) return "plotter tradition: computer makes the image";
if (work.techIsTheSubject) return "Paik tradition: the medium IS the message";
return "most creative coders live somewhere on this spectrum";
}
console.log(artistsRelationshipToTech({ techIsTheSubject: true }));
// -> "Paik tradition: the medium IS the message"
I bring Paik up because a lot of the interactive work we did -- the webcam episodes, the pose-tracking, the installations in episodes 92 through 116 -- lives much closer to his lineage than to the plotter one. When you make a piece that's about being watched by a camera, or about data streams, you're a grandchild of Nam June Paik, not of Georg Nees. Knowing which tradition a piece belongs to helps you understand what it's really trying to say. Are you using the machine, or are you talking about it? Both are honourable. They're just diffrent conversations.
Here's one that will bend your brain a little, and it comes from the conceptual art world, not computing at all. Sol LeWitt made "wall drawings" in the 1960s and 70s -- except he often didn't draw them himself. He wrote instructions, and other people executed them on gallery walls. The certificate of instructions was the real artwork; the drawing was just one performance of it. Sound familiar?
// Sol LeWitt: the INSTRUCTIONS are the art. any faithful execution is a valid instance.
const wallDrawing = {
instruction: "draw 10,000 straight lines, each about 25cm, evenly across the wall",
// LeWitt wrote this. assistants drew it. the writing is the work, not any one wall.
};
function execute(instruction, wall, drafter) {
return `${drafter} renders "${instruction.instruction}" onto ${wall}`;
}
// this is EXACTLY the generative-art idea: code (the score) vs output (one performance)
This is the single clearest philosophical ancestor of what we do. LeWitt drew the line -- pun intended -- between the algorithm and its output, and declared the algorithm to be the art. That's the exact distinction we made all the way back in episode 23 when we asked "what makes art generative": the code is a score, and each run is a performance, like sheet music versus a concert. Casey Reas, who co-created Processing, has talked openly about LeWitt as a direct influence. The people who built your tools were reading conceptual artists. The lineage is not a coincidence.
For decades, coding art was locked behind expensive hardware and a computer-science degree. Then, around 2001, two students at the MIT Media Lab -- Casey Reas and Ben Fry, under John Maeda -- built a thing called Processing, and it changed everything. Their goal was radical: make coding as approachable as a sketchbook, so artists and designers with no CS background could just start making visual things. That is the entire reason this series can exist:
// Processing (2001): coding art for EVERYONE, not just CS PhDs with mainframe access.
function barrierToEntry(era) {
const barriers = {
1965: ["mainframe access", "punch cards", "maths degree", "a plotter"],
2001: ["a laptop", "download Processing", "type 10 lines"],
2010: ["a browser", "p5.js -- nothing to install at all"],
};
return barriers[era];
}
console.log(barrierToEntry(2010)); // -> ["a browser", "p5.js -- nothing to install at all"]
Watch that list shrink. In 1965 you needed a mainframe and a maths degree. By 2001 you needed a laptop and ten minutes. And then Lauren McCarthy created p5.js, the JavaScript sister of Processing, and the barrier basically vanished -- now all you need is a browser tab, which is exactly what every single episode of this series has run in. That's not a small thing. Every democratisation of a tool floods the field with people who were previously locked out, and the art gets weirder and richer for it. You, reading this on whatever cheap device you've got, are the payoff of a twenty-year mission to tear down the gate.
So where does all this land today? Creative coding is no longer a fringe curiosity -- it's everywhere, and it finally has cultural weight. There's the annual SIGGRAPH gathering where the graphics world shows off, there's #genuary flooding the internet every January, there's the whole generative-art movement where artists like Tyler Hobbs release algorithmic systems that produce thousands of unique outputs. Let me place us on the timeline:
// creative coding, 2020s: no longer fringe. a real field with lineage + institutions.
const rightNow = {
roots: ["Jacquard 1804", "Bauhaus 1920s", "plotter pioneers 1965", "Molnar", "Paik", "LeWitt"],
tools: ["Processing 2001", "p5.js", "three.js", "shaders", "WebGPU"],
culture: ["#genuary", "SIGGRAPH", "generative art systems", "open-source sketches"],
you: "a link being added to the chain right now",
};
console.log(rightNow.you); // -> "a link being added to the chain right now"
That last field is the point of the whole episode. Tyler Hobbs' "Fidenza" is, at its core, a beautifully tuned flow field -- the exact technique we built in the particle and flow-field episodes. He didn't invent a new physics; he found a gorgeous corner of a space we all have access to, and explored it with obsessive care. That's the lesson, and it's freeing: you don't need a secret technique nobody else has. Molnar's whole career was squares and one percent of disorder. The giants weren't giants because of exotic tools. They were giants because they explored one honest idea deeply. You can do that too.
Let me close the history with the idea that reframes your own practice. Isaac Newton said he saw further by standing on the shoulders of giants, and nowhere is that truer than here. Everything you've learned in this series -- every algorithm, every technique -- was handed to you by people who worked it out the hard way, often on machines that filled rooms. You get all of it for free, on day one:
// you inherit CENTURIES of worked-out ideas. that's not cheating -- it's how art works.
function whatYouInherited() {
return {
fromTilers: "symmetry + tessellation", // episodes 144-145
fromMolnar: "controlled disorder", // episodes 4, 24
fromPlotterPioneers: "randomness within rules",
fromLeWitt: "algorithm as artwork", // episode 23
fromReasAndFry: "the very tools you type into",
yourJob: "add one honest idea of your own, then pass it all on",
};
}
console.log(whatYouInherited().yourJob);
// -> "add one honest idea of your own, then pass it all on"
That yourJob line is the whole message. You are not obligated to invent a new art form from scratch -- nobody in this history did that, they all built on the person before them. Molnar built on constructivism, Reas built on LeWitt, you build on Reas. Your job is simply to receive the tradition honestly, add your own small honest thing to it, and then -- this is the part that matters -- pass it on, credit generous, gate open, exactly like we talked about in the community episode. That's how the chain stays alive. You're not just making sketches. You're carrying something.
for loop in oil paint, a hundred years before we coded itSo that's the long, strange, beautiful chain, and I hope walking it did for you what it did for me -- turned "I make weird pictures with loops" into "I'm the newest link in a two-hundred-year story". Every technique in this series has a face and a name behind it, someone who worked it out on worse hardware than you're holding right now and handed it forward. That's not a burden. It's the best kind of company on the flat grey Tuesdays.
And that brings us right to the edge of something, because if this episode was about looking back down the chain, there's an obvious question hanging in the air: where does the chain go next? The tools are moving fast -- WebGPU, new machine-learning models, hardware getting stranger and cheaper -- and it's worth thinking honestly about what all that means for the kind of work you make, what stays the same, and what you should actually pay attention to versus safely ignore. That's where we head next time. Merci for walking the history with me, and go add your link to the chain today :-).
Sallukes! Thanks for reading.
X
@femdev