Multimedia Technology 2
Lessenreeks door Tom Luyten
voor Communicatie- en Multimedia Design Maastricht

Werkcollege 3

Con...
Hoorcollege 3: condities

Condities (p.59  80)
• Wat is een conditie ?
• if, else, else if
• Condities gebruiken
conditionals

Er is een probleem met ons monster
•

We kunnen het monster nu autonoom laten bewegen, maar we
verliezen het...
Hoorcollege 3: condities

Condities (p.59  80)
• Wat is een conditie ?
• if, else, else if
• Condities gebruiken
• Logica...
conditionals
Wat is een conditional/conditie ?
•

Een test

•

Meestal een vergelijking
Is 20 groter dan 10  ja
Is 10 gro...
conditionals
Soorten tests die je binnen een conditional kan uitvoeren:
>

groter dan

<

kleiner dan

>=

groter dan of g...
conditionals
10 min.
Maak een programma waar de achtergrond wit kleurt wanneer de
muis zich links van het scherm bevindt,
...
conditionals
10 min.
Pas het gemaakte programma aan,
Zodat de achtergrond zwarter wordt als de muis links staat,
En witter...
conditionals

Wat is er mis met dit programma ?
Als kleur boven 255 komt, of onder 0  fout
Oplossing?
constrain
if (r > 255) {
r = 255;
}
if (r < 0) {
r = 0;
}
Kan geschreven worden als:

r = constrain(r,0,255);

Goede manie...
conditionals
Haal de sketch van het vierkantje erbij.

Kunnen we nu het probleem oplossen dat het uit beeld verdwijnt?
conditionals
Hoe luidt de test die wij willen uitvoeren ?

In mensentaal:
Als het vierkantje het venster verlaat, langs re...
conditionals
- Dus als vierkantX groter is dan width omkeren

