Les 1

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

Games maken en ervaren

Tijdens deze periode leer je stap voor stap programmeren in de taal Javascript met P5. P5 of Processing is een aanvulling op Javascript. Zo’n aanvulling heet een bibliotheek (library). 

P5 is speciaal gemaakt om het programmeren makkelijker te maken voor mensen die net beginnen met programmeren.

Opbouw

• Basisprincipes van het programmeren en specifieke javascript- en P5-elementen. 
• Object-georiënteerd programmeren (OO of OOP) heet. 
• Ontwerpen en ervaren van games.

Deze les

• Omgeving inrichten om in te werken en te testen.
• Vormen tekenen I
• Vormen tekenen II
  

Teams-lesmateriaal

• Game:  Deze bestanden moet je allemaal downloaden en op je onedrive zetten 
• P5 references: alle P5 commando's
  

(als je slim bent, maak je een mapje informatica op je onedrive en zet je het daarin)

Kennismaking met P5

Deze tekening is geprogrammeerd met Javascript. De code bestaat uit twee belangrijke delen: de setup en draw.

Het canvas: ons speelveld

setup

In de setup van een programma creëer je de beginsituatie van het programma. We gaan hier niet alle regels één voor één uitleggen. Belangrijk voor nu zijn:

• createCanvas(1000,500); Maak een speelveld / canvas van 1000 pixels breed en 500 pixels hoog
• background('orange'); Geef het canvas een oranje achtergrondkleur

draw

Het tweede deel van de code staat hiernaast. Dit is ons hoofdprogramma: de draw. In dit voorbeeld staan hier commando’s om de cirkel en de rechthoek te tekenen in het canvas.

Het canvas kun je zien als een veld van pixels. Je verwijst naar een bepaald punt met een x-waarde en een y-waarde. Belangrijk om te weten: het punt [0,0] ligt linksboven en een grotere y-waarde betekent dat je naar beneden gaat (en niet omhoog, zoals in een assenstelsel bij wiskunde)

Hiernaast zie je het resultaat met een raster van hokjes van 100 × 100 pixels.

Opdracht 1 

vormen tekenen I

Open H1O01.js (Hoofdstuk 1 Opdracht 1) in notepad++. (Game-JS-H1). Dit is de code van het plaatje hiernaast. Bekijk het resultaat in de browser door bekijkJS.html te dubbelklikken

1. Pas de code aan zodat het canvas grijs (grey) van kleur wordt.
   
2. Pas de code aan zodat het canvas nog maar 450 pixels hoog is.
3. Zorg dat de groene cirkel zowel boven als links op een afstand van 25 pixels van de rand van het canvas komt te staan.
4. Voeg een tweede, witte cirkel toe met hetzelfde middelpunt als de groene cirkel en een diameter van 300.
5. Pas de regel voor de rechthoek aan, naar: rect(125,125,200,200);
6. Pas de code aan zodat het eindresultaat verschijnt met een vierkant canvas.
   

Pas de code aan zodat het canvas grijs (grey) van kleur wordt.

Pas de code aan zodat het canvas nog maar 450 pixels hoog is.

Zorg dat de groene cirkel zowel boven als links op een afstand van 25 pixels van de rand van het canvas komt te staan.

Voeg een tweede, witte cirkel toe met hetzelfde middelpunt als de groene cirkel en een diameter van 300.

Pas de regel voor de rechthoek aan, naar: rect(125,125,200,200);

Pas de code aan zodat het eindresultaat verschijnt met een vierkant canvas.

Er zijn nu twee regels met ellipse. Voorspel wat je zal zien als je de beide coderegels van plek laat wisselen, zodat hun
volgorde andersom is.

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

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

• Kleuren & doorzichtigheid
• Huis met boom programmeren
• parameters en argumenten