Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Multimedia Technology 2
Lessenreeks door Tom Luyten
voor Communicatie- en Multimedia Design Maastricht

Werkcollege 2

Var...
Werkcollege 2: variabelen
Portfolio Open Processing
• Eigen portfolio
• Classroom

Variabelen (p. 45  58)
• Wat is een va...
Open Processing Portfolio
- Maak een account aan op: www.openprocessing.org
- Upload je eerste sketch naar je portfolio
- ...
Open Processing Portfolio
Werkcollege 2: variabelen
Portfolio Open Processing
• Eigen portfolio
• Classroom

Variabelen (p. 45  58)
• Wat is een va...
Open Processing Classroom
Werkcollege 2: variabelen
Portfolio Open Processing
• Eigen portfolio
• Classroom

Variabelen (p. 45  58)
• Wat is een va...
Variabelen
Wat is een variabele?
•

Een variabele is een naam die verwijst naar een locatie in het
geheugen van de compute...
Variabelen
Wat is een variabele?
•

Beeld je een variabele in als een doos.

•

Er zijn verschillende soorten dozen, waar ...
Variabelen
Wat is een variabele?
De inhoud van zo‟n doos blijft niet hetzelfde, het hele punt van een
variabele is natuurl...
Variabelen
Beeld je even het spelletje PONG in.
Welke variabelen zou je nodig hebben om dit spel te programmeren?
Werkcollege 2: variabelen
Portfolio Open Processing
• Eigen portfolio
• Classroom

Variabelen (p. 45  58)
• Wat is een va...
Herhaling: declaratie en initiatie
Declaratie
Je declareert een variabele door eerst het type aan te
geven, gevolgd door e...
Variabelen : declareren
Toekennen van namen
•

Kies steeds een naam met betekenis

•

Let op dat de naam geen systeemvaria...
Variabelen : typen
Alle primitieve typen variabelen
• boolean

true of false

• char

een karakter, „a‟, „b‟, …

• byte

