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.
Symptomen van matige code
Waaraan zie ik 1,2,3 dat er matige code is:
- Het hoofdprogramma draw() bestaat uit honderden regels losse instructies.
- 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
Nu ga je je code van zonet nog upgraden, zodat je 1 versie hebt voor bijv. oog() waarmee je beide ogen tekent.
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
}Je zorgt er natuurlijk voor dat je de binnenkomende parameters ook echt gebruikt, want daar gaat het om.