Learn Creative Coding Series):I've been wanting to write this series for a long time.
At work I write "normal" code - business logic, APIs, bug fixes, the usual. It pays the bills and I enjoy it. But a few years ago I discovered this corner of programming where the goal isn't to solve a business problem. The goal is to make something beautiful. Or weird. Or hypnotic. Or all three at once.
That's creative coding.
Creative coding is writing code where the primary output is visual, auditory, or experiential - not functional. You're not building an app. You're not processing data. You're drawing, animating, generating shapes, colors, and patterns. Your code IS the art.
Some examples of what people make with creative coding:
That last point is worth lingering on. If you've been anywhere near the crypto space, you've probably seen projects like Art Blocks or fxhash. These are platforms where artists upload a program, not an image. When someone mints a piece, the program runs with a unique random seed and generates a one-of-a-kind artwork. The artist writes the rules. The algorithm does the rest.
We're going to get there in this series. But first, we need to learn the fundamentals.
There are many tools for creative coding - Processing (Java), openFrameworks (C++), TouchDesigner (visual), Hydra (live coding). We're starting with p5.js because:
Later in this series we'll also write creative code with vanilla Canvas API (no libraries), and I'll introduce you to shaders. But p5.js is where we begin.
Let's not waste time. Go to editor.p5js.org - this is the free online editor for p5.js. You'll see something like this:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
Two functions. That's the entire structure of a p5.js program:
setup() runs once, at the start. You create your canvas here.draw() runs over and over, about 60 times per second. This is your animation loop.Right now it just draws a grey background. Let's make it do something. Replace the code with this:
function setup() {
createCanvas(400, 400);
background(20);
}
function draw() {
noStroke();
fill(random(100, 255), random(50, 150), random(150, 255), 30);
let size = random(5, 50);
ellipse(random(width), random(height), size, size);
}
Hit play.
You should see colored circles appearing all over a dark canvas, overlapping and building up into something that looks surprisingly organic. Every time you run it, you get a different result. That's generative art in six lines of code.
Let me break down what's happening:
background(20) - dark background, only drawn once (in setup, not draw)noStroke() - no outline on the shapesfill(random(...), random(...), random(...), 30) - random purple-ish color with low opacity (30 out of 255)random(5, 50) - circle size varies between 5 and 50 pixelsellipse(random(width), random(height), size, size) - draw a circle at a random positionThe magic ingredient here is random(). Every frame, every value is different. The circles pile up because we're not clearing the background each frame. That buildup effect - where layers of semi-transparent shapes create depth and texture - is one of the most fundamental techniques in generative art.
Okay, pretty circles. So what?
Here's why I think creative coding matters, even if you never sell an NFT or exhibit in a gallery:
It makes you a better programmer. Not kidding. Creative coding forces you to think about math (trigonometry, vectors, noise functions), optimization (rendering thousands of particles smoothly), and architecture (structuring complex visual systems). These skills transfer directly to "real" programming.
It's the fastest feedback loop in programming. Change a number, see the result instantly. No compile step, no deploy, no waiting for a test suite. You tweak a parameter and the visual output changes right there. It's addictive.
It's genuinely fun. When was the last time you wrote code and just... smiled at the result? Creative coding does that constantly. You'll write something, run it, and go "oh wow" at something you didn't expect. Happy accidents are part of the process.
The NFT thing is real. Whether you think NFTs are the future or a bubble, generative art on the blockchain is a legitimate creative outlet and income stream. Artists like Tyler Hobbs (Fidenza), Dmitri Cherniak (Ringers), and Monica Rizzolli (Fragments of an Infinite Field) have made careers this way. We'll get into the technical side of building for blockchain later in the series.
We'll start with the basics - shapes, colors, animation, randomness - and gradually work our way up to more advanced topics like particle systems, noise, physics, shaders, and eventually building generative art for the blockchain.
Each episode builds on the last, but they also work as standalone references. I'll always link back to earlier episodes when I use a concept we covered before.
setup() runs once, draw() loops foreverrandom() is your new best friendNext time we're going to properly learn shapes, colors, and the coordinate system. We'll make things that actually look intentional instead of just random splatter. :-)
Merci en tot de volgende!
X
@femdev