Methoden in Processing

Am Ende des Kapitels solltest du

• in der Lage sein, eigene Methoden zu schreiben und an beliebiger Stelle aufzurufen,
• die Namenskonventionen für Methoden kennen,
• die eigenen Methoden mit Hilfe von Parametern flexibel gestalten können,
• in der Lage sein, ein Programm mit Hilfe von Methoden logisch zu strukturieren.

Bisher haben wir in allen Aufgaben und Beispielen die vordefinierten Methoden in Processing verwendet. Processing bietet aber auch die Möglichkeit, eigene Methoden zu schreiben und in den Programmen zu verwenden. Dies ist dann interessant, wenn wir dieselbe Anweisungsfolge mehrfach verwenden wollen bzw. in einer Methode mehrere verschiedene Aufgaben unterbringen möchten.

Beginnen wir mit folgendem kleinen Programm:

void setup(){
  size(400, 400);
  background(255);
}
 
void draw(){
  ellipse(200, 200, 20, 20);
}

Wir erstellen nun eine eigene Methode, die das Zeichnen des Kreises übernimmt und bauen sie nach und nach unseren Vorstellungen entsprechend um:

Sehen wir uns noch folgendes, etwas komplexeres Beispiel an, in dem wir auf drei verschiedene Arten Zeppeline auf der Zeichenfläche platzieren können:

float xPos; float yPos;   void setup(){ size(500, 300); background(255); }   void draw(){ drawZeppelin(width/2, height/2); }   void mousePressed(){ drawZeppelin(mouseX, mouseY); }   void keyPressed(){ drawZeppelin(random(300)+100, random(100)+100); }     void drawZeppelin(float xPos, float yPos){ stroke(100); fill(mouseX-245,mouseY-45, 100); ellipse(xPos, yPos, 100, 40); ellipse(xPos, yPos, 100, 30); ellipse(xPos, yPos, 100, 10); rectMode(CENTER); stroke(0); fill(0); rect(xPos, yPos+25, 20, 10); fill(255); rect(xPos, yPos+25, 15, 5); line(xPos, yPos+22, xPos, yPos+28); }

Das Beispiel verwendet die selbst verfasste Methode drawZeppelin(). Um Zeppeline an verschiedenen Positionen zeichnen zu können, besitzt die Methode darüberhinaus zwei Parameter, mit denen die Koordinaten des Ankerpunktes der Figur übergeben werden können. Ein Parameter hat die Form Datentyp Bezeichner (z.B. int durchmesser). Mehrere Parameter werden durch Kommas getrennt (z.B. (int x, int y)). In der Methode selbst nutzen wir nur Methoden, die bereits bekannt sind und die auf die Koordinaten des Ankerpunktes zurückgreifen um die komplexe Figur zu zeichnen. Die neue Methode kann nun in den anderen Methoden genutzt werden, indem wir sie über ihren Namen und die entsprechenden Parameterwerte aufrufen.

Hinweis: Um mehrere gleichartige Objekte zu zeichnen, gehen wir wie folgt vor: Wir erstellen eine Figur mit dem Mittelpunkt der Zeichenfläche (width/2, height/2) als Ankerpunkt. Alle anderen notwendigen Koordinaten werden von diesem Punkt ausgehend dargestellt (z.B. width/2 + 20). Ist die Figur fertiggestellt ersetzen wir alle Vorkommen von width/2 durch xPos und alle Vorkommen von height/2 durch yPos. Jetzt müssen wir xPos und xPos nur noch als Parameterwerte der Methode einsetzen und können über den Methodenaufruf die Figur an beliebiger Stelle zeichnen lassen.

Namenskonvention für Methoden

Methoden können wie Variablen beliebige Namen tragen. Aus Lesbarkeitsgründen sollte der Name einer Methode aber ausdrücken, was die Methode leistet (z.B. unsichtbarMachen()). Er sollte daher ein Verb enthalten. Methodennamen werden üblicherweise klein geschrieben. Falls sie aus mehreren Worten bestehen, sollten die Folgeworte mit Großbuchstaben beginnen (z.B. dieBesteMethodeVonAllenAusfuehren()).

Vertiefung: Video-Sequenz zum Thema "Methoden" (engl.)

Aufgabe 1

Folgender Code erstellt auf der Zeichenfläche ein Haus und einen Baum.

void setup(){
  size(500, 300);
}
 
void draw(){
  fill(255);
  rect(200, 150, 100, 80);
  fill(255, 0, 0);
  triangle(200,150,250,120,300,150);
  fill(0);
  rect(220, 170, 20, 20);
  rect(260, 170, 30, 60);
  fill(82, 49, 15);
  rect(395, 100, 20, 80);
  fill(0,255,0);
  ellipse(405, 70, 60, 80);
}

Erstelle in einem ersten Schritt jeweils eine Methode für das Zeichnen des Hauses und des Baums und rufe die beiden Methoden in der draw()-Funktion auf. Verändere anschließend die beiden Methoden mit Hilfe von Parametern so, dass Häuser und Bäume durch Aufruf in der draw()-Funktion an beliebiger Stelle erzeugt werden können.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

