Les 3

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

Games maken en ervaren

Deze les

• Push & Pop
  

• Draaien
• Variabelen
• Simpel tekenprogramma
  

Push & Pop

Pas bekijkJS.html aan naar H1O06.js

Een ontwerper heeft een rij van zes vierkanten gemaakt zoals in de bovenste afbeelding. Het uiteindelijke beeld moet één vierkant bevatten dat er anders uitziet, zoals in de onderste afbeelding. De ontwerper heeft een paar aanpassingen gedaan voor de vierde figuur, met de middelste afbeelding als resultaat.

De programmeercode van de ontwerper staat in H1O06.js. Open dit bestand in notepad++. 

De aanpassingen die de ontwerper heeft gedaan zijn in het bestand gemarkeerd.

Wat gaat er mis?

Als je in P5 een andere tekeninstelling kiest zoals een vulkleur, dan zal de computer deze vulkleur normaal gesproken blijven gebruiken totdat je weer een andere kleur kiest. Dat geldt voor alle tekeninstellingen.

Als je terug wilt naar de vorige instellingen zou je alles weer terug moeten zetten zoals het was. Dat kan wel, maar is veel werk. De functies push en pop bieden uitkomst. Met push sla je de huidige tekeninstellingen op in het geheugen van de computer. Je kunt daarna de instellingen zoals fill, stroke maar ook translate tijdelijk aanpassen voor een stukje van de tekening. Ben je klaar en wil je weer verder tekenen met de bewaarde instellingen? Dan kun je die terughalen met pop.

Voeg voor de eerste aanpassing van het vierde vierkant de regel push(); in. Bekijk het resultaat: is er iets veranderd?

Voeg nu na het tekenen van het vierde vierkant de regel pop(); toe. Controleer of jouw tekening nu overeenkomt met de onderste afbeelding.

Geef de vijf gelijke vierkanten in één handeling de kleur thistle.

Wat verwacht je te zien als we de regel pop(); niet na het vierde maar na het vijfde vierkant plaatsen? Probeer het uit en verklaar wat je ziet.

Draaien

Pas bekijkJS.html aan naar H1O07.js

Hiernaast zie je twee half-doorzichtige vierkanten: de onderste is 'normaal', de bovenste is gedraaid over 45° zodat je een ruit krijgt.

We hebben gezien dat je met de functie shape willekeurige vormen kunt maken met hoekpunten. In principe zou je hiermee ook een ruit kunnen tekenen, maar dat is wel omslachtig. Het is makkelijker om gewoon een vierkant te draaien. Hiervoor is de functie rotate (Engels: draaien of roteren).

In regel 15 staat rotate(0). Verander het argument van de functie in 7.

Rond welk punt is het vierkant gedraaid? En over hoeveel graden is hij gedraaid?

Voeg de regel angleMode(DEGREES); toe aan setup en geef rotate als argument 45 mee.

Voeg de regel rectMode(CENTER); toe aan de setup en bekijk het resultaat.

Pas de argumenten van translate aan, zodat de figuur weer in het midden van het canvas staat.

Plaats een geel vierkant met zijde 50 in het midden van het vierkant. Neem als RGB-kleurcode 255,225,0. Gebruik push en pop om te zorgen dat het vierkant niet gedraaid staat als een ruit.

Variabelen

In de laatste opdrachten hebben we meerdere vierkanten moeten tekenen met steeds hetzelfde formaat. Hiervoor hebben we telkens hetzelfde getal als argument meegegeven aan de functie rect. Voor zes vierkanten betekent dit twaalf keer (lengte en breedte) dezelfde waarde invullen!

Als je de vierkanten iets groter wilt maken, moet je dus ook op twaalf verschillende plaatsen de lengte van een zijde aanpassen terwijl die eigenlijk steeds gelijk is. Zou het niet fijn zijn als we de computer één keer konden vertellen dat de zijde van de vierkanten bijvoorbeeld 150 pixels moet zijn? En dat hij het daarna zelf onthoudt? Dat kan met een variabele.

De variabele omtrek krijgt geen beginwaarde, omdat we die door de computer willen laten berekenen. De opdracht daarvoor staat in de draw. 

omtrek = 2*lengte + 2*breedte;

De functie text zet de tekst De omtrek is 24 op het scherm met: text("De omtrek is " + omtrek,50,50);

Naast de variabelen die je zelf kunt maken, kent P5 ook een aantal eigen variabelen zoals mouseX, mouseY, width en height.

Open H1O08.js in notepad++ 

(pas ook je bekijkJS.html aan)

Geef variabeleB de waarde 11 en bekijk het resultaat

Zorg dat de rekensom 21 – 9 = 12 op het scherm verschijnt. (Let ook op de tekst!)

Er wordt de rekensom 13 × 4 = 52 getoond. Doe dit ook voor jouw canvas. Pas de grootte van het canvas aan, zodat ook het grote vierkant in het beeld past.

Open H1O09.js in notepad++
(pas ook je bekijkJS.html aan)

ELO-opdracht (huiswerk)

1. In welke variabele slaat P5 het aantal pixels van de hoogte van jouw browserscherm op?
2. In welke variabele slaat P5 het aantal pixels van de hoogte van jouw canvas op?
3. Regel 17 bevat de code: text("mouseX:"+mouseX+"\nmouseY:"+mouseY,mouseX,mouseY); die ervoor zorgt dat er een stuk tekst meebeweegt met de x-positie (mouseX) en y-positie (mouseY) van de muis. Verklaar dat deze gele tekst achter het blauwe tekstvak verdwijnt.
4. In regel 17 staat "\nmouseY:". Toch zie je alleen mouseY in beeld. Haal \n weg. Wat zie je?
5. We ronden de positie van de muis af naar hele pixels met de functie round. Verander regel 17 naar: text("mouseX:"+round(mouseX) + " mouseY:"+round(mouseY),mouseX,mouseY);
6. In de code staan vier functies die beïnvloeden hoe de tekst wordt getoond (textFont, textSize, textLeading en textAlign). Zoek uit wat deze functies doen en experimenteer ermee. Gebruik eventueel de reference: https://p5js.org/reference/#group-Typography

Simpel tekenprogramma

Pas de argumenten van de functie ellipse aan, zodat de stip jouw muis volgt.

Verplaats de genoemde regel van de draw naar de setup. Wat is er veranderd?

Voeg aan het begin van de draw een regel toe die een rechthoek tekent met de (vul-) kleur wheat. Gebruik de standaard P5-variabele voor de canvasbreedte en zorg voor een hoogte van 30 pixels zodat bovenaan een balk wordt getekend

Het is je misschien opgevallen dat background('lavender'); in dit programma niet in de setup maar in de draw is geplaatst.

Nu de achtergrondkleur in de setup wordt ingesteld, wordt deze alleen in het begin gekleurd. Alles wat daarna verandert, blijft in beeld staan. We kunnen nu tekenen, maar de tekst bovenaan wordt onleesbaar. Gelukkig is er een simpele oplossing:

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