Ga naar de inhoud

p5js nl

Leer programmeren voor visual arts

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1 1.3 Teken een GSM
      • U1 LA1.4 Meerhoeken, sterren, bogen
      • U1 LA 1.5 Mini-project: Maak een Taijitu (Yin & Yang)
    • Unit 1, LA 2
      • U1 LA 2.1 Meebewegen met de muis
      • U1 LA2.2 Meekleuren met de muis op je eigen variabele
      • U1 LA 2.3 Random Ellipsen
      • U1 LA2 Mini-Project Custom Emoji
    • Unit 1, LA3
      • U1 LA 3.1 Inleiding Kleur
      • U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus
      • U1 LA 3.3 Kleuren paletten
      • U1 LA3 Final Project: Album Art
  • Unit 2
    • Unit 2, LA1
      • U2 LA 1.1 Levensweg
      • U2 LA1.2 If-Then-Else Kleur die Robot
      • U2 LA 1.3 AND en OR
      • U2 LA1 Mini-Project Stoplicht
      • U2 LA1.4 Tekenen met de muis
      • U2 LA1.5 De map() functie
    • Unit 2, LA 2
      • U2 LA2.1 Raken met Collide2D
      • In Aanbouw
      • U2 LA 2.2 (in aanbouw)
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 LA 3.1 (in aanbouw)
      • U2 Final Project Painter
  • Unit 3
    • LA2 2.1 While Loops
    • LA2 2.?, Arrays en Loops
    • In Aanbouw
  • Blog
  • Docenten Info
  • Contact
    • Beoordeel P5js.nl
  • Links
    • P5JS Editor
    • P5JS.org
    • Video’s Coding Train
    • Reference
    • Intro to Computational Media
    • Freesound
Menu

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

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!

If then else

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

if ( mouseX < mouseY ) { 
   fill(0,0,0);
   circle(10,10,10) 
} else {
   fill(255,0,0);
   circle(10,10,10) 
}

else if

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);
  }
}

Deze opdracht verhuist naar LA3.

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) { ...}

Archives

  • juni 2022
  • maart 2022

Categories

  • onthouden
  • Uncategorized

Dit is de vertaling-in-aanbouw van de Amerikaanse lesmethode Introduction to computational media (V2020, V2022) voor P5JS door Luisa Pereira.

Aangepast voor Nederland door docent Barry Voeten.

Creative Commons-Licentie
Dit werk valt onder een Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 4.0 Internationaal-licentie.
© 2022 p5js nl | Aangedreven door Minimalist Blog WordPress thema