void setup(){
  size(500, 300);
}
 
void draw(){
  drawHouse();
  drawTree();
 
}
 
void drawHouse(){
  fill(255);
  rect(200, 150, 100, 80);
  fill(255, 0, 0);
  triangle(200,150,250,120,300,150);
  fill(0);
  rect(220, 170, 20, 20);
  rect(260, 170, 30, 60);
}
 
void drawTree(){
  fill(82, 49, 15);
  rect(395, 100, 20, 80);
  fill(0,255,0);
  ellipse(405, 70, 60, 80);
}

Lösung mit Parametern:

void setup(){
  size(500, 300);
}
 
void draw(){
  drawHouse(100,100);
  drawTree(300,100);
  drawHouse(350,100);
  drawTree(250,100);
 
}
 
void drawHouse(float xPos, float yPos){
  fill(255);
  rect(xPos, yPos, 100, 80);
  fill(255, 0, 0);
  triangle(xPos,yPos,xPos+50,yPos-30,xPos+100,yPos);
  fill(0);
  rect(xPos+20, yPos+20, 20, 20);
  rect(xPos+60, yPos+20, 30, 60);
}
 
void drawTree(float xPos, float yPos){
  fill(82, 49, 15);
  rect(xPos, yPos, 20, 80);
  fill(0,255,0);
  ellipse(xPos+10, yPos-30, 60, 80);
}

Die Aufgabe zeigt schön die Vorteile eigener Methoden für Teilaufgaben des Programms: Zum einen wird der Code übersichtlicher, zum anderen können die Teilaufgaben mehrfach ausgeführt und zudem mit Hilfe von Parametern auch noch flexibel gestaltet werden.

Aufgabe 2

Erstelle ein Programm mit dem eine UFO-Armee erzeugt werden kann. Das Zeichnen der Flugobjekte soll in einer eigenen Methode erfolgen.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

void setup(){
    size(500, 400);
    background(255);
    }
 
void draw(){
    ufo(150, 100, 100);
    ufo(200, 200, 30);
    ufo(300, 200, 40);
    ufo(400, 100, 60);
    ufo(180, 300, 30);
    }
 
void ufo(int x, int y, float b){
    noStroke();
    fill(100);
    ellipse(x, y, b, 4*b/5);
    ellipse(x, y, b*2.5, b/4);
    fill(255);
    ellipse(x-b/5-2, y-b/5, b/5, b/5);
    ellipse(x, y-b/5, b/5, b/5);
    ellipse(x+b/5+2, y-b/5, b/5, b/5);
    }

Aufgabe 3

Erstelle ein Programm, das mit Hilfe von zwei Punkten ein Gitter erzeugt. Für die Bewegung der zwei Punkte soll jeweils eine eigene Methode sorgen.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

float xPos1 = 0;
float yPos1 = 10;
float xPos2 = 10;
float yPos2 = 0;
 
void setup(){
  size(200, 200);
  background(0);
}
 
void draw(){
  stroke(255, 255, 0);
  point(xPos1, yPos1);
  move1();
  point(xPos2, yPos2);
  move2();
}
 
void move1(){
  xPos1 = xPos1+1;
  if(xPos1>width){xPos1=0; yPos1=yPos1+10;};
}
 
void move2(){
  yPos2 = yPos2+1;
  if(yPos2>height){yPos2=0; xPos2=xPos2+10;};
}

Aufgabe 4

a) Erstelle ein Programm, bei dem der Aufeinanderprall zweier Kugeln zu einer Explosion führt. Die Explosion wird von einer Methode explode() gesteuert. Für die Darstellung benötigt man ein entsprechendes Bild. Hilfreich sind die Funktionen dist() und noLoop()

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

float x1=0;
float y1=150;
 
float x2 = 500;
float y2 = 150;
 
PImage photo;
 
void setup(){
  size(500, 300);
  photo = loadImage("explosion.png");
}
 
void draw(){
  background(255);
  fill(0);
  ellipse(x1, y1, 20, 20);
  x1=x1+1;
  fill(0);
  ellipse(x2, y2, 20, 20);
  x2=x2-1;
  explode();
}
 
void explode(){
 
  if(dist(x1, y1, x2, y2)<1){image(photo, x1-100, y1-75);noLoop();};
}

b) Ändere das Programm so ab, dass eine Kugel auf der Zeichenfläche umherschießt und beim Aufprall auf eine "Bombe" explodiert. Erstelle dafür drei Methoden für die Darstellung der Kugel (display()), die Bewegung der Kugel (move()) und die Steuerung der Explosion (explode()).

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Startposition des Balles
float x = 100;
float y = 100;
//Geschwindigkeit des Balles in x- bzw. y-Richtung
float vX = 2;
float vY = 6;
 
PImage photo1;
PImage photo2;
 
void setup() {
  size(300,300);
  photo1 = loadImage("explosion.png");
  photo2 = loadImage("bombe.png");
}
 
