Big Code Chunks omzetten in 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 Code

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

Bedankt, dearflamingo1 en tautchile1.

Symptomen

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

Issues

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

https://www.youtube.com/watch?v=4OJpqdzb0J8

Opdracht 1: rework je robot

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

function mijnRobot() {
// hier al je shizzle
}

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

Maak nu een nieuwe versie van je project met weer mijnRobot() maar nu gebruik je parameters voor de positie, hoofdkleur, steunkleur en nog een variabele die je ergens voor gaat gebruiken (nek-lengte, strokeWeight, verzin zelf dan).

Opdracht 3: werken met return waardes

In de derde video legt Prof Cris uit hoe je de return waarde van een functie kunt gebruiken.

https://youtu.be/hZPPsegvgYM

Vraag: wat heb je nodig als je een functie gebruikt die een return-waarde oplevert? Zoals bijv. de random() function?

Opdracht 4: kmToMiles()

Kijk nu deze video van de coding train.

Leuke functie gemaakt dude, maar ja, de verkeerde kant op.

Als opdracht maak jij dezelfde functie als hij, maar de andere kant op: kmToMiles(). Gebruik deze in zeker 3 voorbeeld calls. Zorg ervoor dat je de waarde opslaat en logt naar console.

Eindopdracht Functies

Rework je paint of je light switch game (naar keuze) zodanig dat:

  • de draw() gebruik maakt van minstens 3 eigen functies
  • waarvan minstens 1 een return value
  • er maximaal 25 regels code overblijven in je draw()
  • Te makkelijk: ga naar de opdrachten over objecten en maak een o.o. versie van 1 van de 2 projecten.

Eloquent Architect 161

Eloquent Architect 161