Quelltext der Seite Methoden in Processing

<div style="background-color:#A9E2F3; padding:10px; margin-bottom:30px;">
'''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,
* Kreisbewegungen darstellen können.
</div>

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:

<div style="margin-left:50px;">
<syntaxhighlight lang="java">
void setup(){
  size(400, 400);
  background(255);
}

void draw(){
  ellipse(200, 200, 20, 20);
}
</syntaxhighlight>
</div>


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


<div style="margin-left:200px;">{{#ev:youtube |a2kikZDsuzY|410}}</div>


Sehen wir uns noch folgendes, etwas komplexeres Beispiel an, in dem wir auf drei verschiedene Arten Zeppeline auf der Zeichenfläche platzieren können:
<table><tr>
<td>
<div style="margin-left:50px;">
<syntaxhighlight lang="java">
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);
}
</syntaxhighlight>
</div>
</td>
<td style="padding-left:50px;">
[[Datei:proc_meth_1.JPG]]
</td>
</tr></table>

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.

<strong>Hinweis:</strong> 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:''' [https://youtu.be/XCu7JSkgl04?list=PLRqwX-V7Uu6ajGB2OI3hl5DZsD1Fw1WzR Video-Sequenz zum Thema "Methoden" (engl.)]

<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
'''Aufgabe 1'''

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

<div style="margin-left:50px;">
<syntaxhighlight lang="java">
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);
}
</syntaxhighlight>
</div>

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.


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
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);
}
</syntaxhighlight>


Lösung mit Parametern:

<syntaxhighlight lang="java">
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);
}
</syntaxhighlight>
</popup>
</div>

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.


<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
'''Aufgabe 2'''

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


<div style="margin-left:200px;">[[Datei:pro_meth_2.JPG]]</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
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);
    }
</syntaxhighlight>
</popup>

'''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.


<div style="margin-left:200px;">{{#ev:youtube |pf3IvwKDmm8|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
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;};
}
</syntaxhighlight>
</popup>


'''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 '''[https://processing.org/reference/dist_.html dist()]''' und '''[https://processing.org/reference/noLoop_.html noLoop()]''' 


<div style="margin-left:200px;">{{#ev:youtube |NaYCN_M0VmE|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
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();};
}

</syntaxhighlight>
</popup>


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()''').

<div style="margin-left:200px;">{{#ev:youtube |MkpIa0BAInM|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
//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();};
}

  
</syntaxhighlight>
</popup>


'''Aufgabe 5'''

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


<div style="margin-left:50px;">
<syntaxhighlight lang="java">
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;};
}
</syntaxhighlight>
</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
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;};
}
</syntaxhighlight>
</popup>


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()'''.

