Processing Werkcollege 2 - variabelen

download Processing Werkcollege 2 - variabelen

of 29

  • date post

    08-Jul-2015
  • Category

    Technology

  • view

    208
  • download

    1

Embed Size (px)

Transcript of Processing Werkcollege 2 - variabelen

Dia 1

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

Werkcollege 2VariabelenGebaseerd op het boek Learning Processing door Daniel SchiffmanEn de PowerPoint van Donald W. Smith

Portfolio Open ProcessingEigen portfolioClassroomVariabelen (p. 45 58)Wat is een variabele?Declaratie en initialisatieSysteemvariabelenWerkcollege 2: variabelenMaak een account aan op: www.openprocessing.org

Upload je eerste sketch naar je portfolioCopy/paste code (gemakkelijk)Export/uploadOpen Processing Portfolio

Open Processing Portfolio

Portfolio Open ProcessingEigen portfolioClassroomVariabelen (p. 45 58)Wat is een variabele?Declaratie en initialisatieSysteemvariabelenWerkcollege 2: variabelenOpen Processing Classroom

Portfolio Open ProcessingEigen portfolioClassroomVariabelen (p. 45 58)Wat is een variabele?Declaratie en initialisatieSysteemvariabelenWerkcollege 2: variabelenWat 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,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.Variabelen

Wat is een variabele?

De inhoud van zon doos blijft niet hetzelfde, het hele punt van een variabele is natuurlijk dat deze kan variren

Toms scoreBillys score10 520153030VariabelenBeeld je even het spelletje PONG in.Welke variabelen zou je nodig hebben om dit spel te programmeren?Variabelen

Portfolio Open ProcessingEigen portfolioClassroomVariabelen (p. 45 58)Wat is een variabele?Declaratie en initialisatieSysteemvariabelenWerkcollege 2: variabelenDeclaratie

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 letterHerhaling: declaratie en initiatie

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: nieuweVariabeleVariabelen : declarerenAlle primitieve typen variabelen

booleantrue of falsechareen karakter, a, b, byteeen klein getal (van -128 tot 127)shorteen groter getal (van -32768 tot 32767)inteen groot getal (van -2147483648 tot 2147483647)longeen gigantisch getalfloateen decimaal getal, 3,5742doubleeen decimaal getal met veel plaatsen achter de komma

Variabelen : typen3 zeer belangrijk: boolean, float, intInitiatie

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;Variabelen : initiatieZonder variabelenVariabelen

Met variabelenResultaat is nu identiek, maar al wel een stuk beter leesbaar.denk eraan dat een variabele kan variren, dat is de drijfveer van interactie.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 vermeerderdVariabelenMaak 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.Variabelen

10 min.

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 ?

VoorbeeldcircleX = circleX + 1circleX++

Hoe kunnen we de cirkel dubbel zo snel laten bewegen?

Vertaal het vorige voorbeeld zo dat in plaats van dat de cirkel van links naar rechts beweegt, dat hij in grootte toeneemt.

Opdracht

10 min.Portfolio Open ProcessingEigen portfolioClassroomVariabelen (p. 45 58)Wat is een variabele?Declaratie en initialisatieSysteemvariabelenWerkcollege 2: variabelenDeze namen vermijd je best in het declareren van je eigen variabelen omdat ze zijn gereserveerd.

widthgeeft de breedte van de sketch terugheightgeeft de hoogte van de sketch terugframeCountgeeft het aantal frames terug dat is verwerktframeRategeeft het aantal frames per seconde terugscreen.widthgeeft de breedte van het hele scherm terugscreen.heightgeeft de hoogte van het hele scherm terugKeygeeft de recentst ingedrukte toets terugkeyCodegeeft de numerieke code van laatste toetskeyPressedgeeft true of false terug naar gelang een toets is ingedruktmousePressedgeeft true of false terug naar gelang een muisknop wordt ingedruktmouseButtongeeft left, right of center terug.Herhaling: Systeemvariabelenwidth 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.Systeemvariabelen

width/2height/2width/2, height/2SysteemvariabelenTeken 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

10 min.OpdrachtHerschrijf 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