Les 3 (1)

Games maken en ervaren
1 / 15
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

In deze les zitten 15 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Games maken en ervaren

Slide 1 - Tekstslide

Deze les
  • Huis met boom programmeren
  • Parameters en argumenten in P5

Slide 2 - Tekstslide

Huis met een boom

Slide 3 - Tekstslide

Pas bekijkJS.html aan naar H1O04.js

Slide 4 - Tekstslide

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

Het doel is de afbeelding hiernaast.

Slide 5 - Tekstslide

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.

Slide 6 - Tekstslide

Slide 7 - Tekstslide

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:


Slide 8 - Tekstslide

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.

Slide 9 - Tekstslide

Pas bekijkJS.html aan naar H1O05.js

Slide 10 - Tekstslide

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)?

Slide 11 - Tekstslide

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?


Slide 12 - Tekstslide


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

Slide 13 - Poll


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 14 - Poll

Volgende les
  • Push & pop
  • Draaien

Slide 15 - Tekstslide