Branching

Branching betekent dat je programma keuzes maakt: verschillende stukken code worden uitgevoerd afhankelijk van voorwaarden. Zonder branching zou een programma altijd exact dezelfde stappen uitvoeren — ongeacht wat er gebeurt. In p5.js gebruik je branching om bijvoorbeeld te reageren op muisbewegingen, toetsenbordinvoer of botsingen.

---

Waarom branching?

In interactieve programma’s zoals een p5.js sketch wil je dat het gedrag verandert als er iets gebeurt:

• Als de muis links van het scherm is, teken iets blauw; anders rood.
• Als de gebruiker een toets indrukt, beweeg een object.
• Als een bal de rand raakt, verander de richting.

Branching maakt dit soort voorwaardelijke logica mogelijk.

---

De if-constructie

De basisvorm:

Voorbeeld: basis if-constructie

if (conditie) {
    // code die alleen wordt uitgevoerd als conditie true is
}

Voorbeeld:

Voorbeeld: if-else met muispositie

if (mouseX > width / 2) {
    background(200, 0, 0); // rechts: rood
} else {
    background(0, 0, 200); // links: blauw
}

De conditie tussen haakjes moet een boolean opleveren (true of false). Vergelijkingen (>, <, ===) en logische operatoren (&&, ||, !) worden vaak gebruikt.

---

if – else – else if

Met meerdere paden:

Voorbeeld: if – else if – else keten

if (key === 'a') {
    fill('green');
} else if (key === 'b') {
    fill('blue');
} else {
    fill('gray');
}

Gebruik else if voor meerdere mogelijke condities en een afsluitende else voor alles wat overblijft.

Tip: Zet de meest specifieke voorwaarden eerst — anders kan een bredere conditie te vroeg waar zijn.

---

De switch-constructie

Wanneer je één waarde vergelijkt met veel vaste opties, is switch overzichtelijker dan veel if-statements.

Voorbeeld: switch met pijltoetsen

switch (key) {
    case 'w':
        y -= 5; // omhoog
        break;
    case 's':
        y += 5; // omlaag
        break;
    default:
        // niets doen
        break;
}

Gebruik altijd break om te voorkomen dat het programma “doorschiet” naar de volgende case.

---

Logische operatoren

Operatoren die condities combineren:

Symbool	Betekenis	Voorbeeld	Betekenis
&&	EN	x > 0 && x < 100	waar als beide waar zijn
| |	OF	key === 'a' | | key === 'b'	waar als één waar is
!	NIET	!gameOver	keert de waarheid om

Voorbeeld in p5.js:

Voorbeeld: logische EN voor muis binnen canvas

if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    fill(0, 255, 0);
} else {
    fill(255, 0, 0);
}

---

Short-circuit evaluatie

In JavaScript worden logische operatoren kortgesloten geëvalueerd:

Voorbeeld: short-circuit om deling door nul te voorkomen

if (x !== 0 && y / x > 1) {
    // veilig: tweede deel wordt niet berekend als x===0
}

Het tweede deel van de conditie wordt alleen geëvalueerd als het nodig is. Dit voorkomt fouten zoals deling door nul.

---

De conditionele (ternary) operator

Een compacte vorm van if-else:

Voorbeeld: ternary operator voor kleurkeuze

let kleur = (mouseX > width / 2) ? 'red' : 'blue';
fill(kleur);

Lees: “Als de muis rechts is, gebruik rood, anders blauw.”

Gebruik deze vorm alleen bij eenvoudige keuzes, niet bij complexe logica.

---

Nested branching en leesbaarheid

Je kunt if-statements nesten, maar te veel nesting maakt code moeilijk leesbaar:

Voorbeeld: geneste if-structuur

if (gameStarted) {
    if (!gameOver) {
        if (score > highScore) {
            console.log('Nieuw record!');
        }
    }
}

Beter met guard clauses (vroege exit):

Voorbeeld: guard clauses als alternatief voor nesting

if (!gameStarted || gameOver) return;
if (score > highScore) console.log('Nieuw record!');

---

Branching in animaties (p5.js)

In p5.js gebeurt branching vaak binnen de draw()-loop:

Voorbeeld: branching binnen p5.js draw()

function draw() {
    background(220);

    if (mouseIsPressed) {
        ellipse(mouseX, mouseY, 50, 50);
    } else {
        rect(mouseX - 25, mouseY - 25, 50, 50);
    }
}

Hier bepaalt de toestand van de muis welk object wordt getekend.

---

Veelvoorkomende fouten

• = gebruiken in plaats van === (toewijzing i.p.v. vergelijking)
• Condities vergeten tussen haakjes
• else niet uitlijnen met bijbehorende if
• Onvolledige logische expressies zonder haakjes

Voorbeeld van fout:

Voorbeeld: fout door toewijzing i.p.v. vergelijking

if (x = 5) { ... } // x krijgt waarde 5, niet een vergelijking!

Correct:

Voorbeeld: correcte vergelijking met ===

if (x === 5) { ... }

---

Welke branching-constructie gebruik ik?

Constructie	Gebruik
if	Eenvoudige condities
else if	Meerdere mogelijke condities
else	Alle andere condities
switch	Meerdere vaste opties
ternary operator	Korte, inline beslissingen. Als de branching leidt tot het toekennen van een waarde aan een variabele.

Best practices

• Gebruik duidelijke, betekenisvolle condities: if (isVisible) in plaats van if (v).
• Voeg default toe aan elke switch.
• Gebruik early return om nesting te beperken.
• Test randgevallen expliciet (x === 0, x === width).
• Gebruik logische operatoren om expressies te combineren in plaats van geneste ifs.

---

Begrippenlijst

• Branching – het splitsen van de uitvoer van code op basis van condities
• Condition / conditie – logische test die true of false oplevert
• Boolean – waarde die true of false kan zijn
• if-statement – basisvorm van branching
• else / else if – alternatieve paden bij branching
• switch – constructie voor meerdere vaste opties
• case – onderdeel van een switch dat een specifieke waarde behandelt
• default – vangt alle niet-overeenkomende waarden
• Ternary operator – compacte vorm van if-else: cond ? a : b
• Logical operators – &&, ||, !
• Short-circuit evaluation – JavaScript evalueert alleen wat nodig is
• Guard clause – vroegtijdige return om complexiteit te verminderen
• Truthy / falsy – waarden die in condities als waar of onwaar tellen
• Nested branching – een if binnen een if
• Control flow – de volgorde waarin code wordt uitgevoerd

---