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

De lange uitleg

Deze uitleg kun je heel snel bekijken…

Deze opdracht bestaat uit 4 gedeelten die je op dezelfde kopie van je robot bouwt. Recycle de code van de robot met kleurenpalet. Optie: heb je een GSM met deze codes, recycle je GSM.

Opdracht 1 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 2 : 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 3 Else-If

Kies nu een plek in je robot waar je de if-then nog kunt uitbreiden. Check hoe de code voor else-if werkt in het voorbeeld hieronder. Opdracht: maak een else-if in je robot.

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 4 Kleur die Robot

• Als het goed is heb je al een kleurenpalet bij je 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.