De korte versie van de antwoorden staat onderaan deze pagina
Opgave 1 Tekenen
Schrijf de code die geplaatst zou kunnen zijn in de function setup() om deze vormen te maken. Je mag hier HTML color names gebruiken.
- Een geel vierkant
- Een blauwe cirkel
- Een blauwe ellips met rode rand (5 dik)
- Een blauwe driehoek

Opgave 2 Bewegen
Schrijf de code die ervoor zorgt dat een cirkel (met straal 50) op de positie van de muis beweegt. Plaats je code correct op een juiste plaats in function setup() of function draw().
Opgave 3 Beweeg Beter
Gegeven is een tweetal cirkels binnen deze code.
function setup() {
createCanvas(400, 400);
stroke("yellow")
fill("blue")
}
function draw() {
background(220);
circle(120,100,50)
circle(280,100,50)
}
Laat nu beide cirkels bewegen met de muis mee. Zorg dat de code op een zo groot mogelijk deel van het canvas werkt. Dus pas op voor het gebied buiten het canvas.
Schrijf hiervoor de P5 code die moet worden toegevoegd. Geef aan op welke plek in de bestaande code je dit toevoegt.
Opgave 4 Variabelen
Definieer, initieer met de waarde 60 en gebruik een variabele met de naam mixedColor. Gebruik mixedColor om de 3 subkleuren R, G en B te maken, een kleur te maken en vul daarmee deze cirkel:
function setup() {
createCanvas(400,400)
}
function draw() {
circle(200,200,100)
}
Opgave 5 Kleuren
Gegeven zijn 3 RGB kleurcodes in hex. Welke kleurcode geeft welke kleur? Keuze uit 8 kleuren.
| Code | Kleur | ||
| Black | Magenta | ||
| #00FF00 | Grey | Yellow | |
| #808080 | Cyan | Blue | |
| #00FFFF | Green | Red |
Opgave 6 Arc de Triomphe

Bovenstaande arc is gesimplificeerd gemodelleerd als onderstaande vorm. Alleen die eindstukken van de arc zijn nu ook rond. Helemaal onderaan vind je de code die er gemaakt is.
Welke getallen heeft de ontwerper ingevuld bij A en B?

let A;
let B;
function setup() {
createCanvas(400, 400);
noFill()
strokeWeight(50)
stroke("beige")
A = // Wat moet A zijn?
B = // Wat moet B zijn?
}
function draw() {
background(220);
arc(200,200,100,100, A,B,OPEN)
}
Opgave 7 Scope van Variabelen
De volgende code heeft een probleem met de scope.
1
2 function setup() {
3 createCanvas(400, 400);
4 let theSize = 5
5 }
6
7 function draw() {
8 background(220);
9 theSize = theSize + 10
10 console.log(theSize)
11 }
12
ReferenceError: theSize is not defined at /sketch.js:9:3
Opdracht: Herschrijf de gehele sketch zodanig dat de fout niet optreedt en zodanig dat de uitkomst altijd een getal is in de reeks [15,25,35,45…]
Score per opgave
| Opgave 1 | Opgave 2 | Opgave 3 | Opgave 4 | |
| Punten | 4 | 2 | 2 | 3 |
| Correctiemodel | Elke perfecte vorm -> 1p | Correct gebruik mouseX en mouseY -> 1p in draw() ->1p | translate -> 1p mouseX – getal tussen 100 en 300 -> 1p | let op globale scope ->1mixedColor = color(huppeldepup) correct -> 2 |
| Opgave 5 | Opgave 6 | Opgave 7 | ||
| Punten | 3 | 2 | 2 | |
| Correctiemodel | #00FF00 = green -> 1p #808080 = grey -> 1p #00FFFF = Cyan -> 1p | A=0 -> 1p B = PI -> 1p | 1 let theSize -> (1p) 4 theSize = 5 (dus zonder let) -> 1p |