Les 4: bestuur je karakter

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4,5

Introductie

In deze les gaan de leerlingen programmeren met processing. Dit is les 4 van deze lessenserie. Door het programmeren van een eigen karakter leren ze stapsgewijs de basis. Deze les doorlopen leerlingen individueel of in tweetallen.

Instructies

Voorkennis van leerlingen

Leerlingen moeten eerst les 1 tot en met 3 hebben gemaakt van deze lessenserie voordat ze beginnen met deze les. 

Voorbereiding voor docent

• Zorg dat elke leerling een laptop met processing heeft.
• Zorg dat je de les doorgenomen hebt en dat je in staat bent te helpen bij eventuele bugs.

Leerdoelen/vaardigheden

Na deze les...

• Weet je wat systeemvariabelen zijn.
• Weet je wat events zijn. 
• Weet je wat voor interacties je met Processing kan doen.
• Kun je systeemvariabelen uitlezen en if-statements gebruiken om interactie te programmeren.

Aansluiting curriculum

Deze les sluit aan bij de volgende onderwerpen uit het informatica curriculum:

• Programmeren
  

Ondertitel

Hoe programmeer je een animatie?

Les 4: bestuur je karakter

Les 1. Wat is creativiteit?

Harry besturen

In de vorige les heb je geleerd, hoe je je programma voor Harry zo kunt schrijven dat Harry met je muis mee over het Canvas kan bewegen.
Je zusje Pien is er blij mee. 

Maar ze wil meer: ze wil Harry verschillende dingen laten doen, ze wil Harry kunnen besturen. 

Bijvoorbeeld door de knoppen van de muis te gebruiken of de toetsen op het toetsenbord . 

In deze les leer je hoe je dat voor elkaar kunt krijgen. 

Les 1. Wat is creativiteit?

Leerdoelen

Na deze les...

• Weet je wat systeemvariabelen zijn.
• Weet je wat events zijn. 
• Weet je wat voor interacties je met Processing kan doen.
• Kun je systeemvariabelen uitlezen en if-statements gebruiken om interactie te programmeren.

Les 1. Wat is creativiteit?

Events

Je weet nu hoe je figuren met de muis mee kunt laten bewegen. 

Maar je kunt met de muis ook klikken en slepen! 

Kun je Harry daarmee besturen?

Met muis klikken en slepen of een toets indrukken, heet een event.

Tijdens het uitvoeren van een programma kan processing vaststellen of een event plaats heeft gevonden. 

Les 1. Wat is creativiteit?

Events gebruiken

Processing kent verschillende events: 

• (een toets van) de muis indrukken 
• (een toets van) de muis loslaten
• een toets op het toetsenbord indrukken

In je programma wil je kunnen aangeven, wat er bij een event moet gebeuren. 

Bijvoorbeeld: 'Beweeg de linker arm als de linker muisknop wordt ingedrukt.'

Om zo'n programma te kunnen schrijven, moet je variabelen en if-statements leren kennen. 

Les 1. Wat is creativiteit?

Variabelen

Je hebt al kennis gemaakt met variabelen:

mouseX en mouseY zijn namelijk variabelen.

Variabelen zijn een soort post-it notes. 

Je schrijft een naam en een waarde op de post-it en plakt hem op de muur. 

De waarde van een variabele kan steeds weer veranderen, daarom heten ze ook zo.

Variabelen zijn heel erg belangrijk bij het programmeren. 

Les 1. Wat is creativiteit?

Post-its

Toen je Harry met je muis mee liet bewegen, heb je de variabelen mouseX en mouseY gebruikt. 

Zo gaat het met alle variabelen:

Je zet in je programmatekst de naam van een variabele (bijv. ellipse(mouseX, 20, 50, 50);). 

Bij het uitvoeren van het programma wordt dan de waarde van die variabele opgezocht en gebruikt. 

Les 1. Wat is creativiteit?

Ingebouwde post-its

