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

U1 LA3.4 Eenvoudige Functies

functions describe the world

Jullie hebben nu geruime tijd leren programmeren. De losse stukken code zijn best okay. Maar de programma’s als geheel doen mij werkelijk pijn in de buik krijgen.

Voorbeeld Foute Code

https://editor.p5js.org/EloqArch/full/bsYNwscEF

Bedankt, dearflamingo1 en tautchile1.

Symptomen van matige code

Waaraan zie ik 1,2,3 dat er matige code is:

  • Het hoofdprogramma draw() bestaat uit honderden regels losse instructies. Elke vertex() heeft ook harde coördinaten mee, geen parameters.
  • Dezelfde instructies komen terug, met telkens andere parameters

Waar krijg je last van?

De problemen die dit soort code vroeg of laat oplevert:

  • niet te updaten. Als je een update moet doen, moet je al die 7 kopieën van elke ster aanpakken.
  • niet te hergebruiken. Wil je de ster laten bewegen, moet je weer opnieuw beginnen.
  • als je teveel code op dit niveau hebt, kun je op n gegeven moment je hele project weg donderen want niet te doen. Om verder te komen moet je wel functies gaan gebruiken.
  • Je code is gevoelig voor errors. Een foutje is gauw gemaakt, moeilijk te vinden en lastig op te lossen.

Hoe ruim je je draw() op?

Kijk deze video helemaal

Embed was niet mogelijk, click en open youtube om te kijken.

Opdracht 1: rework je robot

Gebruik nu je code uit je project “robot”. Heel oud werk. Of pak dit voorbeeld. Ruim de draw() op, zodanig dat er alleen calls in staan naar eigen functions. De coördinaten, indien “hard-coded” mag je laten staan.

Dit zijn voorbeeld functie definities. Vul de code in.

function mijnRobot() {
// hier al je shizzle
}
// of zo
function linkeroog() {
}
// en
function rechteroog() {
}

De functie aanroepen

In draw() moet je wel zorgen dat jouw functies ook worden aangeroepen. Anders staat het daar mooi, maar heb je er niks aan, want de code wordt niet uitgevoerd.

function draw() {
linkeroog();
rechteroog();
tanden(); // whatever wat jij had

Opdracht 2: parameteriseer je robot

In zijn 2e video legt de guru uit hoe je parameters toevoegt aan je eigen functie. Kijk deze helemaal. Het laatste stukje is handig als je translate() al hebt gehad.

https://youtu.be/zPX5MIdwGgo

embed was niet mogelijk, click om te bekijken op youtube

Maak een nieuwe versie van de functie oog() die je voor zowel het linker- als het rechteroog kunt gebruiken.

function oog(deX, deY, deHoofdkleur, deSteunkleur) {
// bla
}

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