1. Multimedia Technology 2
Lessenreeks door Tom Luyten
voor Communicatie- en Multimedia Design Maastricht
Werkcollege 4
Loops
Gebaseerd op het boek “Learning Processing” door Daniel Schiffman
En de PowerPoint van Donald W. Smith

2. Les 4 : Loops
LESSON 2: Everything you need to know
Variabelen
Condities
Loops
• Iteratie?
• While loop
• For loop
• Lokale en globale variabelen

3. Iteratie
Wat is iteratie?
Iteratie is het herhalen van een aantal regels, elke keer
opnieuw. Er kunnen variaties in zitten.
Voorbeeld: benen voor je monstertje
stroke(0):
line(50,60,50,80);
line(60,60,60,80);
line(70,60,70,80);
line(80,60,80,80);
line(90,60,90,80);
…

4. Iteratie
Wat is iteratie?
Iteratie is het herhalen van een aantal regels, elke keer
opnieuw. Er kunnen variaties in zitten.
Voorbeeld: benen voor je monstertje
stroke(0):
line(50,60,50,80);
line(60,60,60,80);
line(70,60,70,80);
line(80,60,80,80);
line(90,60,90,80);
…
Dus…
Zit een patroon in:
x neemt 10 toe
x stopt op 90

5. Iteratie
int x = 50;
int y = 80;
int spatie = 10;
int lengte = 20;
stroke(0):
x = x + spatie
line(x,y,x,y+lengte);
x = x + spatie
line(x,y,x,y+lengte);
x = x + spatie
line(x,y,x,y+lengte);
x = x + spatie
line(x,y,x,y+lengte);
…

6. Iteratie
int x = 50;
int y = 80;
int spatie = 10;
int lengte = 20;
stroke(0):
x = x + spatie
line(x,y,x,y+lengte);
Meer code!?
Wel efficiënter,
Maar…
line(x,y,x,y+lengte);
Nog een meer
duidelijk patroon
x = x + spatie
Dus…
x = x + spatie
line(x,y,x,y+lengte);
x = x + spatie
line(x,y,x,y+lengte);
…

7. While loop
Start ?
Stap ?
Stop ?
waar begint de loop ?
Hoe groot is de stap die wordt genomen?
Bij welke waarde moet de loop stoppen?

8. While loop
START
STOP
STAP

9. While loop
Start ?
Stap ?
Stop ?
Setup condities van een loop
Deze 3 definiëren je volledige loop. Je hebt deze 3 nodig om je loop uit te schrijven.
Een loop bestaat uit deze setup condities, een test, en een stuk code dat wordt
uitgevoerd

10. While loop
int x = 50;
int spatie = 10;
int stop = 150;
while(x < stop) {
line(x,60,x,80);
x = x + spatie;
}
SETUP CONDITIES
TEST
voer uit
VERANDER IETS
Terug naar TEST
tot TEST = false
Zelfde resultaat

11. While loop
Maak fig 6.5 na
Wat zijn de setup condities?
Wat is de test?
Wat voeren we uit?

12. While loop
Wat zijn de setup condities?
start: beginhoogte eerste rechthoek
stap : spatie tussen de rechthoeken
stop : waarde waar de loop moet stoppen
Wat is de test?
als rechthoek y coord. Groter is dan
de stopwaarde, stop.
Wat voeren we uit?
teken een rechthoek van 100 breed, 10 hoog, 100 van de kant.

13. While loop
Wat zijn de setup condities?
beginhoogte eerste rechthoek
start: int y = 10;
spatie tussen de rechthoeken
stap: int spatie = 20;
waarde waar de loop moet stoppen
stop: int stop = height;
Wat is de test?
als rechthoek y coord. Groter is dan
de stopwaarde, stop.
while (y < stop) {
Wat voeren we uit?
teken een rechthoek van 100 breed, 10 hoog, 100 van de kant.
rect(50,y,100,10);
y = y + spatie
}

14. Infinite loops
int x = 0;
while(x<10){
println(x);
x = x-1
}
X wordt kleiner, exit wordt nooit bereikt

15. Infinite loops
while(x <= einde){
line(x,y,x,y+lengte);
x = x + spatie;
}
spatie = mouseX/2;
mouseX/2 kan nul worden!
Oplossing:
Int spatie = constrain(mouseX/2, 1, 100);

16. While loop
int x = 0;
Void setup(){
size(200,200);
}
void draw(){
while(x < 9){
x = x+1;
}
x = 0;
}
Let op!
Wanneer je een while loop in draw gebruikt,
Mag je niet vergeten je startwaarde terug te
resetten,
X blijft in dit geval anders 9.

17. For loop
Een shortcode voor een while loop waar eenzelfde increment voorkomt.
Start, Stap, Stop en test gebeuren hier in 1 regel (! Efficiënt)
Ook hoef je start niet te resetten. De variabele wordt in de loop gemaakt en
gevuld met je startwaarde (int i = 0);
Start bij 0, tel tot 9
x = 0;
while(x < 9){
x = x+1;
}
Wordt:
for (int i = 0; i < 9; i = i + 1){ }

18. For loop
Start bij 100, tel tot 150 in stappen van 10
x = 100;
while(x < 150){
x = x+10;
}
Wordt:
for (int i = 100; i < 150; i = i + 10){ }

19. For loop
1. Start waarde
4. Exit test
3. Tel bij of af
for(int i=100; i>=0; i = i-5){
2. doe code
3. tel bij/af
5. Terug naar 2
}

21. 21

22. Lokale en globale variabelen
Een variabele die je declareert binnen een codeblok (tussen { en } ) kan enkel
Door dat codeblok worden “gezien”
Na } komt deze variabele te vervallen. Hij wordt uit het geheugen gewist.
Dit heet een lokale variabele
Dit is te vergelijken met een doos (variabele) die je in één kamer openvouwt,
Vervolgens kan ze niet meer door de deur. Ze is dus in andere kamers niet te
gebruiken.
Ga je naar een andere kamer (de rest van je programma), moet je de doos
leegmaken en weer opvouwen.

23. Lokale en globale variabelen
Een variabele die je bovenaan je programma declareert, kan door het hele
Programma worden gezien en wordt niet gewist.
Dit heet een globale variabele
Dit is te vergelijken met een doos (variabele) die je in buitenshuis openvouwt,
Vervolgens kan ze door alle deuren. Ze is dus in alle andere kamers te
gebruiken.
Ga je naar een andere kamer (de rest van je programma), moet je de doos
NIET
leegmaken en weer opvouwen. De doos en haar inhoud blijven dus je hele
programma intact

24. Lokale en globale variabelen
Globale variabele (te gebruiken
over het hele programma, wordt
nooit gewist)
int x = 50;
void setup(){
size(200,500);
}
Lokale variabele, enkel te
gebruiken binnen de draw. Komt te
vervallen na } van de draw loop.
void draw(){
float test = 10.5;
for(int i=0; i<500; i=i+50){
rect(x,i,50,50);
}
}
Lokale variabele, enkel te
gebruiken binnen de for loop.
Komt te vervallen na } van de for
loop.

25. Lokale en globale variabelen
Beweeg de hele “figuur” naar links.
Optioneel (moeilijk) : naar onderen!

26. Integreer minstens 1 loop in je monstertje