What is creative coding?
Creative coding uses programming to make art: images, animation, sound, games or interactive installations. The aim is expression, not a business app.
Popular tools: p5.js (JavaScript in the browser), Processing (Java), Python with turtle or pygame, and block tools like Scratch.
Most sketches have two parts: setup() runs once (make the canvas) and draw() runs again and again, about 60 times a second, which makes animation.
Generative art: the artist writes rules, and the computer makes the picture. Change one number and you get a new work.
Canvas, coordinates, colours and shapes
The canvas is a grid of pixels. createCanvas(400, 300) makes it 400 wide and 300 tall. The origin (0, 0) is the top-left; y grows downwards, unlike maths graphs.
point(x, y),line(x1, y1, x2, y2),rect(x, y, w, h),circle(x, y, d)fill(r, g, b)sets the inside colour,stroke()the outline. Each value is 0–255. (0, 0, 0) is black, (255, 255, 255) is white.- A fourth number, alpha, sets see-through-ness.
Variables store numbers that can change: x = x + 2 in draw() moves a ball. A test (if (x > width) x = 0) wraps it back.
Loops, randomness and patterns
A for loop repeats with a counter: for (i = 0; i < 10; i++) circle(i*40, 100, 30) draws a row of 10. A loop inside a loop (nested) fills a grid: n × n shapes.
random(a, b) gives a number between a and b. Use it for position, size or colour. A seed fixes the random sequence so you can make the same picture again.
Noise (Perlin noise) is smooth randomness, good for clouds, hills and natural motion.
Patterns come from repeating with small changes: rotate a little each time, change colour by i, or skip every second shape.
Functions, recursion and fractals
A function packs instructions under a name, with parameters: flower(x, y, size) can be drawn many times.
Iteration repeats with a loop. Recursion repeats by a function calling itself on a smaller problem. It needs a base case to stop, or it never ends.
function branch(len, depth) {
line(0, 0, 0, -len); translate(0, -len)
if (depth > 0) {
rotate(a); branch(len*0.7, depth-1)
rotate(-2a); branch(len*0.7, depth-1)
}
}A fractal looks similar at every scale: trees, ferns, the Koch snowflake, the Sierpiński triangle. A binary tree of depth d has 2d − 1 branches.
Events, objects, data and installations
Events
An event is something that happens: mousePressed(), keyPressed(), a slider moving, a sound getting loud. The program reacts with a function. This makes art interactive.
Arrays and objects
An array stores many values: 100 x-positions for 100 raindrops. A class is a blueprint (Drop with x, y, speed and a fall() method); each drop is an object. This keeps big sketches tidy.
Images and video as data
An image is an array of pixels, each with RGB values. Change every pixel to make filters: grey = (r + g + b) / 3; invert = 255 − value. Webcam video is a new image 30 times a second.
Data visualisation
Turn numbers into shapes: rainfall per month as bar heights, or city temperatures as colours.
Sensors, APIs, GUIs and installations
A microcontroller (Arduino, micro:bit) can send light or distance readings to a sketch. An API brings live data from the internet, such as weather. A GUI gives sliders and buttons. Put it all in a room with a projector and you have an interactive installation.
Try it
Open a p5.js web editor and draw a 10 × 10 grid of circles whose colour depends on mouseX.
Key formulas and definitions
- Canvas: (0, 0) top-left, x → right, y → down
- Colour: fill(r, g, b), each 0–255
- Nested loop: n × n shapes
- Grey pixel = (r + g + b) / 3
- Invert: new = 255 − old
- Binary fractal tree: branches = 2^depth − 1
Worked examples
1. On a 400 × 300 canvas, where is the point (400, 300)?
The bottom-right corner, because x grows right and y grows down from the top-left (0, 0).
2. Write the colour for pure yellow in RGB.
Yellow is red + green light: fill(255, 255, 0).
3. How many circles does this draw? for (i = 0; i < 8; i++) for (j = 0; j < 5; j++) circle(i*50, j*50, 40)
The outer loop runs 8 times and the inner 5 times each: 8 × 5 = 40 circles.
4. A recursive tree starts with one trunk and each branch splits in two, down to depth 5. How many branches?
1 + 2 + 4 + 8 + 16 = 31 = 2⁵ − 1.
5. A pixel is (200, 100, 30). Find its greyscale value and its inverted colour.
Grey = (200 + 100 + 30) / 3 = 110. Invert = (55, 155, 225).
6. Plan a raindrop sketch with objects.
Class Drop { x, y, speed; fall() { y += speed; if (y > height) y = 0 } show() { line(x, y, x, y+10) } }. Make an array of 200 drops; in draw(), call fall() and show() for each.
Common mistakes
- Thinking y goes up as in maths graphs. On a canvas y grows downwards.
- Writing recursion without a base case. The function calls itself forever and the program crashes.
- Putting background() in setup() but expecting animation to look clean. Call it at the start of draw() to clear each frame (or leave it out for trails on purpose).
- Using colour values above 255 or below 0. They are clipped, so the colour does not change as you expect.