Ga naar de inhoud

p5js.nl

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1.3 Meerhoeken, sterren, bogen
      • U1 LA 1.4 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 LA 3.4 Eenvoudige Functies
      • U1 LA 3.5 Een simpele tekst
    • Unit 1 Final Project Teken een GSM
  • Unit 2
    • Unit 2, LA1
      • U2 LA1.1 If-Then-Else Kleur die Robot
      • U2 LA 1.2 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
      • U2 LA2.2 Muisclicks en vormen als knop gebruiken
      • U2 LA 2.3 Meer met functies
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 Final Project Painter
  • Unit 3
    • Unit 3 LA1
      • U3 LA 1.1 While Loops
      • U3 LA 1.2 Een for-loop
      • U3 LA 1.3 For-loop in een for-loop
      • U3 Mini-Project Wallpaper design
    • Unit 3 LA2
      • U3 LA 2.1 Arrays en Loops Deel 1
      • U3 LA 2.2 Arrays en loops deel 2 – random
    • Unit 3 LA 3 Mini-Project Vision Board
      • Unit 3 LA3.1 Afbeeldingen uploaden
    • Unit 3 LA 4 Mini-Project Bewegende Tekst
      • U3 LA 4.1 Werken met fonts
      • U3 LA 4.2 Geluiden
    • Unit 3 LA 5 Mini-Project Fun Piano
    • Unit 3 Final Project Meme Generator
  • Unit 4
    • Unit 4 LA 1 Stuiteren
    • Unit 4 LA1 Mini-Project DVD-Logo
    • Unit 4 LA 2.1 & 2.2 Translations & Rotations
    • U4 LA2 MP Draai die Koppen of Calypso
    • U4 LA 3.1 Sinus en cosinus
    • U4 LA 3 Mini-Project Stoomtrein
    • Unit 4 FP Brulbrief
  • Unit 5
    • U5 LA1 Programmeer Oefeningen
    • U5 LA2 Globale Variabelen opheffen
    • U5 LA 2.1 Finite State Machine
  • Blog
  • Links
    • P5JS Editor
      • P5JS.org
      • Video's Coding Train
      • P5JS Reference
      • Intro to Computational Media (2022)
    • Openverse Images
      • Freesound
      • Music
      • Free stock photo's
      • Free Vector Images
      • Dafont
  • Contact
    • Beoordeel P5js.nl
    • Docenten Info
Menu

U5 LA1 Programmeer Oefeningen

In eerdere units hebben we aandacht besteed aan het schrijven van functies.

  • U1 LA 3.4 Eenvoudige Functies. Waarom functies, Functies aanroepen en het gebruiken van parameters.
  • U2 LA 2.3 Meer met functies. Functies met Return waardes

We gaan nu eerst nog even flink oefenen met het maken van eigen functies.

Opdracht 1. mijnRobot(x,y)

Check je code uit U1 LA 3.4 of maak ‘m alsnog: maak een versie van je Robot U1 LA1.1 Maak een Robot maar nu als functie. Het ziet er ongeveer als volgt uit:

function setup() {
  createCanvas(400, 400);
  strokeWeight(5);
}

function draw() {
  background(220);
  fill(200, 0, 0);
  mijnRobot(mouseX, mouseY);
}
function mijnRobot(x, y) {
  rect(x, y, 200);
  // 100 100
  ellipse(x, y, 50, 50); // linker oor
  ellipse(x + 200, y, 50, 50); // rechter oor
  fill(255, 255, 255);
  ellipse(x + 45, y + 65, 20, 20); // linkeroog
  ellipse(x + 155, y + 65, 20, 20); // rechteroog
  ellipse(x + 100, y + 90, 10, 10); // neus
  ellipse(x + 100, y + 150, 60, 30); // mond
}

Let op de aanroep van mijnRobot() in de draw(). Jouw opdracht is om nu jouw robot te maken in de functie mijnRobot, in plaats van de mijne. Kijk goed hoe je omgaat met die x en y parameters. Je moet een nieuw nulpunt kiezen, een punt ten opzichte waarvan je de robot neerzet. Bij mij is dat het linkeroor, ofwel ellipse(x, y, 50, 50) die oorspronkelijk op (100,100) stond.

Opdracht 2. Maak een rij tanden

In zijn halfronde mond passen zeker 10 tanden, 5 op de onderrij en 5 als bovengebit. Maak hiervoor een functie mijnTand(x,y,b, c). De x en y spreken voor zich. De b parameter is de breedte van de tand. Dan kun je daar makkelijk een beetje mee spelen. De c parameter is voor color.

Na het plaatsen van de 10 tanden (dus je roept 10x die functie aan met andere parameters) teken je pas de mond zelf, zodat deze er overheen valt. Eerst noFill() aanzetten denk ik!

Opdracht 3. Klik op mijn tand

Lees nu deze pagina in het boek van Jeffrey Thompson: http://www.jeffreythompson.org/collision-detection/point-rect.php. Die legt uit hoe je het klikken op een bepaald punt kunt detecteren met een eigen functie.

Maak nu jouw versie van deze functie, die een return waarde terug gaat geven van het type boolean: er is op geklikt TRUE or FALSE.

Gebruik de code van Jeffery uit zijn functie pointRect en maak daarmee een eigen functie (jatwerk) als deze.

boolean klikTand(float px, float py, float rx, float ry, float hr) {
// dank aan Jeffrey Thompson: 
// http://www.jeffreythompson.org/collision-detection/point-rect.php. 

// jouw code hier


}

// ergens in de draw
if (klikTand(.... de coördinaten van je eerste tand)) {
  mijntand( in het rood) 
} else {
mijnTand( in het zwart) 
}

     

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.
© 2023 p5js.nl | Aangedreven door Minimalist Blog WordPress thema