Wozu OOP?


Der Quellcode, um drei Punkte in die Zeichenebene zu setzen, ist im objektorientierten Programmieransatz deutlich umfangreicher, als bei den beiden anderen Ansätzen. Da es einem Anwender ziemlich gleichgültig ist, wie ein Programm programmiert wurde, solange es wie gewünscht funktioniert, muss der Vorteil des objektorientierten Ansatzes auf der Programmierseite liegen.

Punkt prozedural verschieben

Im prozeduralen Programmieransatz könnte man einen Punkt verschieben, indem man für die Koordinaten Variablen einführt und dann die Koordinaten-Variablen eines Punktes ändert. Die Bezeichnung der Variablen erlaubt es zu erkennen, welche Variable zu welchem Punkt gehört.

Die Variablen, welche die Eigenschaften eines Punktes festlegen und die Methode, mit welcher ein Punkt gemalt wird, sind getrennt voneinander. Man muss als Programmierer Disziplin haben, damit die Bezeichnungen fehlerfrei gelingen.

In einem neuen Fenster starten: Punkt prozedural verschieben


Punkt objektorientiert verschieben

Im objektorientierten Ansatz kann man alle Eigenschaften und Methoden in einer Struktur zusammenfassen. Man ergänzt also die Objektschablone mit einer Methode "verschieben(neuX, neuY)", mit welcher die x- und y-Koordinate eines Punktes nachträglich geändert werden kann.

In der neuen Methode "verschieben(neuX, neuY)" wird den Koordinaten eines Objekts "this.xkoord" und "this.ykoord" ein neuer Wert zugeordnet. Das Schlüsselwort "this" sorgt dafür, dass jedes Objekt seine eigenen Variablen für die Koordinaten hat.

Ausserhalb der Klasse werden keine Variablen benötigt, so dass die Programmstruktur klar und organisiert bleibt. In der Hauptschleife "draw()" wird über den Aufruf der Methode "punkt01.verschieben(100, 120)" sofort klar, welcher Punkt verschoben wird. Es gibt also keine irgendwo isoliert notierten Variablen, bei denen man aus dem Namen schließen muss oder wo man im Quellcode suchen muss, wofür sie da sind.

In der objektorientierten Programmierung sind Variablen (Attribute) und die Funktionen für deren Veränderung (Methoden) in einer Struktur (Objekt-Schablone oder Klasse) übersichtlich zusammengefasst.

In einem neuen Fenster starten: Punkt objektorientiert verschieben


Interaktion

Bei modernen Programmen sind wir gewohnt, dass eine Interaktion möglich ist, wodurch Eigenschaften geändert werden. Ganz extrem ist das bei Computerspielen, in denen ständig interagiert wird. Im objektorientierten Ansatz werden die auf dem Schirm sichtbaren Objekte, die verändert werden sollen, auch auf Programmierseite als Objekte programmiert. Wenn mehrere Programmierer am Projekt arbeiten, ist jeder für die eigenen Objekte verantwortlich und es werden nur die Schnittstellen ausgetauscht, wie Daten ausgegeben und entgegengenommen werden.

Das Punkt-Beispiel soll so erweitert werden, dass der Punkt 1 mit der Maus verschoben werden kann. Dazu fügt man die Funktion "mouseClicked()" ein, die aufgerufen wird, wenn man eine Maustaste geklickt oder auf einem Tablet auf die Zeichenfläche getippt hat.

Das Verschieben eines Punktes ist jetzt super einfach: In der Funktion "mouseClicked()" ruft man die Methode "punkt01.verschieben(mouseX, mouseY);" auf und übergibt als Parameter die aktuellen Mauskoordinaten. Das war es schon!

ACHTUNG: Wenn man auf ein Punkt-Objekt ausserhalb der draw()-Schleife zugreifen möchte, dann muss man ein Punkt-Objekt als globale Variable ausserhalb der draw-Funktion anlegen. Das ist hier notwendig, da die mouseClicked()-Funktion ausserhalb der draw()-Schleife aufgerufen wird.

In einem neuen Fenster starten: Interaktion

Eine Objektschablone zu programmieren ist aufwändig und wegen des "this"-Schlüsselworts sieht der Quellcode unverständlich aus. Wenn man aber diese Hürde genommen hat, wird man als Programmierer mit einer super klaren Programmstruktur belohnt:

function mouseClicked() {
  punkt01.verschieben(mouseX, mouseY);
}

Bei dieser Anweisung ist sofort klar, welchen Punkt man verändert. Wenn Sie den Punkt 2 verschieben wollen, dann können Sie einfach den Objektnamen "punkt01" mit "punkt02" ersetzen und der Punkt 2 wird verschoben. Versuchen Sie das einmal.


Objekte automatisch erzeugen lassen

Bei interaktiven Programmen, wie Computerspielen, werden viele Objekte automatisch erzeugt. Beim klassischen Computerspiel "Tetris" werden zum Beispiel die Blöcke automatisiert erzeugt und bewegt und verschwinden wieder, wenn man sie richtig angeordnet hat.

Im objektorientierten Ansatz kann man diese automatiserte Produktion elegant lösen. Das sollen Sie anhand des Punkte-Beispiels nachvollziehen.

Klicken Sie wiederholt auf "Neu laden", um jeweils 100 zufällige Punkt zu erzeugen.

In einem neuen Fenster starten: Objekte automatisch erzeugen lassen


Übungsaufgabe

Ändern Sie das Punkte-Erzeugungs-Programm so, dass 100 verschiedene Rechtecke auf die Zeichenfläche gezeichnet werden.

Informieren Sie sich auf der p5.js-Seite, wie man ein Rechteck zeichnet und passen Sie das Programm entstsprechend an.

In einem neuen Fenster starten: Objekte automatisch erzeugen lassen