void draw() {
  background(255);
  image(photo2, width/2, height/2);
 
display();
move(); 
explode();
}
 
void move(){
  //Bewegung des Balles
  x = x + vX;
  y = y + vY;
 
//Überprüfen, ob der Ball abprallt
  if ((x > width-10) || (x < 10)) {
    vX = -vX;
  }
  if ((y > height-10) || (y < 10)) {
    vY = -vY;
  }
}
 
void display(){
//Ball zeichnen
  fill(0);
  ellipse(x,y,20,20);
}
 
void explode(){
 
  if(dist(x, y, width/2+25,height/2+25)<10){image(photo1, width/2-75, height/2-75);noLoop();};
}

Aufgabe 5

a) Ändere das folgende Programm so ab, dass die Linie in alle Richtungen verlängert werden kann:

int xPos = 200;
int yPos = 200;
 
void setup(){
  size(400, 400);
  background(0);
}
 
void draw(){
  stroke(255, 0, 0);
  strokeWeight(3);
  point(xPos, yPos);
 
}
 
void keyPressed(){
  if(keyCode == RIGHT){xPos = xPos + 1;};
}

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

int xPos = 200;
int yPos = 200;
 
void setup(){
  size(400, 400);
  background(0);
}
 
void draw(){
  stroke(255, 0, 0);
  strokeWeight(3);
  point(xPos, yPos);
 
}
 
void keyPressed(){
  if(keyCode == RIGHT){xPos = xPos + 1;}
  else if(keyCode == LEFT){xPos = xPos - 1;}
  else if(keyCode == UP){yPos = yPos - 1;}
  else if(keyCode == DOWN){yPos = yPos + 1;};
}

b) Baue nun das Grundprinzip der Tastensteuerung so um, dass man damit einen Ballon steuern kann, der vor Wolken vorbei zieht. Benötigt werden zusätzlich eine Methode zeichneBallon() und eine Methode zeichneWolke().

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

//Position Ballon
int xPos = width/2;
int yPos = height/2;
//Position Wolken
int xPosW = width/2;
int yPosW = height/2;
 
void setup(){
  size(400, 200);
  background(0);
}
 
void draw(){ 
  background(0);
 
  zeichneWolke(xPosW, yPosW);
  zeichneWolke(xPosW+70, yPosW+10);
  zeichneWolke(xPosW+150, yPosW-20);
  zeichneWolke(xPosW+220, yPosW+40);
  zeichneWolke(xPosW+300, yPosW+20);
 
  zeichneBallon(xPos, yPos); 
}
 
void keyPressed(){
  //Tastensteuerung
  if(keyCode == RIGHT){xPos = xPos + 2; xPosW = xPosW - 2;}
  else if(keyCode == LEFT){xPos = xPos - 2; xPosW = xPosW +2;}
  else if(keyCode == UP){yPos = yPos - 3;}
  else if(keyCode == DOWN){yPos = yPos + 1;};
  //Aufsetzen des Ballons am Boden
  if(yPos>height-60){yPos=height-60;};
 
  if(xPosW>width){xPosW = (-1)*200;};
  if(xPosW+200<0){xPosW = width;};
}
 
void zeichneBallon(int xPos, int yPos){
  //Ballon
  fill(255, 0, 0);
  noStroke();
  ellipse(xPos, yPos, 50, 50);
  //Korb
  stroke(255);
  fill(255);
  rectMode(CENTER);
  rect(xPos, yPos+50, 20, 10);
  //Leinen
  line(xPos, yPos+25, xPos, yPos+50);
  line(xPos-10, yPos+23, xPos-10, yPos+50);
  line(xPos+10, yPos+23, xPos+10, yPos+50);
}
 
void zeichneWolke(int xPosW, int yPosW){
  fill(255);
  //Wolke zusammengesetzt aus 2 Kreisen und 2 Ellipsen
  ellipse(xPosW, yPosW, 40, 30);
  ellipse(xPosW+30, yPosW, 40, 30);
  ellipse(xPosW+15, yPosW-15, 30, 30);
  ellipse(xPosW+15, yPosW+15, 30, 30);
}

Exkurs: Bewegung auf der Kreisbahn

float xcenter;    // Mittelpunkt auf der x-Achse
float ycenter;    // Mittelpunkt auf der y-Achse
float rad = 10;   // Radius der Kreisbahn
float angle;      // aktueller Rotationswinkel
 
void setup () {
  size (550, 500);
 
  stroke(255,0,0);
  background (76);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
 
  // Rotationsmittelpunkt
  xcenter = width / 2;
  ycenter = height / 2;
}
 
void draw () {
 
 
  // Verschieben des Rotationswinkels
  angle += 0.04; 
  // Berechnung der aktuellen Position
  float x = xcenter + cos (angle) * rad;
  float y = ycenter + sin (angle) * rad;
 
 
  // Zeichnen des Kreises
  strokeWeight(2);
  point (x, y);
}