Processing intro course - les 2 : Interactie

Transcript

1. Multimedia technologie Les 2: Interactie Gebaseerd op het boek “Learning Processing” door Daniel Schiffman En de PowerPoint van Donald W. Smith
2. Interactie (p. 31 à 42) •  De Flow van een programma •  setup() en draw() •  Interactie met de muis •  Je eerste dynamische schets •  events Les 2 : Interactie
3. Interactie
4. Flow
5. •  Een game start met een set condities •  Je stelt de naam van je figuur in •  Je start met en score van 0 punten •  … •  Dit deel van het programma noemen we SETUP •  Daarna begin je het game te spelen •  Elk moment checkt de computer wat jij aan het doen bent met je muis of keyboard •  En past het scherm hiernaar aan •  Deze cyclus gebeurt een 30 tal keer per seconde en blijft herhalen tot je het game stopt •  Dit deel van het programma noemen we DRAW Flow
6. •  Stap 1: schoenen aandoen, binden •  Stap 2: zet je linkervoet voor je rechter, herhaal zo snel je kan •  Stap 3: na 5km, stop. Flow
7. setup() en draw()
8. setup() en draw() 1a,1b,1c,2a,2b,2a,2b,….
9. Eerste dynamische schets •  Onze sketch moet worden opgedeeld in setup(); voor de initialisatie van het programma en draw(); voor de loop. •  setup(); en draw(); zijn codeblokken •  Codeblokken beginnen met een { en eindigen met een } •  Door te tekst te laten inspringen geven we aan tot welk blok de code behoort (edit à auto format) setup() en draw()
10. setup() en draw()
11. { Code in een blok } { code in een blok { code in een sub blok code in hetzelfde sub blok } } Codeblokken worden ook wel methoden of methods genoemd setup() en draw()
12. eerste “dynamische” schets
13. Herschrijf je statische schets van je monstertje als dynamische schets door gebruik te maken van de indeling setup(); en draw(); Eerste dynamische schets
14. Eerste dynamische schets
15. Eerste dynamische schets Edit à auto-format
16. •  Er veranderd niets als we de sketch runnen •  Identiek aan onze statische sketch Waarom? Eerste dynamische schets
17. •  Er veranderd niets als we de sketch runnen •  Identiek aan onze statische sketch •  Dit komt omdat er niks varieert binnen draw() ! Eerste dynamische schets
18. Interactie met de muis
19. Coördinaten van de muis uitlezen •  In plaats van statisch zelf een cijfer te typen, gebruiken we de locatie van de muis •  mouseX en mouseY Interactie met de muis
20. Interactie met de muis Verplaats background(255) eens naar setup. Wat gebeurt er?
21. Plaats vormen relatief tot muiscoordinaat •  Alles wat je op (mouseX, mouseY) plaatst zal op identiek dezelfde plaats als de muis verschijnen. •  Wil je vormen die de muis volgen op een afstand, dan plaats je ze op een afstand relatief tot de muis coördinaat •  ellipse(mouseX – 30, mouseY + 50, 50,50); plaatst een ellipse 30 punten links en 50 punten onder de coördinaten van de muis. Interactie met de muis
22. Interactie met de muis
23. Interactie met de muis Herschrijf je schets, zodat het monstertje in zijn volledigheid de muis volgt.
24. events
25. Muis clicks en toetsaanslagen •  Nieuwe, 3de blok code naast setup() en draw() •  mousePressed(); •  keyPressed(); •  Net zoals bij setup wordt deze code 1 maal en slechts 1 maal uitgevoerd als het event zich voordoet. •  Het event (een muisklik bv.) kan zich meerder keren voordoen (dit kan niet bij setup();) Events
26. Events
27. Ga door op de eerste opdracht en maak je eigen monstertje interactief door interactie met muis en keyboard te interageren. Laat het bewegen, verander de kleur,… Vergeet geen commentaar te plaatsen. Opdracht