In code:
if(vierkantX > width){
vierkantX van richting vera...
conditionals
Hoe luidt de test die wij willen uitvoeren ?

In mensentaal:
Als het vierkantje het venster verlaat, langs re...
conditionals
10 min.
Pas het gemaakte programma aan,
Zodat het vierkantje links en rechts binnen het venster blijft,
Door ...
conditionals

Pas het gemaakte programma aan,
Zodat het vierkantje links en rechts binnen het venster blijft,
Door aan de ...
Logical operators
Logical operators
We kennen nu het simpele IF statement,

Handig, maar beperkt
Wat als ik nu het volgende wil doen?
- als ...
Logical operators
Testen of de muis links of rechts van het venster zat, deden we
zo:
if (mouseX < width/2) {

//voor link...
Logical operators
Logische AND

&&

Logische OR ||
Logische NIET

!

Bovengenoemd voorbeeld wordt dan:

if(mouseX < width/...
Beslissingsboom

if(x<20){
fill(255,0,0);
}
if(x<50){
fill(0,255,0);
}
Beslissingsboom

if(x<20){
fill(255,0,0);
}
else if(x<50){
fill(0,255,0);
}
Beslissingsboom
Toepassing:
bv.: als deze knop aan staat,
De rest negeren.
if(knop == aan){
game over
}
else if(level == b...
Beslissingsboom
Beslissingsboom
OPGAVE A

OPGAVE B

int x = 75

int x = 75

if(x > 80){

if(x > 50){

println(x+”is greater than 80”);

pr...
Beslissingsboom
Opgave C

Opgave D

int x = 5

int x = 5

println(“x is now” + x);

println(“x is now” + x);

if(x == 5){
...
Condities
Merk ook het verschil op tussen enkele = en dubbele ==
if(x == 5){}

een dubbel == teken geeft aan dat je 2 zake...
Boolean
Boolean variabele

Een boolean = een variabele waar we true of false kunnen in
opslaan en onthouden.
Dit kan worden gebrui...
Boolean variabele

Boolean omkeren
als true, dan false
als false, dan true

boolean test
test = !test
Zorg ervoor dat je monstertje rond beweegt, en van richting veranderd zodra
het de kant raakt.

Gebruik een teller die opt...
Uitbreiding: optioneel
Meerdere rollovers
Les 4 voorbeeld 1
Les 4 voorbeeld 2a
Les 4 voorbeeld 2b

Les 4 voorbeeld 2b

Wat gebeurt er als we button = !button naar de draw verhuizen? Waarom?
Een botsende bal
Een variabele voor positie bij te houden:
x = 0;

We willen 1 pixel naar rechts verplaatsen:
x = x + 1;
H...
Een botsende bal
x = x + 1;
x = x – 1;
Dit kan worden herschreven als
x = x + snelheid
Door de snelheid in een aparte vari...
Les 4 voorbeeld 3a
Met zwaartekracht!
Les 4 voorbeeld 3b

Zwaarterkracht neemt toe naarmate je de grond nadert, dus moet ook
speed toenemen. ...
Upcoming SlideShare
Loading in …5
×

Processing Werkcollege 3 - condities

693 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
693
On SlideShare
0
From Embeds
0
Number of Embeds
236
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Processing Werkcollege 3 - condities

  1. 1. Multimedia Technology 2 Lessenreeks door Tom Luyten voor Communicatie- en Multimedia Design Maastricht Werkcollege 3 Condities Gebaseerd op het boek “Learning Processing” door Daniel Schiffman En de PowerPoint van Donald W. Smith
  2. 2. Hoorcollege 3: condities Condities (p.59  80) • Wat is een conditie ? • if, else, else if • Condities gebruiken
  3. 3. conditionals Er is een probleem met ons monster • We kunnen het monster nu autonoom laten bewegen, maar we verliezen het snel uit het oog • Er moet iets gebeuren wanneer het de rand voorbij gaat • Hier hebben we een conditie, of test voor nodig.
  4. 4. Hoorcollege 3: condities Condities (p.59  80) • Wat is een conditie ? • if, else, else if • Condities gebruiken • Logical operators • Beslissingsboom • boolean
  5. 5. conditionals Wat is een conditional/conditie ? • Een test • Meestal een vergelijking Is 20 groter dan 10  ja Is 10 groter dan 20  neen Als de test WAAR is, wordt de code uitgevoerd, anders niet Vb. In geschreven taal: Als mouseX groter is dan 10, Dan wordt de achtergrond rood.
  6. 6. conditionals Soorten tests die je binnen een conditional kan uitvoeren: > groter dan < kleiner dan >= groter dan of gelijk aan <= kleiner dan of gelijk aan == gelijk aan != niet gelijk aan
  7. 7. conditionals 10 min. Maak een programma waar de achtergrond wit kleurt wanneer de muis zich links van het scherm bevindt, En zwart wanneer de muis zich rechts bevindt.
  8. 8. conditionals 10 min. Pas het gemaakte programma aan, Zodat de achtergrond zwarter wordt als de muis links staat, En witter als de muis rechts staat. Tip: Sla de kleur op als een variabele, Laat die toenemen (kleur+1) en afnemen (kleur-1)
  9. 9. conditionals Wat is er mis met dit programma ? Als kleur boven 255 komt, of onder 0  fout Oplossing?
  10. 10. constrain if (r > 255) { r = 255; } if (r < 0) { r = 0; } Kan geschreven worden als: r = constrain(r,0,255); Goede manier om fouten te voorkomen
  11. 11. conditionals Haal de sketch van het vierkantje erbij. Kunnen we nu het probleem oplossen dat het uit beeld verdwijnt?
  12. 12. conditionals Hoe luidt de test die wij willen uitvoeren ? In mensentaal: Als het vierkantje het venster verlaat, langs rechts, moet het van richting veranderen. Wat weten we over de positie van het vierkant? Waar wordt die bijgehouden? - vierkantX Wat weten we over de rechterrand van het venster ? Hoe kunnen we die aanduiden ? - width
  13. 13. conditionals - Dus als vierkantX groter is dan width omkeren In code: if(vierkantX > width){ vierkantX van richting veranderen… } - We houden richting nu bij als +1 of ++ - We moeten ook de richting in een variabele stoppen - Als we dan deze variabele aanpassen, kunnen we de richting beïnvloeden if(vierkantX > width){ richting = -richting; } vierkantX= vierkantX + richting;
  14. 14. conditionals Hoe luidt de test die wij willen uitvoeren ? In mensentaal: Als het vierkantje het venster verlaat, langs rechts, moet het van richting veranderen. Wat weten we over de positie van ons vierkant? Waar wordt die bijgehouden? - vierkantX Wat weten we over de rechterrand van het venster ? Hoe kunnen we die aanduiden ? - width
  15. 15. conditionals 10 min. Pas het gemaakte programma aan, Zodat het vierkantje links en rechts binnen het venster blijft, Door aan de rand van richting te veranderen.
  16. 16. conditionals Pas het gemaakte programma aan, Zodat het vierkantje links en rechts binnen het venster blijft, Door aan de rand van richting te veranderen.
  17. 17. Logical operators
  18. 18. Logical operators We kennen nu het simpele IF statement, Handig, maar beperkt Wat als ik nu het volgende wil doen? - als ik 37 graden koorts heb EN ik heb hoofdpijn  dokter - als ik hoofdpijn heb OF ik heb spierpijn  dokter Tijdens het programmeren: als de muis aan de rechterkant EN de onderkant van het scherm is, teken een rechtoek
  19. 19. Logical operators Testen of de muis links of rechts van het venster zat, deden we zo: if (mouseX < width/2) { //voor links r = r + 1; } if (mouseX > width/2) { //voor rechts r = r - 1; } Maar nu wil ik weten of mijn muis in de linkerbovenhoek zit, Hoe doe ik dat?
  20. 20. Logical operators Logische AND && Logische OR || Logische NIET ! Bovengenoemd voorbeeld wordt dan: if(mouseX < width/2 && mouseY < height/2){}
  21. 21. Beslissingsboom if(x<20){ fill(255,0,0); } if(x<50){ fill(0,255,0); }
  22. 22. Beslissingsboom if(x<20){ fill(255,0,0); } else if(x<50){ fill(0,255,0); }
  23. 23. Beslissingsboom Toepassing: bv.: als deze knop aan staat, De rest negeren. if(knop == aan){ game over } else if(level == bla){ qsdf }
  24. 24. Beslissingsboom
  25. 25. Beslissingsboom OPGAVE A OPGAVE B int x = 75 int x = 75 if(x > 80){ if(x > 50){ println(x+”is greater than 80”); println(x+”is greater than 25”); } } else if (x > 25){ else if (x > 25){ println(x+”is greater than 25”); } println(x+”is greater than 50”); } Wat is de uitkomst van deze verschillende opgaven? Waarom?
  26. 26. Beslissingsboom Opgave C Opgave D int x = 5 int x = 5 println(“x is now” + x); println(“x is now” + x); if(x == 5){ if(x == 5){ x = 6; x = 6; } } if(x == 6){ Else if(x == 6){ x = 5; x = 5; } } println(“x is now” + x); println(“x is now” + x); Wat is de uitkomst van deze verschillende opgaven? Waarom? Let op het verschil tussen het gebruik van if en if, else if, else… Merk ook het verschil op tussen enkele = en dubbele ==
  27. 27. Condities Merk ook het verschil op tussen enkele = en dubbele == if(x == 5){} een dubbel == teken geeft aan dat je 2 zaken met elkaar wil vergelijken, komt voor in een TEST count = 5; een enkel = teken komt voor als je een getal aan een variabele wil toewijzen (iets in de doos stoppen)
  28. 28. Boolean
  29. 29. Boolean variabele Een boolean = een variabele waar we true of false kunnen in opslaan en onthouden. Dit kan worden gebruikt om iets aan of uit te zetten en de status ervan langere tijd vast te houden.
  30. 30. Boolean variabele Boolean omkeren als true, dan false als false, dan true boolean test test = !test
  31. 31. Zorg ervoor dat je monstertje rond beweegt, en van richting veranderd zodra het de kant raakt. Gebruik een teller die optelt als de kant wordt geraakt. Wanneer de teller 10 is, wordt een boolean “test” omgezet (van true naar false of omgekeerd). Staat deze aan, dan heeft het monster 1 kleur, Staat hij uit, een andere.
  32. 32. Uitbreiding: optioneel
  33. 33. Meerdere rollovers Les 4 voorbeeld 1
  34. 34. Les 4 voorbeeld 2a
  35. 35. Les 4 voorbeeld 2b Les 4 voorbeeld 2b Wat gebeurt er als we button = !button naar de draw verhuizen? Waarom?
  36. 36. Een botsende bal Een variabele voor positie bij te houden: x = 0; We willen 1 pixel naar rechts verplaatsen: x = x + 1; Hetzelfde naar links wordt: x = x – 1; In programmeren moet je patronen leren herkennen, Dat wil zeggen dat je efficiënter kan werken. x = x + 1; x = x – 1; Is een patroon
  37. 37. Een botsende bal x = x + 1; x = x – 1; Dit kan worden herschreven als x = x + snelheid Door de snelheid in een aparte variabele te stoppen, kunnen we deze veel makkelijker aanpassen/laten variëren. Om van richting te wisselen kunnen we snelheid * -1 doen. 2 * -1 wordt dan – 2 en -2 * -1 wordt dan 2
  38. 38. Les 4 voorbeeld 3a
  39. 39. Met zwaartekracht! Les 4 voorbeeld 3b Zwaarterkracht neemt toe naarmate je de grond nadert, dus moet ook speed toenemen. Door bij speed telkens 0.1 bij te tellen simuleren we zwaartekracht.

×