les 12 - stuiterende ballen in een class

---

Hier de opnames van de theorie les van 3 december:

Video van de les van Nathan

Code uit de les van Roald: zipje met HTML&JS

JS-code:

/*
  Benodigdheden voor een stuiterende bal-recept
  Eigenschappen:
  - coordinaten
  - diameter
  - kleur
  - circle
  - rand om de bal
  - snelheid

  Functie:
    x Bal moet getekend worden.

    x Bal moet bewegen.

    x Bal moet binnen het kader blijven.

*/
let ballen = [];
let aantalBallen = 1000;

class Ball {
  constructor() {
    this.diameter = random(15,50);
    this.xPositie = random(this.diameter/2,width-this.diameter/2);
    this.yPositie = random(this.diameter/2,height-this.diameter/2);

    this.kleur = color(random(255),random(255),random(255));
    this.rand = random(0,3);
    this.xSpeed = random(-5,5);
    this.ySpeed = random(-5,5);
  }
  drawBall() {
    stroke(0);
    strokeWeight(this.rand);
    fill(this.kleur);
    circle(this.xPositie,this.yPositie,this.diameter);
  }

  moveBall() {
    this.xPositie = this.xPositie + this.xSpeed;
    this.yPositie = this.yPositie + this.ySpeed;
  } 

  bounceBall() {
    if (this.xPositie < this.diameter/2 || this.xPositie > width - this.diameter/2) {
      this.xSpeed = this.xSpeed * -1;
    }
    if (this.yPositie < this.diameter/2 || this.yPositie > height - this.diameter/2) {
      this.ySpeed = this.ySpeed * -1;
    }
  }
}

function setup() {
  //plaats hier de code die maar één keer hoeft te worden uitgevoerd
  createCanvas(800,600);
  background(255);
  for (let i=0; i<aantalBallen; i++) {
    ballen[i] = new Ball();
  } 
  console.log(ballen);
}

function draw() {
  //plaats hier de code die continue herhaald moet worden.
  background(255);
  for (let i=0; i<aantalBallen; i++) {
    ballen[i].drawBall();
    ballen[i].moveBall();
    ballen[i].bounceBall();
  }
}