LESSON 2: MODDING
INTRODUCTIE
Als je alle code zelf zou moeten schrijven is dat onhandig en heel veel werk. Door gebruik te maken van de principes uit Object Oriented Programming (object georienteerd programmeren) kunnen we code uitbreiden zonder alles opnieuw te hoeven maken.
Object Oriented Programming (OOP) heeft 2 belangrijke concepten waarmee we ook zullen gaan werken: classes en objects. Je kunt een class vergelijken met een recept. Een class beschrijft alles over een object: hoe moet het zich gedragen, hoe moet het er uit zien en zo verder. Als voorbeeld kun je denken aan een taart. Voor een taart heb je een basisrecept, de superclass, om met die taart te kunnen varieren hoef je niet het gehele recept te herschrijven. Dus wil je een taart met rozijnen, dan voeg je deze simpelweg toe aan het recept.
In OOP kun je een class uitbreiden door middel van een subclass. Een subclass ‘erft’ alle eigenschappen (gedrag, uiterlijk etc) van een superclass, en kan daar vervolgens van afwijken. In bovenstaand voorbeeld is de ‘taart’ de superclass, en de ‘taart met rozijnen’ de subclass.
Laten we het eens gaan testen door de stappen te doorlopen, beginnend bij stap 1!
STAP 1
Net als in de vorige les beginnen we met de basis van elke Processing sketch: een setup en een draw functie. In de setup functie zetten we alvast hoe groot ons window moet worden en in de draw stellen we om te beginnen de achtergrondkleur in.
void setup() {
size(400, 400);
}
void draw() {
background(0);
}
STAP 2
Als eerste gaan we nu een ‘gewone’ taart omschrijven in code. Om het eenvoudig te houden tekenen we de taart als een witte cirkel. We doen dit door een nieuwe class aan te maken met de naam Taart. Deze class maak je aan naast setup en draw, dit omdat een class of subclass zijn eigen setup en draw krijgt. De class Taart krijgt dus een functie draw waarin we de taart gaan tekenen. Onthoud dat we alleen nog maar het recept hebben geschreven en nog geen taart hebben gemaakt, dus deze sketch zal nu nog niets doen.
class Cake {
void draw() {
ellipse(width / 2, height / 2, 100, 100);
}
};
void setup() {
size(400, 400);
}
void draw() {
background(0);
}
STAP 3
Vervolgens maken we een nieuwe taart aan, volgens het ‘recept’ van de basistaart waarmee we aan de slag gaan. Deze maken we vlak voor de setup functie. Omdat de taart hier aangemaakt wordt is de taart te gebruiken vanuit het hele programma. We kunnen dan in de draw functie de taart tekenen.
class Cake {
void draw() {
ellipse(width / 2, height / 2, 100, 100);
}
};
Cake regularCake = new Cake(); // create a regular cake
void setup() {
size(400, 400);
}
void draw() {
background(0);
regularCake.draw(); // draw the cake
}
STAP 4
Om een rozijnentaart te maken moeten we eerst het recept hebben; dit doen we door het maken van een subclass. Het woord extends geeft aan dat de class voor het woord een subclass is van de class die na het woord wordt vermeld. In dit geval is de class RozijnenTaart dus een subclass van Taart. Dit betekent dat een RozijnenTaart alle eigenschappen van een ‘gewone’ Taart heeft, maar dat we deze kunnen uitbreiden. RozijnenTaart is nu nog leeg, dus er is ook nog geen verschil tussen Taart en RozijnenTaart. In plaats van dat we een gewone Taart aanmaken (ook weer boven setup) maken we nu een RozijnenTaart. Deze RozijnenTaart wordt vervolgens ook getekend in de draw functie.
class Cake {
void draw() {
ellipse(width / 2, height / 2, 100, 100);
}
};
class RaisinCake extends Cake { // RaisinCake is a subclass of Cake
};
RaisinCake raisinCake = new RaisinCake();
void setup() {
size(400, 400);
}
void draw() {
background(0);
raisinCake.draw();
}
STAP 5
Als laatste stap gaan we de gewone taart die we gebruikt hebben als basis uitbreiden en ook daadwerkelijk rozijnen tekenen. RozijnenTaart heeft, net als Taart, een functie draw. De regel super.draw() tekent de superclass, in dit geval de Taart. Vervolgens kunnen we rozijnen toevoegen door een aantal keer de ellipse functie te gebruiken om er daadwerkelijk een RozijnenTaart van te maken. Probeer de argumenten van de ellipse functie (de getallen achter je ellipse die de positie bepalen) eens aan te passen om te kijken wat er dan gebeurt.
class Cake {
void draw() {
ellipse(width / 2, height / 2, 100, 100);
}
};
class RaisinCake extends Cake { // RaisinCake is a subclass of Cake
void draw() {
super.draw();
ellipse(170, 200, 10, 10);
ellipse(230, 210, 10, 10);
ellipse(180, 190, 10, 10);
ellipse(210, 180, 10, 10);
}
};
RaisinCake raisinCake = new RaisinCake();
void setup() {
size(400, 400);
}
void draw() {
background(0);
raisinCake.draw();
}