U2 LA1.1 If-Then-Else Kleur die Robot

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.

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.