<div style="margin-left:200px;">{{#ev:youtube |LzzftIK_Iy4|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
//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);
}
</syntaxhighlight>
</popup>
</div>

'''Exkurs: Bewegung auf der Kreisbahn'''

Bisher haben wir nur lineare Bewegungen in Processing simuliert. Wir wollen nun unser Spektrum erweitern und uns Kreisbewegungen zuwenden. Dazu müssen wir auf einige mathematische Vorkenntnisse zurückgreifen. Gehen wir vom bekannten ''Einheitskreis'' aus:

<div style="margin-left:200px;">[[Datei:proc_meth_3.JPG]]</div>

Wenn wir die Formeln entsprechend umformen, erhalten wir x- bzw. y-Koordinate des Punktes der sich in Abhängigkeit des Winkels auf der Kreisbahn bewegt:

x = r * cos(alpha);

y = r * sin(alpha);

Damit können wir jetzt das Programm umsetzen. Wir müssen den Winkel jeweils um einen kleinen Betrag ändern und können so den Weg eines Punktes auf der Kreisbahn verfolgen.


<syntaxhighlight lang="java">
float xcenter;                 // Mittelpunkt auf der x-Achse
float ycenter;                 // Mittelpunkt auf der y-Achse
float r = 200;                 // Radius der Kreisbahn
float alpha = 0;               // aktueller Rotationswinkel
 
void setup () {
  size (550, 500); 
  background (220);
  
  //Koordinatensystem
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
 
  // Rotationsmittelpunkt
  xcenter = width / 2;
  ycenter = height / 2;
}
 
void draw () {
 
  // Veränderung des Rotationswinkels
  alpha += 0.03; 
  
  // Berechnung der aktuellen Position
  float x = xcenter + cos (alpha) * r;
  float y = ycenter + sin (alpha) * r;
 
 
  // Zeichnen des Kreises
  stroke(255,0,0);
  strokeWeight(2);
  point (x, y);
}
</syntaxhighlight>


<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
'''Aufgabe 6'''

Ändere nun das obige Programm so ab, dass ein Dreieck um den Einheitskreis wandert. Lagere dabei das Zeichnen des Koordinatensystems und das Zeichnen des Dreiecks jeweils in eine eigene Methode aus.


<div style="margin-left:200px;">{{#ev:youtube |o_1o58Pgzog|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
float xcenter;                 // Mittelpunkt auf der x-Achse
float ycenter;                 // Mittelpunkt auf der y-Achse
float r = 200;                 // Radius der Kreisbahn
float a = 0;                   //Startwinkel
float alpha = radians(a);      // aktueller Rotationswinkel
 
void setup () {
  size (550, 500); 
  background (220);
  frameRate(20);
 
  // Rotationsmittelpunkt
  xcenter = width / 2;
  ycenter = height / 2;
}
 
void draw () {
  background(0);
  
  koordinatensystem();
  
  move();
}

void koordinatensystem(){
  //Koordinatensystem
  stroke(255);
  strokeWeight(1);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
  noFill();
  ellipse(width/2, height/2, r*2, r*2);
}

void move(){
   // Veränderung des Rotationswinkels
  alpha += 0.03; 
  
  // Berechnung der aktuellen Position des wandernden Punktes
  float x = xcenter + cos (alpha) * r;
  float y = ycenter + sin (alpha) * r;
 
 
  // Zeichnen der Dreieckslinien
  stroke(255,255,0);
  line(width/2, height/2, x, y);
  stroke(255, 0, 0);
  line(x, y, x, height/2);
}
</syntaxhighlight>
</popup>

'''Aufgabe 7'''

Die Grundidee der Kreisbewegung kann auch für das Erzeugen einer Spirale genutzt werden. Die Spirale, die durch eine Abfolge von Ellipsen erzeugt wird, soll dabei in einer eigenen Methode erfolgen.


<div style="margin-left:200px;">{{#ev:youtube |P049_hE5jQ4|410}}</div>


<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
float r = 10;
float alpha = radians(0);
int c = 255;
 
 
void setup(){
 size(500, 500);
 background(0);
 smooth();
 frameRate(200);
}
 
void draw(){

  spirale();
 
}
 
void spirale (){
  //Die Spirale wird von einem Punkt beschrieben, der sich auf einer Kreisbahn immer weiter vom Startpunkt (width/2, height/2) entfernt.
  
  float x = r * cos(alpha);
  float y = r * sin(alpha);
 
  noStroke();  
  fill(c);
 
  ellipse(width/2 + x , height/2 + y, 16, 16);
  alpha += 0.01; 
 
  //Vergrößerung des Radius um Spiraleffekt zu erzeugen
  r+=0.05; 
}
</syntaxhighlight>
</popup>


[http://www.mathematische-basteleien.de/spirale.htm Anregungen für weitere Spiralen]


Einen interessanten Effekt kann man erzielen, indem man die folgenden beiden Zeilen zu Beginn der ''draw()''-Funktion einfügt:
 

<syntaxhighlight lang="java">
  fill(0, 7);
  rect(0, 0, width, height);
</syntaxhighlight>


Dadurch wird bei jeder Aktualisierung der ''draw()''-Funktion ein transparentes Rechteck über die Zeichenfläche gelegt, wodurch der Eindruck entsteht, ein Kreis mit Schweif würde die Spirale beschreiben. Dieser Effekt spielt auch bei folgendem Programm eine Rolle:
</div>

<syntaxhighlight lang="java">
float alpha = 0.0;
float v = 0.05;
float r = 90.0;

//Faktor, der die Kreisform der äußeren Figur aufhebt
float sx = 3.0;
float sy = 1.5;

void setup(){
  size(400, 400);
  noStroke();
}

void draw(){
  //Nachzieheffekt durch transparenten Hintergrund
  fill(0, 6);  
  rect(0, 0, width, height);
  
  //Festlegung der Koordinaten des "Führungskreises"
  alpha += v;
  float s = sin(alpha);
  float c = cos(alpha);
  
  float x = 200 + (c * r);
  float y = 200 + (s * r);
  
  //Kleiner "Führungskreis
  fill(255);
  ellipse(x, y, 1, 1);
  
  //Berechnung der äußeren Figur auf der Basis der Koordinaten des inneren Kreises
  float x2 = x + cos(alpha * sx) * r/2;
  float y2 = y + sin(alpha * sy) * r/2;
 
  ellipse(x2, y2, 6, 6); 
}
</syntaxhighlight>


<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
'''Aufgabe 7'''

Experimentiere mit den Parametern des obigen Programms um eigene kreative Ergebnisse zu erzielen.

</div>

[https://youtu.be/ggbwa1--sko Weitere Anregungen zum Thema]