Les 3 (1)

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

Games maken en ervaren

Deze les

• Huis met boom programmeren

• Parameters en argumenten in P5
  

Huis met een boom

Pas bekijkJS.html aan naar H1O04.js

In deze opdracht gaan jullie nog een keertje oefenen met het tekenen van vormen, randen en kleuren. 

Het doel is de afbeelding hiernaast.

In de code staan meerdere commentaarregels met opdrachten om de tekening compleet te maken. Als je een programma aanpast, doe je er goed aan om dit in stapjes te doen. Kijk elke keer even of een stap gelukt is, voordat je verder gaat. Zo ben je uiteindelijk minder tijd kwijt.

Voer de opdrachten in de code uit zodat het einddoel verschijnt. Gebruik de extra instructies in de code.

Parameters en argumenten

In de vorige les heb je gewerkt met onder andere fill, stroke, strokeWeight, rect, noStroke en ellipse (figuur 1.11). We hebben dit tot nu toe commando’s genoemd. Vanaf nu gebruiken we de term functie. Met een functie geef je de computer de opdracht om iets uit te voeren. Het was je misschien al opgevallen dat achter elke functie twee haakjes staan. Tussen die haakjes zet je de extra informatie die de functie nodig heeft om goed te werken.

Als je in de reference kijkt bij de uitleg van de functie strokeWeight, dan zie je het volgende:

Met de term syntax (of: syntaxis) wordt het geheel aan taalregels van een programmeertaal bedoelt. De syntax vertelt je hoe je de taal, in ons geval Javascript, gebruikt om een programma te schrijven.

In de beschrijving staat een functie strokeWeight. In de uitleg zien we dat deze functie een gegeven nodig heeft om goed te kunnen werken. Zo’n gegeven heet een parameter. In dit geval is dit de lijndikte weight.

Een parameter heeft een algemene naam, zoals weight. 

Als je de functie wilt gebruiken, moet je een specifieke waarde voor de parameter meegegeven: strokeWeight(10) In dit voorbeeld wordt de waarde 10 als argument meegegeven. 

Niet alle functies hebben een argument nodig. Voorbeeld: met de functie noStroke() geef je aan dat je geen rand om een vorm wilt.

In de volgende opdrachten maak je kennis met een aantal P5-functies die erg handig zijn bij het tekenen.

Pas bekijkJS.html aan naar H1O05.js

In regel 14 staat de functie translate. Hiermee willen we het huis verplaatsen. Pas de argumenten aan, zodat x = 90 en y = -10. Wat is de betekenis van het minteken? Voorspel wat het resultaat van deze aanpassing zal zijn.

Klopte jouw voorspelling? In regel 26 staat nog een regel met translate die is uitgeschakeld met //. Haal de// weg. Begrijp je waarom nu alleen het huis verplaatst (en net nog niet)?

Deze opdracht laat zien hoe translate werkt, maar normaal gesproken pas je dit wel anders toe: als je de oorsprong verplaatst, kun je juist makkelijk vanaf de coördinaten [0,0] tekenen. Dit gaan we uitproberen.

Bekijk de code hiernaast en maak een schets van de tekening die zal ontstaan en een tweede schets van de tekening wanneer de // voor beide regels met translate worden weggehaald.
Verwijder alle coderegels in de draw en kopieer de code van hiernaast. Klopte jouw tekening?

Na deze les, 

wil ik...

de uitleg nog 1 keer horen

meer voorbeelden krijgen

meer oefeningen maken

de leerstof thuis nog even bekijken

overgaan naar nieuwe leerstof

nog meer te weten komen over de leerstof

niet meer te weten komen over de leerstof

Hoe vond je 

deze les?

😒🙁😐🙂😃

Volgende les

• Push & pop

• Draaien