Les 2

Games maken en ervaren
1 / 24
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Games maken en ervaren

Slide 1 - Diapositive

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

Slide 2 - Diapositive

Kleuren & doorzichtigheid

Slide 3 - Diapositive

Pas bekijkJS.html aan naar H1O03.js
Pas de code aan in bekijkJS.html naar:


Slide 4 - Diapositive

In de eerste opdrachten en voorbeelden hebben we kleur aangegeven met Engelse woorden zoals pink en blue. Doordat je een website hebt gemaakt, ben je bekend met hexadecimale kleurcodes zoals #FFC0CB.
In S402 hebben we het al gehad over kleuren en RGB-codes.

Met 255 rood (de maximale waarde), 192 groen en 203 blauw ofwel (255,192,203) maak je de kleur pink, net als met #FFC0CB. Deze site laat zien welke kleurnamen horen bij de kleurcoderingen: 

https://htmlcolorcodes.com/color-names

Open H1O03.js in notepad++. Bekijk het resultaat in de browser via bekijkJS.html

Slide 5 - Diapositive

In regel 12 (kleurinstelling) en regel 13 (vorm) wordt een rood rechthoek getekend. Verklaar waarom je deze rode horizontale balk niet op het scherm ziet.

Slide 6 - Carte mentale

Vervang de regel die zorgt voor een groene kleur door fill(0,255,0); Bekijk het resultaat
We hebben nu een andere kleur groen. Gebruik de link om de juiste kleurcodering voor de kleur green te vinden.

https://htmlcolorcodes.com/color-names

Slide 7 - Diapositive

Vervang de regel die zorgt voor een blauwe kleur door een hexadecimale kleurcode die hetzelfde resultaat geeft als blue. Gebruik opnieuw de link naar de webpagina met kleurennamen

Slide 8 - Diapositive

In de code staan twee regels met // ervoor (er staat ook eentje in de setup!). 
Verwijder de // voor beide regels. 
Eén van de regels die je nu actief hebt gemaakt is fill(0,0,255,0.3); Verwijder alle andere regels met het commando fill.

Slide 9 - Diapositive

Wat is de betekenis van de 0.3 tussen de haakjes van fill?

Controleer je voorspelling door de waarde 0.3 te laten variëren tussen 0 en 1. Let op: gebruik een punt en geen komma. 

Wat zie je als je precies 0 of 1 invult?

Slide 10 - Diapositive

Voeg een cirkel toe met een diameter van 450 en als middelpunt [450,225]. Zorg dat de vulkleur weer 0.3 bevat.
Voeg een driehoek toe zodanig dat deze tekening ontstaat. Kies daarna je eigen favoriete kleur.(ik heb goud gekozen)

Slide 11 - Diapositive

Huis met een boom

Slide 12 - Diapositive

Pas bekijkJS.html aan naar H1O04.js

Slide 13 - Diapositive

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

Het doel is de afbeelding hiernaast.

Slide 14 - Diapositive

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 15 - Diapositive

Slide 16 - Diapositive

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 17 - Diapositive

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 18 - Diapositive

Pas bekijkJS.html aan naar H1O05.js

Slide 19 - Diapositive

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 20 - Diapositive

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 21 - Diapositive


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 22 - Sondage


Hoe vond je 
deze les?
😒🙁😐🙂😃

Slide 23 - Sondage

Volgende les
  • Push & pop
  • Draaien

Slide 24 - Diapositive