Learn Creative Coding (#1) - What Is Creative Coding? (And Why You Should Care)
What will I learn
- You will learn what creative coding actually means;
- why it's interesting for both developers and designers;
- how generative art connects to crypto and NFTs;
- how to set up p5.js and run your first sketch in under two minutes.
Requirements
- A modern web browser (Chrome, Firefox, Safari);
- Zero art skills required (seriously);
- Basic understanding of what code is (variables, functions - that's it).
Difficulty
- Beginner
Curriculum (of the Learn Creative Coding Series):
Learn Creative Coding (#1) - What Is Creative Coding? (And Why You Should Care)
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.
So what is it exactly?
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:
- Animated patterns that evolve endlessly
- Interactive installations that respond to movement or sound
- Generative posters where every print is unique
- Music visualizers that react to audio in real-time
- Entire NFT collections where an algorithm produces thousands of unique pieces
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.
Why p5.js?
There are many tools for creative coding - Processing (Java), openFrameworks (C++), TouchDesigner (visual), Hydra (live coding). We're starting with p5.js because:
- It runs in the browser. No installation. Open a page, write code, see results.
- It's JavaScript. If you know even a little JS, you already have a head start.
- The community is massive. Tutorials, examples, libraries everywhere.
- It's what most generative NFT platforms use. fxhash, ArtBlocks - all JavaScript.
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.
Your first sketch
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 position
The 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.
Why should you care?
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.
What we'll cover in this 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.
Allez, wa weten we nu allemaal?
- Creative coding = code as art, not code as product
- p5.js = our tool of choice, runs in the browser, JavaScript-based
setup()runs once,draw()loops foreverrandom()is your new best friend- Generative art has real-world applications including NFTs on platforms like fxhash and ArtBlocks
Next 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
