Lussen en voorwaarden
In deze les bespreken we twee van de meest elementaire maar belangrijkste elementen van elke programmeertaal: Lussen en conditionals.
Beide zitten in elk programma, spel, en zelfs in fysieke apparaten zoals videospelconsoles, telefoons, televisies, servers, enzovoort. Deze elementen helpen programma’s om te interageren en zich aan te passen aan gebeurtenissen zoals een toetsaanslag of een tekenbeweging.
Maar wat zijn lussen en conditionals?
Een lus is een reeks functies die in de tijd worden herhaald. Strikt genomen is het een reeks instructies die worden uitgevoerd telkens wanneer aan een bepaalde voorwaarde wordt voldaan.
Een voorwaarde is een programmeerstructuur die een stuk code uitvoert als aan een bepaalde voorwaarde is voldaan.
Zoals we zien zijn beide begrippen nauw met elkaar verbonden en worden ze vaak samen gebruikt.
Laten we, om dit in de juiste context te plaatsen, het volgende voorbeeld bekijken: Stel dat we willen dat ons personage (de kat) telt van 1 tot 10, en wanneer het het einde van de telling bereikt, geeft het een bericht weer met de tekst “We zijn klaar met tellen”.
Figuur 15 laat stap voor stap zien hoe de code is opgebouwd.
Figuur 15. Tellende kat implementatie en berichtweergave
Hoewel de verschillende soorten lussen later in deze les worden beschreven, is voor In dit eerste voorbeeld gebruiken we een blok met de naam REPEAT X. Hiermee kan alles wat in het blok wordt ingevoerd ‘x’ keer worden uitgevoerd (standaard 10 keer). Met dit blok hebben we de manier waarop we de telling gaan uitvoeren al gedefinieerd, dus het enige wat we zouden moeten doen is het personage dat de telling zegt, laten zien door middel van een dialoogballon. Dit wordt bereikt door middel van een blok genaamd SAY, dat op het scherm toont wat we erin schrijven.
We willen de telling weergeven op het scherm. Dit wordt echter intern door Scratch gedaan om van de ene iteratie naar de volgende te gaan. Dit betekent dat we geen variabele hebben die ons de waarde van de telling geeft, dus moeten we er een aanmaken. Daarvoor hebben we een variabele genaamd COUNTER gedefinieerd die we hebben geïnitialiseerd met een waarde van 0, die we in elke iteratie van de lus gaan verhogen. Dit kan op verschillende manieren, maar de eenvoudigste is het gebruik van een blok genaamd ADD TO VARIABEL, waarmee je de geselecteerde variabele kunt verhogen of verlagen met de hoeveelheid die je opgeeft. Omdat we één voor één willen tellen, stellen we de waarde in op 1. Met deze code zou het teken al zonder problemen van 1 tot 10 kunnen tellen, maar we willen een bericht weergeven dat aangeeft dat hij klaar is met tellen. Hier komen de voorwaarden om de hoek kijken.
Hiervoor zullen we een van de eenvoudigste voorwaardelijke blokken gebruiken, het IF- THEN, dat in het derde deel van figuur 15 staat.
Aangezien de telling eindigt bij het bereiken van 10, kunnen we, als we deze controle uitvoeren met het voorwaardelijke blok, weten dat ons programma al klaar is met tellen, zodat we een bericht op het scherm kunnen weergeven dat deze gebeurtenis aangeeft.
Figuur 16 toont de hierboven beschreven code in werking.
Figuur 16. Voorbeeld van lussen en conditionals
Nu we begrijpen hoe lussen en conditionals werken, gaan we ze stuk voor stuk grondig analyseren.
LOOPS
We weten al dat een lus een structuur is die een bepaald aantal keren wordt herhaald, dus nu gaan we de verschillende soorten lussen bekijken die we in Scratch kunnen implementeren:
Figuur 17. Soorten lussen in Scratch
Het gebruik van lussen is niet beperkt tot tellen zoals in het vorige voorbeeld, maar ze zijn een essentieel onderdeel van elk programma, omdat ze het personage met een bepaalde snelheid over het toneel kunnen laten bewegen, of zelfs animaties kunnen uitvoeren, naast een oneindig aantal andere mogelijkheden.
We gaan nu verder met enkele praktische voorbeelden, waarmee we de mogelijkheden van dit soort structuren voor de ontwikkeling van videosoftware kunnen bekijken.
Voorbeeld 1: De kleur van een figuur veranderen
Alles wat we in een videospel zien, van de personages tot het landschap, heeft een kleur die wordt gedefinieerd door de combinatie van drie kleuren: Rood, Groen en Blauw, kortweg RGB. In figuur 18 zien we hoe de variatie van elk van deze drie afzonderlijke kleuren de achtergrondkleur beïnvloedt.
Figuur 18. RGB kleurcodering
Dit is mogelijk omdat elk van deze kleuren een waarde heeft van 0 tot 255, d.w.z. de kleuren kunnen worden gedefinieerd als een getal dat we kunnen manipuleren.
Scratch bevat een specifiek blok voor het afwisselen van deze kleuren, genaamd ADD TO EFFECT, dat wordt getoond in Figuur 19. Dit is eigenlijk een blok met effecten, waaronder de kleurverandering, die we in dit eerste praktijkvoorbeeld gaan gebruiken.
Figuur 19. Effectenblok
Ons doel met dit eerste voorbeeld is om het personage voortdurend van kleur te laten veranderen. Daarvoor gebruiken we eerst een nieuw personage. Hoewel we een nieuw karakter kunnen maken, kiezen we in dit voorbeeld een karakter dat al beschikbaar is in de Scratch galerie, zoals getoond in Figuur 20.
Figuur 20. Selecteer een object uit de galerij
Zodra we ons personage hebben geselecteerd, zullen we de code in Figuur 21 implementeren. Deze maakt gebruik van de FOREVER lus, die oneindig doorloopt. Daarin nemen we het blok van figuur 19 op, om de RGB-waarden van elke pixel van het teken in stappen van 25 eenheden te veranderen.
Figuur 21. Kleur van de figuur wijzigen
Voorbeeld 2: De cursor volgen
In dit voorbeeld bekijken we een van de meest voorkomende toepassingen van loops in de ontwikkeling van videospellen: het personage bewegen. Het personage kan bewegen op basis van meerdere gebeurtenissen, zoals het indrukken van een toets, het volgen van een animatie of dialoog, in contact komen met een ander object, enzovoort.
In dit voorbeeld gaan we zien hoe we oneindige lussen kunnen gebruiken om de figuur ons over het scherm te laten volgen terwijl we de cursor verplaatsen.
Zodra we het teken hebben geselecteerd waarmee we willen werken, moeten we een code implementeren die het teken voortdurend in de richting van de muiscursor beweegt.
Hiervoor hebben we het blok , dat de positie van de cursor op het scherm detecteert en het personage in die richting zet. Dit blok laat echter geen beweging van het blok toe, zodat het moet worden gebruikt in combinatie met het blok
. Dit laatste laat de figuur in elke iteratie een bepaald aantal stappen (pixels) over het scherm scrollen, waardoor we de snelheid van de beweging kunnen regelen.
Figuur 22 toont de code in werking.
Figuur 22. Laat de figuur de cursor volgen
Voorbeeld 3: Een personage verplaatsen
In een videospel worden elementen (figuren) op het scherm geanimeerd, d.w.z. hun “sprite” (houding/vorm) verandert wanneer personages lopen, springen of schade oplopen. Een animatie is gewoon een reeks beelden die met elkaar wisselen om een bepaalde beweging te simuleren. Scrollen tussen deze beelden kan door middel van loops (naast vele andere opties).
In het bovenstaande voorbeeld hebben we onze vogel naar de cursor laten bewegen, maar zijn beweging ziet er niet erg natuurlijk uit, omdat hij niet met zijn vleugels slaat.
Veel van de afbeeldingen in de Scratch galerie spelen een kleine animatie af als we de cursor erover heen bewegen, zoals in Figuur 23.
Figura 23. Sprites animados
Figuur 23. Geanimeerde sprites
Deze keer gaan we het vorige voorbeeld aanpassen zodat het personage met de vleugels wiekt terwijl het over het scherm beweegt en de cursor volgt. Zoals gezegd zijn animaties niets meer dan afbeeldingen die na elkaar worden uitgevoerd om een bepaald effect te simuleren.
Wat we aan het bovenstaande voorbeeld moeten toevoegen is een functie waarmee we het beeld van het personage kunnen veranderen in het volgende geanimeerde beeld, d.w.z. het volgende frame. Hiervoor hebben we een specifiek blok genaamd dat toelaat om automatisch (binnen de lus) over te schakelen naar de volgende animatie.
Figuur 24. Animatie van de figuur
VOORWAARDEN
Zoals we hebben gezien, zijn conditionals een veel gebruikt element in het programmeren, vooral in combinatie met lussen.
Alvorens praktische toepassingen van conditionals te bekijken, moeten we weten welke soorten er zijn en wat hun belangrijkste kenmerken en verschillen zijn.
![]() |
IF- THEN Dit blok voert een stuk code uit als aan de opgegeven voorwaarde wordt voldaan. |
![]() |
Deze structuur staat in de programmering bekend als IF-ELSE. Als aan de voorwaarde wordt voldaan, wordt een bepaalde code uitgevoerd, maar als niet aan de voorwaarde wordt voldaan, wordt een andere code uitgevoerd.
Het is een variatie op het vorige blok. |
![]() |
WAIT-UNTIL Dit blok is geen voorwaarde als zodanig. Het maakt het mogelijk de code te pauzeren totdat aan een voorwaarde is voldaan. |
Figuur 25. Soorten voorwaarden
Er moet rekening mee worden gehouden dat conditionals iets uitvoeren of stoppen als aan een bepaalde voorwaarde is voldaan, die (in veel gevallen) wordt bepaald door een of andere numerieke parameter. Een voorbeeld hiervan is de gezondheid van het personage. Als ons personage gewond raakt, daalt zijn leven tot nul, op welk punt hij sterft, of met andere woorden, als LIFE <= 0, moet het spel een bericht op het scherm tonen met GAME OVER.
Figuur 26. Soorten wiskundige operatoren
Nu we weten wat voorwaarden en lussen zijn, laten we eens kijken naar enkele praktische voorbeelden:
Voorbeeld 4: Een animatie wijzigen bij een gebeurtenis
In dit voorbeeld gaan we een kleine code maken waarin we de animatie van een personage aanpassen wanneer het tegen een ander personage botst. Om het in de context van de dynamiek van het spel te plaatsen, gaan we er een maken waarin een haai een vis moet vangen.
Omdat ons spel zich onder water afspeelt, gaan we uit de achtergronden die Scratch biedt een achtergrond kiezen die bij ons thema past. Daarvoor volgen we de stappen in Figuur 27.
Figuur 27. Selecteer behangpapier
Nu selecteren we onze personages: een haai en een vis. Zoals we kunnen zien, is de grootte van beide personages vergelijkbaar, maar we willen dat de haai groter is dan de vis, dus gaan we hem schalen.
Figuur 28. Een figuur herschalen
Onze haai lijkt niet al te happig om iets te eten, want in de standaardafbeelding is zijn bek gesloten. Om dit op te lossen, veranderen we de afbeelding van het personage in een afbeelding waarin de bek van het personage open is, zoals getoond in Figuur 29.
Figuur 29. Houding van de figuur veranderen
Ten slotte tonen we de code waarin de haai zijn bek sluit wanneer hij de vis aanraakt.
Figuur 30. Interactie tussen personages
4 Comments
De voorbeelden zijn niet allemaal vertaald, daardoor wordt het moeilijk de tekst aan de voorbeelden te linken.
We started changing images to english, but we need more time. Sorry.
“Conditionals” en “voorwaarden” worden door elkaar gebruikt. Dit zorgt soms voor verwarring.
Please, send me an e-mail with the confusing paragraph