Oefentoets P5JS Unit 1 (Havo 4)

  • Bericht auteur:
  • Berichtcategorie:Opdrachten

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.

CodeKleur
BlackMagenta
#00FF00GreyYellow
#808080CyanBlue
#00FFFFGreenRed

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 1Opgave 2Opgave 3Opgave 4
Punten4223
CorrectiemodelElke perfecte vorm -> 1pCorrect gebruik mouseX en mouseY ->
1p
in draw() ->1p
translate -> 1p
mouseX – getal
tussen 100 en 300 -> 1p
let op globale scope ->1
mixedColor = color(huppeldepup) correct -> 2


Opgave 5Opgave 6Opgave 7
Punten322
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