U5 LA4 Object Oriëntatie

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

• Functies
• Object Literal
• Class en Constructor

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.

• een simpel particle system
• fractal bomen

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 properties lampkleur (string) en lampstatus (boolean). Gebruik de constructor om deze waarden te zetten wanneer de functie new wordt gerund. Geef ook enkele methods in de class waarmee je de waarden van de properties kunt veranderen. Zoals: uit() en aan() of zetLampKleur()
• Bouw een logger service. Dit artikel maakt m bijna voor je.