Les 3: Laat je karakter bewegen

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

Introduction

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

Instructions

Voorkennis van leerlingen

Leerlingen moeten eerst les 1 en 2 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...

• Kan je gebruik een figuur met je muis mee laten bewegen door relatieve coördinaten te gebruiken. 
• Kan je een karakter een beweging laten uitvoeren.

Aansluiting curriculum

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

• Programmeren
  

Ondertitel

Hoe programmeer je een animatie?

Les 3: Laat je karakter bewegen

Les 1. Wat is creativiteit?

Interacties

Een plaatje maken is leuk, een bewegend plaatje is nog leuker.

Maar het leukste is als je als gebruiker objecten op jouw commando kunt laten bewegen, als je ze kunt aansturen. Misschien wil je je karakter over het scherm laten lopen, of hem van kleur laten veranderen als je klikt. 

Daar gaan we deze module mee aan de slag.

Les 1. Wat is creativiteit?

Leerdoelen

Na deze les...

• Kan je een figuur met je muis mee laten bewegen in Processing door relatieve coördinaten te gebruiken.
  
• Kan je een karakter een beweging laten uitvoeren.

Les 1. Wat is creativiteit?

Beweging!

Je zusje Pien is helemaal weg van Harry. Ze wil er graag mee spelen: de armen laten bewegen of de hele sneeuwpop.

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

Les 1. Wat is creativiteit?

Objecten bewegen

Je kan inmiddels een leuke karakter maken in 

Processing. Maar het zou veel leuker zijn als 

je een plaatje ook interactief kan maken. 

Hoe zou het zijn, als Harry door je muis aangestuurd kan worden, dus meebeweegt met de beweging van de muis?

Dat kan als je de vormen niet op een vaste plek op je canvas neerzet maar de x- en y-coördinaten van je muis gebruikt om de plek te bepalen. 

In Processing gebruiken we daarvoor mouseX en mouseY.

Les 1. Wat is creativiteit?

Opdracht: objecten verplaatsen

1. Neem het programma over dat je rechts ziet staan.
2. Voer het uit: wat zie je?
   
3. Vervang nu bij de commando's ellipse de coordinaten x en y door mouseX en de y-waarde door mouseY (LET OP de hoofdletter X en Y!).
4. Je krijgt dus 
      ellipse(mouseX, mouseY, 150, 150); 
    
   
5. Voer je programma uit.
   Wat doet het nu? En als je de muis beweegt?

Les 1. Wat is creativiteit?

Teveel vormen

In de vorige opdracht heb je gezien hoe je ervoor kunt zorgen dat een object wordt getekend op de plek waar de muis zich bevindt. 

Als je vervolgens de muis beweegt, ontstaan er echter heel veel cirkels!

Dat is niet wat je wilde.

Wat is er aan de hand?

Les 1. Wat is creativiteit?

Waarom zoveel vormen?

Om te begrijpen wat er gebeurt, moet je weten hoe programma's in processing worden uitgevoerd:

1. 'Void setup' wordt bij het uitvoeren van een programma als allereerste één enkele keer uitgevoerd. 
2. 'Void draw' wordt vervolgens telkens opnieuw uitgevoerd. De commando's die in 'void draw' staan, worden dus onophoudelijk doorlopen (denk aan het refreshen van het beeld op je monitor, dat gebeurt ook voortdurend).
3. Als er niets verandert, zie je dat niet.
   Maar als je de muis beweegt, wordt de vorm op elke nieuwe positie opnieuw getekend. 

Les 1. Wat is creativiteit?

Vormen 'wissen' 

Bij het bewegen van de muis tekent processing op elke nieuwe positie opnieuw de vormen: een cirkel en een rechthoek. De eerder getekende vormen blijven allen staan.

Hoe kun je dat veranderen? 

Door een vorm op de oude positie te verwijderen voordat deze op een nieuwe positie wordt getekend. 

Je kunt een vorm 'wissen' door er een 'achtergrond' overheen te leggen. Dit moet altijd gedaan worden voordat iets op een nieuwe positie wordt getekend, dus in de 'void draw'. 

Les 1. Wat is creativiteit?

Opdracht - achtergrond 'kleuren'

