les 12 - stuiterende ballen in een class
Hier de opnames van de theorie les van 3 december:
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();
}
}