Naar een cartografie van condities voor werkplekleren in ...
Processing Werkcollege 3 - condities
-
Upload
tom-luyten -
Category
Technology
-
view
225 -
download
0
Transcript of Processing Werkcollege 3 - condities
![Page 1: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/1.jpg)
Multimedia Technology 2Lessenreeks 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
![Page 2: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/2.jpg)
Condities (p.59 80)• Wat is een conditie ?
• if, else, else if
• Condities gebruiken
Hoorcollege 3: condities
![Page 3: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/3.jpg)
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.
conditionals
![Page 4: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/4.jpg)
Condities (p.59 80)• Wat is een conditie ?
• if, else, else if
• Condities gebruiken
• Logical operators
• Beslissingsboom
• boolean
Hoorcollege 3: condities
![Page 5: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/5.jpg)
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.
conditionals
![Page 6: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/6.jpg)
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
conditionals
![Page 7: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/7.jpg)
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.
conditionals
10 min.
![Page 8: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/8.jpg)
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)
conditionals
10 min.
![Page 9: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/9.jpg)
Wat is er mis met dit programma ?
Als kleur boven 255 komt, of onder 0 fout
Oplossing?
conditionals
![Page 10: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/10.jpg)
if (r > 255) {
r = 255;
}
if (r < 0) {
r = 0;
}
Kan geschreven worden als:
r = constrain(r,0,255);
constrain
Goede manier om fouten te voorkomen
![Page 11: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/11.jpg)
Haal de sketch van het vierkantje erbij.
Kunnen we nu het probleem oplossen dat het uit beeld verdwijnt?
conditionals
![Page 12: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/12.jpg)
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
conditionals
![Page 13: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/13.jpg)
- 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;
conditionals
![Page 14: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/14.jpg)
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
conditionals
![Page 15: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/15.jpg)
Pas het gemaakte programma aan,
Zodat het vierkantje links en rechts binnen het venster blijft,
Door aan de rand van richting te veranderen.
conditionals
10 min.
![Page 16: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/16.jpg)
Pas het gemaakte programma aan,
Zodat het vierkantje links en rechts binnen het venster blijft,
Door aan de rand van richting te veranderen.
conditionals
![Page 17: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/17.jpg)
Logical operators
![Page 18: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/18.jpg)
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
Logical operators
![Page 19: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/19.jpg)
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?
![Page 20: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/20.jpg)
Logische AND &&
Logische OR ||
Logische NIET !
Bovengenoemd voorbeeld wordt dan:
if(mouseX < width/2 && mouseY < height/2){}
Logical operators
![Page 21: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/21.jpg)
Beslissingsboom
if(x<20){
fill(255,0,0);
}
if(x<50){
fill(0,255,0);
}
![Page 22: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/22.jpg)
Beslissingsboom
if(x<20){
fill(255,0,0);
}
else if(x<50){
fill(0,255,0);
}
![Page 23: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/23.jpg)
Beslissingsboom
Toepassing:
bv.: als deze knop aan staat,
De rest negeren.
if(knop == aan){
game over
}
else if(level == bla){
qsdf
}
![Page 24: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/24.jpg)
Beslissingsboom
![Page 25: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/25.jpg)
OPGAVE A
int x = 75
if(x > 80){
println(x+”is greater than 80”);
}
else if (x > 25){
println(x+”is greater than 25”);
}
Beslissingsboom
OPGAVE B
int x = 75
if(x > 50){
println(x+”is greater than 25”);
}
else if (x > 25){
println(x+”is greater than 50”);
}
Wat is de uitkomst van deze verschillende opgaven? Waarom?
![Page 26: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/26.jpg)
Opgave C
int x = 5
println(“x is now” + x);
if(x == 5){
x = 6;
}
if(x == 6){
x = 5;
}
println(“x is now” + x);
Beslissingsboom
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 ==
Opgave D
int x = 5
println(“x is now” + x);
if(x == 5){
x = 6;
}
Else if(x == 6){
x = 5;
}
println(“x is now” + x);
![Page 27: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/27.jpg)
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)
![Page 28: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/28.jpg)
Boolean
![Page 29: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/29.jpg)
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.
Boolean variabele
![Page 30: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/30.jpg)
Boolean omkerenals true, dan false
als false, dan true
boolean test
test = !test
Boolean variabele
![Page 31: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/31.jpg)
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.
![Page 32: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/32.jpg)
Uitbreiding: optioneel
![Page 33: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/33.jpg)
Meerdere rollovers
Les 4 voorbeeld 1
![Page 34: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/34.jpg)
Les 4 voorbeeld 2a
![Page 35: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/35.jpg)
Wat gebeurt er als we button = !button naar de draw verhuizen? Waarom?
Les 4 voorbeeld 2b
Les 4 voorbeeld 2b
![Page 36: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/36.jpg)
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
Een botsende bal
![Page 37: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/37.jpg)
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
Een botsende bal
![Page 38: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/38.jpg)
Les 4 voorbeeld 3a
![Page 39: Processing Werkcollege 3 - condities](https://reader034.fdocuments.nl/reader034/viewer/2022051617/55a478b11a28abe9268b4800/html5/thumbnails/39.jpg)
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.