1. Neem je vorige programma
2. Verplaats de regel 'background(250)' van de 'setup' naar de 'draw' (zoals in de code rechts).
3. Voer je code uit. Wat gebeurt er als je de muis beweegt?
   
   
4. Voeg nu de regel 
      background(0,50,200); 
   achter de regel '//hoed' toe.
   
5. Voer je programma uit.
6. Wat gebeurt er nu?
7. Hoe kun je dat verklaren?

Er wordt eerst een ellips getekend, daarna wordt met het commando ‘background(0,50,200)’ een achtergrond eroverheen getekend. Daardoor wordt de ellips onzichtbaar en zie je alleen nog de rechthoek die op de (nieuwe) achtergrond wordt getekend. 

Les 1. Wat is creativiteit?

Opdracht: Harry verplaatsen

1. Pak nu je programma erbij waarmee je sneeuwpop Harry kunt tekenen.
2. Vervang in je programma alle x-coördinaten door 'mouseX' en en alle y-coördinaten door 'mouseY'.
3. Set de code voor de achtergrond op de goede plek.
   
   
4. Voer je programma uit. Wat gebeurt er?
   
   

Als het goed is, beweegt de sneeuwpop nu met je muis mee, toch?

Open vraag

Wat gebeurt er nu met de sneeuwpop?

Les 1. Wat is creativiteit?

Help, Harry is stuk!

Is het gelukt om Harry met de muis mee te laten bewegen? 

Of bleef de sneeuwpop bij het bewegen niet heel? 

Heb je enig idee waarom dat gebeurt?

Les 1. Wat is creativiteit?

Waarom is Harry stuk?

Je hebt Harry opgebouwd uit verschillende vormen (ellipsen, rechthoeken, etc.).

Elk van die vormen heb je coördinaten mee gegeven. Die waren allemaal verschillend! 

Met mouseX en mouseY hebben al die vormen nu dezelfde coördinaten gekregen, en dan werkt het dus niet. 

Les 1. Wat is creativiteit?

Samen bewegen

Bekijk nog eens het simpele programma waarmee we een hoofd met hoed hebben getekend (zie rechts). 

Hoe staan de hoed en het hoofd ten opzichte van elkaar?

 

Het middelpunt van het hoofd staat op positie (100, 200).

De linker bovenhoek van de hoed staat op positie (40, 60),

dat zijn dus andere coördinaten dan die van het hoofd.

Je kunt de coordinaten van de hoed ten opzichte van de coördinaten van het hoofd berekenen: 

De x-coördinaat van de hoed is 40 = 100-60, dus 60 pixels links van het middelpunt van het hoofd. 

Les 1. Wat is creativiteit?

Relatieve coördinaten

Als je dus meerdere vormen tegelijk wilt verplaatsen bij het bewegen van de muis, moet je het volgende doen:

1. De eerste vorm geef je de coördinaten mouseX en mouseY. 
2. Voor alle vormen gebruik je relatieve coördinaten ten opzichte van de eerste vorm, dus de afstand van mouseX en mouseY. 

Les 1. Wat is creativiteit?

Oefening: Samen bewegen

Probeer het nu zelf uit:

1. Begin met het programma dat rechts staat.
   
2. Vervang het commando 'ellipse(100, 200, 150, 150);' door:
       ellipse(mouseX, mouseY, 150, 150);
   
3. Vervang het commando 'rect(40, 60, 120, 90);' door
       rect(mouseX-60, mouseY-140, 120, 90);
   
4. Start je programma en beweeg met de muis.
   
5. Is het gelukt? Gaat de hele afbeelding meebewegen met de muis?
   Mooi zo!

Les 1. Wat is creativiteit?

Oefening: Lopen met Harry 

Je weet nu hoe je een plaatje dat uit meerdere vormen bestaat, met je muis mee kunt laten bewegen. 

Pak nu je programma voor sneeuwpop Harry of je eigen idee en verander het zo dat je de karakter met je muis mee kunt laten bewegen. 

Les 1. Wat is creativiteit?

Gefeliciteerd!

Na deze les...

• Kan je gebruik een figuur met je muis mee laten bewegen door relatieve coördinaten te gebruiken. 
• Kan je een karakter een beweging laten uitvoeren.

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!