12.1.7 Objekte und Klassen

Bezug zum Kerncurriculum:
Ich kann zwischen primitiven Datentypen und Objektreferenzen unterscheiden.
Ich kann Algorithmen unter Verwendung von gegebenen und eigenen Klassen/Objekten entwerfen und implementieren.

7.1 Ellipsen als Objekte

Mit Hilfe von Variablen wird der Programmablauf gesteuert und die Eigenschaften von "Objekten", die auf dem Bildschirm ausgegeben werden, festgelegt. Diese Eigenschaften können mit Hilfe von Operationen verändert werden. Im letzten Kapitel wurden auf diese Weise einige Ellipsen auf den Bildschirm gezeichnet:

In einem neuen Fenster starten: Ellipsen malen

Dieses Programm soll jetzt so weiter entwickelt werden, dass ein Kreis während des Programmablaufs geändert werden kann. Zum Beispiel soll seine Position oder seine Größe geändert werden können.

7.2 Objekt-Attribute

Im ersten Schritt werden die Attribute des Kreises in einem Objekt zusammengefasst. Auf diese Weise ist immer klar, zu wem oder was eine Variable gehört, denn der Name des Objekts wird zusammen mit dem Attribut genannt:

In einem neuen Fenster starten: Kreis malen

7.3 Objekt-Operationen

Im zweiten Schritt wird dem Objekt "objKreis" auch die Operation hinzugefügt, mit welcher der Kreis gemalt wird. In "draw" lautet die Anweisung, um den Kreis zu zeichnen, nur noch objKreis.malen(); und alle Attribute und Operationen stehen übersichtlich im Block "objKreis".

In einem neuen Fenster starten: Kreis mit nur einer Anweisung malen

7.4 Klasse als Objektschablone

Im dritten Schritt soll es möglich sein, nicht nur einen, sondern viele Kreise zu zeichnen, ohne dass für jeden Kreis ein eigener Block geschrieben wird. Dazu wird aus dem Objekt "objKreis" eine Objektschablone "kreisKlasse" gemacht, die man auch eine Klasse nennt. Mit Hilfe des Schlüsselworts "new" kann aus einer Objektschablone ein Objekt erzeugt werden.

In einem neuen Fenster starten: Kreisobjekt aus Kreisobjektschablone erzeugen

7.5 Übung 1: Animierte Kreise

Aufgabe
Lösungsvorschlag

Ergänzen Sie das letzte Programm so, dass mindestens 3 verschiedene Kreise gezeichnet werden.
Fügen Sie eine Operation verschieben(x, y) in die "kreisKlasse" ein, mit der ein Kreis verschoben werden kann.
Ändern Sie das Hauptprogramm so, dass die Kreise automatisch verschoben werden (Animation).

class kreisKlasse {
  constructor(fuellfarbe, randfarbe, randdicke, xKoord, yKoord, durchmesser) {
    this.fuellfarbe = fuellfarbe;
    this.randfarbe= randfarbe;
    this.randdicke = randdicke;
    this.xKoord = xKoord;
    this.yKoord = yKoord;
    this.durchmesser = durchmesser;
  }
  malen() {
    stroke(this.randfarbe);
    strokeWeight(this.randdicke);
    fill(this.fuellfarbe);
    ellipse(this.xKoord, this.yKoord, this.durchmesser, this.durchmesser);     
  }
  verschieben(x, y) {
    this.xKoord = this.xKoord + x;
    this.yKoord = this.yKoord + y;
  }
}

let kreis1 = new kreisKlasse('skyblue', 'seagreen', 5, 50, 50, 80);
let kreis2 = new kreisKlasse('indigo', 'thistle', 10, 250, 120, 60);
let kreis3 = new kreisKlasse('orange', 'tomato', 7, 300, 280, 120);

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(250);
  kreis1.malen();
  kreis2.malen();
  kreis3.malen();

  if (frameCount % 2 == 0) { 
    kreis1.verschieben(1, 2); 
    kreis2.verschieben(-1, -2);  
    kreis3.verschieben(1, -3);
  }  
}

new p5();

In einem neuen Fenster starten: Ellipsen malen

7.6 Übung 2: Objekte und Klassen

Aufgabe
Lösungsvorschlag

Denken Sie sich ein kleines Programm aus, wo gleichartige Objekte erzeugt werden.
Realisieren Sie das Programm mit einer Objektschablone.