Les 1 (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

Voordat je kunt beginnen met programmeren in P5, moet je een omgeving inrichten om in te werken en te testen.

Dit doen we met notepad++ en je browser.

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.

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

shape

triangle

quad