dansende ballen in een array terug naar de inleiding
De schets is de p5.js versie van de dansende ballen schets in processing
In regel 2 wordt het array "bal" met het = teken geconstrueerd. In de for lus krijgt het array 10 objecten van de class "Ballen".
Door de constructor in regel 7 krijgen de ballen in setup een random begin positie en het array wordt zo een array van het type "Ballen"
Dit is een groot verschil met de code in processing ,
In processing wordt een array, van het type "Ballen", gedeclareerd met "Ballen [ ] bal;" (dus geen = teken) en in setup met bal = new Ballen[10] wordt geinitieerd.
.
bal = [];
function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 10; i++)
{
bal[i] = new Ballen(random(0,width), random(0, height));
}
}
function draw() {
background('#E6FBFF');
for (let i = 0; i < 10; i++)
{
bal[i].display();
bal[i].randcontrole();
bal[i].snelh();
}
}
function keyPressed() {
if (key == 's') {
noLoop();
}
if (key == 'r') {
loop();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
}
De class "Ballen"
Met "this" voor de variabelen wordt aangegeven dat ze in alle delen van de class beschikbaar zijn.
De variabelen tussen de krulhaken van de constructor zijn zo ook toegankelijk voor de methodes
door het gebruik van "this" is het niet nodig om de variabelen in het globale deel van de classe te declareren.
Het is ook niet nodig om een variabele type te declareren.
In p5.js is het niet nodig om de constructor variabelen aan een andere variabele te geven. (zie regel 4 en 5)
Constructor variabelen die alleen binnen de constructor krulhaken worden gebruik hoef je niet met "this" aan te geven.
width en height zijn globale systeem variabelen dus mag er geen "this" voor staan.
Met this voor deze variabelen verdwijnen de ballen uit beeld en er ontstaat geen foutmelding.
class Ballen {
constructor(x, y) {
this.x = x;
this.y = y;
this.xsnelh = 4;
this.ysnelh = 4;
}
snelh() {
this.x = this.x + this.xsnelh;
this.y = this.y + this.ysnelh;
}
randcontrole() {
if (this.x > width || this.x < 0) this.xsnelh = this.xsnelh*-1;
if (this.y > height || this.y < 0) this.ysnelh = this.ysnelh*-1;
}
display() {
fill(255, 0, 0);
ellipse(this.x, this.y , 20, 20);
}
}