De lange uitleg
Deze uitleg kun je heel snel bekijken…
Opdracht Kleur die Robot
Met de ingebouwde variabelen mouseX
en mouseY
laat je de kleuren veranderen als de muis boven bepaalde gebieden in je sketch komt. Als je het nog iets beter doet, gebruik je ook width
en height
zodat de boel ook werkt op een groter scherm.

Maak eerst een duplicaat (kopie) van de robot uit de vorige unit. Nooit je goede werk slopen!
Opdracht If then else
Onderstaande code checkt op het gedeelte linksboven in je canvas. Speel eens met de condities (mouseX < mouseY). Maak 3 versies van deze sketch die andere condities heeft, maar wel met dezelfde simpele cirkels e.d.
if ( mouseX < mouseY ) {
fill(0,0,0);
circle(10,10,10)
} else {
fill(255,0,0);
circle(10,10,10)
}
Opdracht Else-If
Heb je meer nodig, dan kun je een nieuwe if starten als else. Zoals dit. Maak ook een kopie van deze sketch en speel met de condities. Zorg dat er altijd een cirkel wordt getekend.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
if (mouseX < mouseY) {
console.log("optie 1");
fill(0, 255, 0);
circle(200, 200, 100);
} else if (mouseX < mouseY + 100) {
console.log("optie 2");
fill(0, 0, 255);
circle(200, 200, 100);
} else {
console.log("optie 3");
fill(255, 0, 255);
circle(200, 200, 100);
}
}
Opdracht Kleur die Robot
- Gebruik verschillende kleuren uit een palet van https://colorpalettes.com/ Zo zorg je dat ze bij elkaar passen en samen het juiste gevoel scheppen.
- Kies voor elk deel van je robot minstens 2 kleuren.
- Bepaal de positie van de muis met een code als:
if (mouseX < width / 2 && mouseY < width /2) { ...}
Bewaar die robot
Verderop gaan we deze robot telkens opnieuw gebruiken. Check dat je m goed bewaart.