U5 LA1.1 Object Oriëntatie – Theorie

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

Bronnen bij Object Orientatie