Je kunt in een programma eigen variabelen introduceren. Dat heb je nu nog niet nodig.

Processing kent namelijk al een aantal ingebouwde variabelen, die je niet meer hoeft te introduceren, zoals mouseX en mouseY. 

Deze variabelen heten systeemvariabelen.

Rechts zie je de namen van systeemvariabelen van Processing. Klik voor uitleg op het vraagteken.

Je kunt alle systeemvariabelen in je programma's gebruiken. 

width

de breedte van je canvas

height

de hoogte (lees: 'laagte') van je canvas

key

de toets van het toetsenbord die je als laatste hebt ingedrukt

mousePressed

geeft aan of een muisbutton ingedrukt is

mouseReleased

geeft aan of een muisbutton losgelaten is

keyPressed

geeft aan of er een toets op het toetsenbord ingedrukt is

mouseButton

geeft aan op welke toets van de muis er is geklikt (links, rechts, of midden)

Les 1. Wat is creativiteit?

Post-its

Net zoals er verschillende soorten en maten post-it notes zijn, zijn er ook verschillende soorten variabelen, ook wel types genoemd. Het type van een variabele vertelt, welke waarden een variabele kan aannemen, dus wat er op de post-it mag staan.

De systeemvariabelen (zie vorige dia) hebben verschillende types: integer, character of boolean.

Klik op de uitlegknoppen rechts voor uitleg bij de verschillende types.

Integer (int)

De waarde is een heel getal (1, 2, 3, 55, -5, 0, etc.) in een range van -2,147,483,648.00 tot 2,147,483,647.00

Character (char)

De waarde van de variabele is een enkele letter, zoals a, c en d. Als je een variabele van type char een letter als waarde wil geven, zet je de letter in enkele haken: 'a', 'c', 'd'.

Boolean (bool)

De waarde van een boolean kan true of false zijn.

Sleepopdracht

Welk type heeft de (systeem)variabele?

width

height

mousePressed

keyPressed

mouseReleased

key

Boolean

Int

Char

Les 1. Wat is creativiteit?

Systeem variabelen gebruiken

De waardes van verschillende systeemvariabelen geven aan of een event heeft plaats gevonden, dus of bijvoorbeeld een toets van de muis of op het toetsenbord is ingedrukt en welke dat is. 

Dan kun je in je programma aangeven wat er moet gebeuren als een toets wordt ingedrukt. 

Daarvoor heb je if-statements nodig.

Die gaan we daarom nu uitleggen.

Les 1. Wat is creativiteit?

If-statements

In de echte wereld heb je veel situaties die door een actie gevolgd worden. Als de bel gaat, loop ik naar de deur. Als de wasmand vol zit, ga ik de was doen. In Processing noemen we dit if-statements.

If-statements geven een voorwaarde, 'if(something happens)', en het gevolg als deze voorwaarde van toepassing is, '{do something in response}'.

Dit kan gevolgd worden door een alternatief, 'else':

Als de wasmand vol zit, dan ga ik de was doen, anders (als de mand NIET vol zit) ga ik wandelen.

Het regent nu. Wat is correct?

1. Ik neem een paraplu mee
2. Ik neem geen paraplu mee

Ik heb les morgen, en er is was in de wasmand.

Wat ga ik doen?

1. Ik ga wandelen
2. Ik doe de was
3. Ik ga huiswerk maken

Ik heb morgen geen les, en er is geen was in de wasmand.

Wat is correct?

1. Ik ga wandelen
2. Ik doe de was
3. Ik ga huiswerk maken

Les 1. Wat is creativiteit?

If-statements

Als we willen weten of een toets van de muis is ingedrukt, moeten we de systeemvariabele mousePressed checken: 

• Heeft mousePressed de waarde true?
       Dan is een toets ingedrukt.
• Heeft mousePressed de waarde false?
       Dan is GEEN toets ingedrukt. 
  
  

In processing ziet deze check er zo uit:

• Er is een toets ingedrukt: 
            mousePressed == true
