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