Mit folgender Anweisung wird ein leeres Array erzeugt, in welchem die Punkte als Objekte gespeichert werden. Das Array wird als globale Variable angelegt, damit man überall im Programmablauf darauf zugreifen kann.
let punktArray = [];
Die Objekt-Schablone "punktKlasse" bleibt unverändert.
class punktKlasse {
constructor(xkoord, ykoord, durchmesser, farbe) {
this.xkoord = xkoord;
this.ykoord = ykoord;
this.durchmesser = durchmesser;
this.farbe = farbe;
}
zeichnen() {
strokeWeight(this.durchmesser);
stroke(this.farbe);
point(this.xkoord, this.ykoord);
}
}
Beim Start des Programms werden 100 Punktobjekte mit zufälligen Eigenschaften erzeugt und im Array "punktArray" gespeichert
function setup() {
createCanvas(400, 400);
for (let i = 0; i < 100; i++) {
let dummyX = random(0, width);
let dummyY = random(0, height);
let dummyDurchmesser = random(1, 16);
let dummyRot = random(0, 255);
let dummyGruen = random(0,200);
let dummyBlau = random(0, 255);
let dummyFarbe = color(dummyRot, dummyGruen, dummyBlau);
let dummyPunkt = new punktKlasse(dummyX, dummyY, dummyDurchmesser, dummyFarbe);
punktArray.push(dummyPunkt);
}
}
In der draw()-Schleife werden die 100 Punkte, welche im "punktArray" gespeichert sind, gezeichnet.
function draw() {
background(240);
for (let i = 0; i < punktArray.length; i++) {
punktArray[i].zeichnen();
}
}
Erklärung der zufälligen Erzeugung eines Punktes:
//es wird ein zufälliger Wert für die x-Koordinate zwischen 0 und der Breite der Zeichenfläche in der Variable "dummyX" gespeichert
let dummyX = random(0, width);
//es wird ein zufälliger Wert für die y-Koordinate zwischen 0 und der Höhe der Zeichenfläche in der Variable "dummyy" gespeichert
let dummyY = random(0, height);
//es wird ein zufälliger Wert für den PunktDurchmesser zwischen 0 und 16 in der Variable "dummyDurchmesser" gespeichert
let dummyDurchmesser = random(1, 16);
//es wird ein zufälliger Wert für den Rotwert zwischen 0 und 255 in der Variable "dummyRot" gespeichert
let dummyRot = random(0, 255);
//es wird ein zufälliger Wert für den Grünwert zwischen 0 und 255 in der Variable "dummyGruen" gespeichert
let dummyGruen = random(0,200);
//es wird ein zufälliger Wert für den Blauwert zwischen 0 und 255 in der Variable "dummyBlau" gespeichert
let dummyBlau = random(0, 255);
//aus den Farbwerten wird eine p5.js-Farbvariable "dummyFarbe" angelegt
let dummyFarbe = color(dummyRot, dummyGruen, dummyBlau);
//es wird ein Objekt "dummyPunkt" mit den zufällig festgelegten Eigenschaften erzeugt.
let dummyPunkt = new punktKlasse(dummyX, dummyY, dummyDurchmesser, dummyFarbe);
//das Punktobjekt wird im Array "punktArray" gespeichert
punktArray.push(dummyPunkt);