• Er is GEEN toets ingedrukt:
            mousePressed == false

  

Les 1. Wat is creativiteit?

If-statements

Nu kunnen we de systeemvariabele mousePressed checken en daar een actie aan koppelen, dus bijvoorbeeld voor Harry:

   if(muisknop ingedrukt)

      {arm naar beneden} 

   else 

      {arm omhoog}

Rechts zie je hoe je dat in processing zet. 

Background moet in de draw staan zodat de arm telkens maar één positie van de arm zichtbaar is: omhoog of omlaag

Hier wordt gecheckt of een muisknop is ingedrukt

Dit wordt uitgevoerd als geen mousknop is ingedrukt

Les 1. Wat is creativiteit?

Opdracht

Neem nu je eigen programma en verander het zo, dat Harry de arm omlaag doet als je met de muis klikt. 

Probeer dan andere acties uit, met Harry of met je eigen plaatje. 

Belangrijk: 

• Let erop dat het commando 'background(...,...,...)' onder 'void(draw)' staat en niet erboven.
• Kijk uit dat alle haakjes '{' en '}' en '(' en ')' op de goede plek staan.

Les 1. Wat is creativiteit?

Debugging

Het is mooi als je programma werkt.

Maar soms werkt het niet, en dan moet je uitzoeken waar de fout zit.

Processing geeft foutmeldingen in het onderste deel van het scherm, die helpen soms.

Een andere mogelijkheid is om regels uit te commentariëren. Dat betekent dat je commentaar-streepjes '//' voor een commando zet zodat het wordt overgeslagen. 

Kijk vervolgens of je programma nu werkt.

Dit kun je regel voor regel toepassen en uitproberen. 

Les 1. Wat is creativiteit?

Opdracht uit commentariëren

Probeer uit hoe het uit commentariëren werkt: 

1. Neem het programma hier rechts over.
2. Plaats vervolgens de commentaartekens '//' voor de regel met else erin, die regel wordt dus:
          //  } else {
3. Voer je programma uit.
   Wat gebeurt er als je een muisknop indrukt?
4. Plaats nu de commentaartekens een regel lager:
        //    line(50, 200, 110, 270);
5. Voer je programma uit.
6. Wat zie je nu gebeuren als je een muisknop indrukt?
7. Leg uit wat je hebt gezien en waarom het zo werkt.

Les 1. Wat is creativiteit?

Sneeuwpop

Nu heb je alles geleerd wat je nodig hebt om de sneeuwpop of een eigen karakter te tekenen en te animeren. 

Ga aan de slag, laat je fantasie de vrije loop en ontdek wat voor mooie dingen je kunt maken!

Les 1. Wat is creativiteit?

Gefeliciteerd!

Nu...

• Weet je wat systeemvariabelen zijn.
• Weet je wat events zijn. 
• Weet je wat voor interacties je met Processing kan doen.
• Kun je systeemvariabelen uitlezen en if-statements gebruiken om interactie te programmeren.

Les 1. Wat is creativiteit?

Geïnspireerd?

Als je dit een interessant onderwerp vond, dan is een vervolgopleiding in deze richting misschien iets voor jou.

Neem eens een kijkje bij Informatica, Computer Science of Creative Technology (universiteit of HBO).

Weet je welk (vakken)profiel je hiervoor nodig hebt? Zoek dat eens uit!

Les 1. Wat is creativiteit?

De makers van deze les willen graag weten wat je van de les vond. Ga daarvoor naar de (korte) vragenlijst. Heel veel dank!

Feedback gevraagd

ut.onl/leerling4tu

Vragenlijst voor leerlingen

Les 1. Wat is creativiteit?

De makers van deze les willen graag weten wat je van de les vond. Ga daarvoor naar de (korte) vragenlijst. Heel veel dank!

Feedback gevraagd

Vragenlijst voor docenten

ut.onl/docent4tu

Les 1. Wat is creativiteit?

Check www.4tuschools.nl voor meer inspirerende lessen!