Les 2 (1)

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

Games maken en ervaren

Deze les

• vormen tekenen
• kleuren en doorzichtigheid
  

Pas bekijkJS.html aan naar H1O02.js

Pas de code aan in bekijkJS.html naar:

Vormen tekenen II

Open H1O02.js in notepad++. 

Bekijk het resultaat in de browser via bekijkJS.html

De code bevat het commando triangle. Gebruik de reference om uit te zoeken wat de betekenis is van de zes getallen tussen de haakjes.

De code bevat het commando triangle. Gebruik de reference om uit te zoeken wat de betekenis is van de zes getallen tussen de haakjes.

Pas de code aan, zodat het beeld van hiernaast ontstaat. (Het Engelse woord voor roze is pink.)

Gebruik de kleur paars (purple) om het figuur hiernaast na te bouwen. 

Wie goed kijkt, heeft maar twee driehoeken nodig!

Per hoekpunt van de driehoek gebruiken we een x-waarde en een y-waarde. Op dezelfde manier kun je met het commando quad ook een vierhoek maken die niet per se rechthoekig is. Dat wordt al gauw onoverzichtelijk. Bovendien: hoe maak je dan een vijf- of zeshoek? P5 heeft een algemenere manier om een vorm met hoekpunten te tekenen. Zo’n vorm heet toepasselijk een shape.

Wat is een vertex?

Wat doet CLOSE?

Neem de code hierboven over en plaats het in de draw onder de regels voor de driehoeken

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)

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

• Huis met boom programmeren

• parameters en argumenten in P5