Creative Coding · Session c06

Your Own Functions

Write a recipe once — cook it as many times as you like.

So far you've used functions p5.js gave you: circle(), rect(), background(). Now you write your own. A function is a named block of code you can run whenever you want, and each time you can pass it different values — called parameters.

The magic: write drawHouse() once, then call it five times with different sizes and colours. A whole miniature village in five lines.

Live sketch — Miniature Village

Five houses, one function. Click the canvas to add a sixth house.

function setup() {
  createCanvas(420, 260);
  noLoop();         // draw once — the village doesn't move
}

function draw() {
  // sky + ground
  background(175, 215, 250);
  fill(110, 165, 75); noStroke();
  rect(0, 215, width, 45);

  // ← the whole village: one function, five calls
  drawHouse( 60, 215, 70,  '#c0392b');
  drawHouse(155, 215, 55,  '#8e44ad');
  drawHouse(242, 215, 90,  '#2980b9');
  drawHouse(337, 215, 62,  '#27ae60');
  drawHouse(402, 215, 48,  '#e67e22');
}

// ── define the function once, use it everywhere ──
function drawHouse(x, y, size, roofCol) {
  // wall — always cream
  fill(245, 235, 220); noStroke();
  rect(x - size/2, y - size * 0.8, size, size * 0.8);

  // roof — uses the roofCol parameter
  fill(roofCol);
  triangle(
    x - size/2 - 5, y - size * 0.8,
    x,               y - size * 1.5,
    x + size/2 + 5, y - size * 0.8
  );

  // door
  fill(120, 80, 50);
  let d = size * 0.22;
  rect(x - d/2, y - d * 2, d, d * 2);

  // two windows
  fill(200, 230, 255);
  let ww = size * 0.2;
  rect(x - size * 0.37, y - size * 0.65, ww, ww * 0.7);
  rect(x + size * 0.16, y - size * 0.65, ww, ww * 0.7);
}

Anatomy of a function:
function drawHouse(x, y, size, roofCol)
— name: drawHouse — what you call it
— parameters: x, y, size, roofCol — the ingredients that change each time
— body: the { } block — the recipe steps

When you write drawHouse(60, 215, 70, '#c0392b'), the values 60, 215, 70, '#c0392b' are called arguments — they fill in the parameters.

This is how every app is built: The button you tap to send a message on WhatsApp is drawn by a function like drawButton(x, y, label, colour) — called once for every button on the screen, with different arguments. The function is written once; the arguments change everything.

Challenges

Add a sixth house at x = 475 — it'll be off-screen! Change createCanvas(420, 260) to createCanvas(520, 260) to fit it. What colour roof will you give it?
Add a chimney inside drawHouse: a small dark rect near the top of the roof. It needs to use size so it scales with the house.
Add a door colour parameter: change the signature to drawHouse(x, y, size, roofCol, doorCol) and use doorCol in the door section. Update all five calls to pass a door colour.
Write a drawTree(x, y, size) function — a brown rect trunk and a green circle top. Place three trees between the houses.
Open challenge: Write a drawCloud(x, y) function using four or five overlapping ellipse calls in white. Place three clouds in the sky at different heights. Clouds near the top = smaller (they're "farther away").

Next session → c07: Randomness You'll use random() to scatter things unpredictably and randomSeed() to freeze an arrangement — like sealing a crime scene so the clues don't move while you investigate.

Your Own Functions

Live sketch — Miniature Village

Ask your tutor