Van chaos naar orde: structuur in je code¶

Doel¶

Je hebt al geleerd om variabelen, functies en loops te gebruiken in p5.js. Je merkt af en toe dat je code steeds rommeliger wordt. Hoe kan je je code overzichtelijker maken?

1. Herken de chaos¶

Bij Programming 101 heb je waarschijnlijk code geschreven die er ongeveer zo uitzag:

function draw() {
  circle(50, 100, 20);
  circle(100, 100, 20);
  circle(150, 100, 20);
}

Op zich werkt dit prima, maar wat als je er 10 of 100 cirkels bij wilt tekenen? Of als elke cirkel een andere kleur of snelheid moet hebben? Dan groeit de chaos.

Mini-opdracht

Voeg nog twee cirkels toe. Kijk wat er gebeurt met de leesbaarheid van de code.

Herhaling vermijden

Een goede programmeur zoekt manieren om herhaling te vermijden.

2. Structuur met functies¶

Functies helpen om stukjes code samen te voegen die bij elkaar horen.

function drawBall(x, y) {
  circle(x, y, 20);
}

function draw() {
  drawBall(50, 100);
  drawBall(100, 100);
  drawBall(150, 100);
}

Nu kun je de logica om een bal te tekenen hergebruiken. Minder herhaling, meer overzicht.

Mini-opdracht

Voeg een parameter toe aan drawBall() zodat je ook de kleur kunt instellen zodat je elke bal een eigen kleur kunt geven.

Probeer deze varianten:

drawBall(50, 100, 'red');
drawBall(100, 100, 'blue');
drawBall(150, 100, 'green');

3. Structuur met arrays¶

Met arrays kun je veel vergelijkbare gegevens in één variabele opslaan.

let xPosities = [50, 100, 150];

function draw() {
  for (let x of xPosities) {
    drawBall(x, 100, 'orange');
  }
}

Mini-opdracht

Voeg een extra positie toe aan de array.
Pas de code aan zodat elke cirkel een eigen kleur krijgt.

Denkvraag

Waarom is deze aanpak beter dan losse variabelen als x1, x2, x3?

4. Arrays + gedrag: animatie¶

In p5.js gaat het vaak om beweging. Met arrays kun je dat per object bijhouden:

let x = [50, 100, 150];
let y = [100, 120, 140];
let speed = [1, 2, 1.5];

function draw() {
  background(220);
  for (let i = 0; i < x.length; i++) {
    x[i] += speed[i];
    circle(x[i], y[i], 20);
  }
}

Mini-opdracht:

Laat de ballen stuiteren tegen de randen van het scherm.
Voeg een color-array toe zodat elke bal zijn eigen kleur krijgt.

Tip

Merk je dat je steeds meer arrays nodig hebt? Dat is een teken dat je klaar bent voor objecten.

5. Reflectie¶

Je hebt geleerd hoe je code overzichtelijker maakt door functies en arrays te gebruiken. Dat zijn de eerste stappen naar structuur in je programma.

In de volgende les ontdek je hoe je nog meer structuur kunt aanbrengen door gegevens en gedrag te combineren — met objecten en classes.

Begrippen¶

Functie: herbruikbaar stukje code met een naam.
Array: lijst van waarden in één variabele.
Herbruikbaarheid: dezelfde logica op meerdere plekken gebruiken.
Structuur: code zó indelen dat je hem kunt begrijpen, uitbreiden en onderhouden.