Je krijgt betere code, overzichtelijker en vooral ook beter te hergebruiken. Dus voor jou: code van een ander die in een class zit, is makkelijk te hergebruiken. Maar hoe werkt het nu? Laten we eerst kijken wat je al kunt: met functies programmeren. Dan maken we het daarna moeilijker.
De Links naar werkende code
De Video
Instap voorbeeld: met functies
Bekijk de code live op https://editor.p5js.org/EloqArch/sketches/GFyaXX3csE
let cirkel1;
let cirkel1X;
let cirkel1Xspeed;
function setup() {
createCanvas(400, 400);
fill("blue");
strokeWeight(3);
stroke("yellow");
cirkel1X = 100;
cirkel1Xspeed = 3;
}
function draw() {
background(220);
circle(cirkel1X, 100, 30);
move()
bounce()
}
function move() {
cirkel1X = cirkel1X + cirkel1Xspeed;
}
function bounce() {
if (cirkel1X < 0 || cirkel1X > 400) {
cirkel1Xspeed = -1 * cirkel1Xspeed;
}
}
Je ziet dat we 2 variabelen hebben en 2 functies. Als we nog een bal willen hebben we weer 2 variabelen nodig: voor de x en de xSpeed. De functies moeten we iets ombouwen dat ze meer generiek werken. Dit zijn de functies bounce en move.
Die functies en de variabelen gaan we nu combineren in een object. Eerst doen we een object literal
, dat wil zeggen: een object maar geen class. Een simpele beginnersversie.
Object Literal
De object literals maak je door de met accolades en waarden, maar zonder een class. Handwerk. Maar het kan wel.
let cirkel1;
function setup() {
createCanvas(400, 400);
fill("blue")
strokeWeight(3)
stroke("yellow")
cirkel1 = {
x: 380,
xSpeed: 3,
};
}
function draw() {
background(220);
ellipse(cirkel1.x, 200, 20);
cirkel1.x = cirkel1.x + cirkel1.xSpeed;
if (cirkel1.x > 400 || cirkel1.x < 0) {
cirkel1.xSpeed *= -1;
}
cirkel1.x = cirkel1.x + cirkel1.xSpeed;
}
In het object literal kun je 1 enkel object maken door elke eigenschap tussen accolades een waarde te geven. Functies zitten er niet bij in, die moet je dan los toevoegen. Als je een tweede ‘cirkel’ wilt moet je nog een literal maken.
Dit is een mooi opstapje op weg naar een ‘echte’ class.
Class en Constructor
let cirkel1;
function setup() {
createCanvas(400, 400);
fill("blue");
strokeWeight(3);
stroke("yellow");
cirkel1 = new Cirkel(3, 3);
}
function draw() {
background(220);
cirkel1.move();
cirkel1.bounce();
}
class Cirkel {
constructor(x, speed) {
this.x = x;
this.xSpeed = speed;
}
move() {
this.x = this.x + this.xSpeed;
circle(this.x, 100, 30);
}
bounce() {
if (this.x < 0 || this.x > 400) {
this.xSpeed = -1 * this.xSpeed;
}
}
}
Opdrachten bij Object Orientatie
- Check ook MDN Object Oriented Programming en MDN Classes in Javascript (VWO)
Gebruik van bestaande classes
In dit eerste niveau mag je bestaande classes toepassen in een stuk speel-code. Neem de code van de class over en pas deze toe in je sketch. Gebruik het keyword new om een nieuwe instance
(instantie, ding) van deze class te construeren. De constructor wordt gebruikt om alle values van alle properties (waardes van de eigenschappen) juist te zetten.
Eigen class schrijven
Wat je in deze opdracht moet doen:
- gebruik maken van het
class
keyword - de constructor bouwen. In de constructor geef je alle
- De stuiterende bal. Maar nu volgens MDN Let op: omdat wij in p5 werken hebben we hier niet alles van nodig.
- maak een class voor het mini-project stoplicht. De class
stoplamp
. Dit is 1 van de 3 lampen die samen een verkeerslicht maken. Je hebt minstens de propertieslampkleur
(string) enlampstatus
(boolean). Gebruik de constructor om deze waarden te zetten wanneer de functienew
wordt gerund. Geef ook enkele methods in de class waarmee je de waarden van de properties kunt veranderen. Zoals:uit()
enaan()
ofzetLampKleur()
- Bouw een logger service. Dit artikel maakt m bijna voor je.