Les 2

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

Games maken en ervaren

Deze les

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

Kleuren & doorzichtigheid

Pas bekijkJS.html aan naar H1O03.js

Pas de code aan in bekijkJS.html naar:

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

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.

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

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

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.

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?

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)

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