e...
Variabelen : initiatie
Initiatie
Eens een variabele is gedeclareerd, kunnen we hem initialiseren
(= er een waarde aan toek...
Variabelen
Zonder variabelen
Variabelen
Met variabelen

Resultaat is nu identiek, maar al wel een stuk beter leesbaar.
denk eraan dat een variabele kan...
Variabelen
In het vorige voorbeeld zijn de waarden 200, 200 vervangen door de
variabelen circleX en CircleY.
Dit zijn nu g...
Variabelen
10 min.

Maak een sketch aan,
Met een grootte van 300 op 300 pixels en een witte achtergrond.
Waarin een rood v...
Voorbeeld

We willen nu dat de cirkel naar rechts beweegt
- Welke variabelen zijn er aanwezig in het programma?

- Welke w...
- circleX = circleX + 1
- circleX++

Hoe kunnen we de cirkel
dubbel zo snel laten
bewegen?
Opdracht

10 min.
Vertaal het vorige voorbeeld zo dat in plaats van dat de cirkel
van links naar rechts beweegt, dat hij i...
Werkcollege 2: variabelen
Portfolio Open Processing
• Eigen portfolio
• Classroom

Variabelen (p. 45  58)
• Wat is een va...
Herhaling: Systeemvariabelen
Deze namen vermijd je best in het declareren van je eigen variabelen
omdat ze zijn gereservee...
Systeemvariabelen
width en height geven de waarden terug die je bij size() aangeeft. Dat wil
zeggen dat als je size(400,30...
Systeemvariabelen
10 min.
Teken een programma met een zwarte achtergrond, waar een witte lijn het
venster van boven naar o...
Opdracht
Herschrijf je monster/figuur, zodat de hard-gecodeerde waarden
worden vervangen door variabelen.
Pak het zo aan d...
Processing Werkcollege 2 - variabelen
Upcoming SlideShare
Loading in …5
×

Processing Werkcollege 2 - variabelen

813 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Processing Werkcollege 2 - variabelen

  1. 1. Multimedia Technology 2 Lessenreeks door Tom Luyten voor Communicatie- en Multimedia Design Maastricht Werkcollege 2 Variabelen Gebaseerd op het boek “Learning Processing” door Daniel Schiffman En de PowerPoint van Donald W. Smith
  2. 2. Werkcollege 2: variabelen Portfolio Open Processing • Eigen portfolio • Classroom Variabelen (p. 45  58) • Wat is een variabele? • Declaratie en initialisatie • Systeemvariabelen
  3. 3. Open Processing Portfolio - Maak een account aan op: www.openprocessing.org - Upload je eerste sketch naar je portfolio - Copy/paste code (gemakkelijk) - Export/upload
  4. 4. Open Processing Portfolio
  5. 5. Werkcollege 2: variabelen Portfolio Open Processing • Eigen portfolio • Classroom Variabelen (p. 45  58) • Wat is een variabele? • Declaratie en initialisatie • Systeemvariabelen
  6. 6. Open Processing Classroom
  7. 7. Werkcollege 2: variabelen Portfolio Open Processing • Eigen portfolio • Classroom Variabelen (p. 45  58) • Wat is een variabele? • Declaratie en initialisatie • Systeemvariabelen
  8. 8. Variabelen Wat is een variabele? • Een variabele is een naam die verwijst naar een locatie in het geheugen van de computer • Ze laten ons toe informatie op te slaan en later weer op te roepen • Variabelen kunnen informatie opslaan zoals kleur, grootte, locatie,…
  9. 9. Variabelen Wat is een variabele? • Beeld je een variabele in als een doos. • Er zijn verschillende soorten dozen, waar verschillende inhouden inpassen (bv. Tupperware voor voedsel, kartonnen doos voor papier,…) • Op de doos plak je een label met een naam om deze later terug te vinden.
  10. 10. Variabelen Wat is een variabele? De inhoud van zo‟n doos blijft niet hetzelfde, het hele punt van een variabele is natuurlijk dat deze kan variëren Tom‟s score Billy‟s score 10 5 20 15 30 30
  11. 11. Variabelen Beeld je even het spelletje PONG in. Welke variabelen zou je nodig hebben om dit spel te programmeren?
  12. 12. Werkcollege 2: variabelen Portfolio Open Processing • Eigen portfolio • Classroom Variabelen (p. 45  58) • Wat is een variabele? • Declaratie en initialisatie • Systeemvariabelen
  13. 13. Herhaling: declaratie en initiatie Declaratie Je declareert een variabele door eerst het type aan te geven, gevolgd door een naam • (je zegt dus wat voor soort doos (één voor gehele getallen) en geeft aan welke naam ze krijgt (bv. Tom)) • De naam moet 1 woord zijn, zonder spaties, en moet beginnen met een letter
  14. 14. Variabelen : declareren Toekennen van namen • Kies steeds een naam met betekenis • Let op dat de naam geen systeemvariabele is, deze zijn gereserveerd (draw, setup,…) (deze krijgen doorgaans een blauwe kleur) • Begin je naam met kleine letter, geef elk nieuw woord een hoofdletter: nieuweVariabele
  15. 15. Variabelen : typen Alle primitieve typen variabelen • boolean true of false • char een karakter, „a‟, „b‟, … • byte een klein getal (van -128 tot 127) • short een groter getal (van -32768 tot 32767) • int een groot getal (van -2147483648 tot 2147483647) • long een gigantisch getal • float een decimaal getal, 3,5742 • double een decimaal getal met veel plaatsen achter de komma 3 zeer belangrijk: boolean, float, int
  16. 16. Variabelen : initiatie Initiatie Eens een variabele is gedeclareerd, kunnen we hem initialiseren (= er een waarde aan toekennen) int count; = een doos voor gehele getallen, met de naam “count” count = 50; = stop de waarde 50 in de doos “count” of int count = 50;
  17. 17. Variabelen Zonder variabelen
  18. 18. Variabelen Met variabelen Resultaat is nu identiek, maar al wel een stuk beter leesbaar. denk eraan dat een variabele kan variëren, dat is de drijfveer van interactie.
  19. 19. Variabelen In het vorige voorbeeld zijn de waarden 200, 200 vervangen door de variabelen circleX en CircleY. Dit zijn nu geen hard gecodeerde cijfers meer, maar doosjes, waarvan de waarde die erin zit kan veranderen. Wat gebeurt er bij volgende voorbeelden: • tel elk frame 1 bij circleX • bij een druk op de knop wordt circleY met 50 vermeerderd
  20. 20. Variabelen 10 min. Maak een sketch aan, Met een grootte van 300 op 300 pixels en een witte achtergrond. Waarin een rood vierkant is te zien van 50 pixels diameter, Aan de linkerkant van het venster Maak gebruik van variabelen.
  21. 21. Voorbeeld We willen nu dat de cirkel naar rechts beweegt - Welke variabelen zijn er aanwezig in het programma? - Welke waarde van welke variabele moeten we veranderen ? - Welke verandering moet hij ondergaan ? - Hoe vaak moet dat gebeuren ?
  22. 22. - circleX = circleX + 1 - circleX++ Hoe kunnen we de cirkel dubbel zo snel laten bewegen?
  23. 23. Opdracht 10 min. Vertaal het vorige voorbeeld zo dat in plaats van dat de cirkel van links naar rechts beweegt, dat hij in grootte toeneemt.
  24. 24. Werkcollege 2: variabelen Portfolio Open Processing • Eigen portfolio • Classroom Variabelen (p. 45  58) • Wat is een variabele? • Declaratie en initialisatie • Systeemvariabelen
  25. 25. Herhaling: Systeemvariabelen Deze namen vermijd je best in het declareren van je eigen variabelen omdat ze zijn gereserveerd. width geeft de breedte van de sketch terug height geeft de hoogte van de sketch terug frameCount geeft het aantal frames terug dat is verwerkt frameRate geeft het aantal frames per seconde terug screen.width geeft de breedte van het hele scherm terug screen.height geeft de hoogte van het hele scherm terug Key geeft de recentst ingedrukte toets terug keyCode geeft de numerieke code van laatste toets keyPressed geeft true of false terug naar gelang een toets is ingedrukt mousePressed geeft true of false terug naar gelang een muisknop wordt ingedrukt mouseButton geeft left, right of center terug.
  26. 26. Systeemvariabelen width en height geven de waarden terug die je bij size() aangeeft. Dat wil zeggen dat als je size(400,300); instelt, dat width 400 is, en height 300. Hoe kan je deze systeemvariabelen handig gebruiken? • om een grootte onafhankelijke sketch te maken (als je bv. Niet weet op welk scherm je software zal terecht komen) • width/2 en heigth/2 geven je altijd het horizontale en verticale midden van je sketch terug. width/2 height/2 width/2, height/2
  27. 27. Systeemvariabelen 10 min. Teken een programma met een zwarte achtergrond, waar een witte lijn het venster van boven naar onder in 2 delen verdeelt. Het mag niet uitmaken hoe groot je sketch is. Tip: Gebruik hiervoor de systeemvariabelen width, height, width/2 en height/2
  28. 28. Opdracht Herschrijf je monster/figuur, zodat de hard-gecodeerde waarden worden vervangen door variabelen. Pak het zo aan dat je twee variabelen hebt die de positie van je volledige monster bepalen: monsterX, monsterY. (tip: kijk naar je vorige schets: mouseX, mouseY) Stappen: - Begin door het monster op een vaste plaats te zetten - Het monster/figuur beweegt zich naar boven - Uitbreiding: Kan je ervoor zorgen dat het monstertje horizontaal de muis volgt, en verticaal in het midden blijft ? (tip: hier heb je de systeemvariabele mouseX voor nodig) Merk op hoe gemakkelijk de positie nu te updaten is

×