Lektion 2
Lektion 2
Beispiel 5 - Framework
Dies Beispiel produziert das selbe Resultat wie Beispiel 4, doch der Kode ist ein bisschen anders. Der Kode ist in 2 Funktionen gepackt.
Diese Funktionen sind speziell in dem Sinne, dass sie von Processing aufgerufen werden. Die Funktion 'setup' wird beim Programmstart aufgerufen. 'draw' wird jedesmal aufgerufen, wenn das Fenster neu gezeichnet werden soll.
int radiusX = 200;
int radiusY = 100;
void setup()
{
size(400,400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
strokeJoin(ROUND);
noFill();
}
void draw()
{
background(255); // def. hintergrundfarbe
stroke(200,0,0,100); // def. zeichenfarbe
ellipse(100,100,radiusX,radiusY);
stroke(0,0,0,100); // def. zeichenfarbe
beginShape();
vertex(10,310);
vertex(200,40);
vertex(300,300);
vertex(50,50);
vertex(350,150);
endShape();
}
Beispiel 6 - Funktionen
In diesem Beispiel wird die Nutzung von Funktionen gezeigt. Vereinfacht(und leider nicht ganz richtig) könnte man sagen, Funktionen sind wie ein Textblock der den Inhalt der Funktion an die Stelle eingefügt, wo man den Funktionsnamen schreibt. In unserem Beispiel wird eine Funktion mit dem Namen 'smiley' definiert, diese Zeichnet natürlich einen Smiley.
Eine Funktion ist wie folgt definiert:
[Rückgabe Type] Funktionsname([Parameter])
{
[Funktions Inhalt]
}
In unserem Fall ist der Funktionsname 'smiley'. Die Funktion besitzt keine Parameter, darum sind die Klammern leer. 'void' Bezeichnet den Rückgabe-Wert, unsere 'smiley' Funktion gibt keinen Rückgabe-Wert zurück, daher schreiben wir 'void', was soviel heisst wie unspezifiziert.
int radiusX = 200;
int radiusY = 100;
void setup()
{
size(400,400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
smiley(); // funtions aufruf
}
// funktion
void smiley()
{
noFill();
ellipse(200,200,180,180); // kopf
fill(0);
ellipse(200 - 30,200 - 30,20,20); // linkes augen
ellipse(200 + 30,200 - 30,20,20); // rechtes augen
noFill();
arc(200,200,100,100,radians(20),radians(180-20)); // mund
}
Beispiel 7 - Funktionsparameter
Dieses Beispiel zeigt die stärken der Nutzung von Funktionen. Die Funktion 'smiley' wird um 2 Parameter erweitert. Über diese Parameter kann ich die Position des Smiley steuern.
int radiusX = 200;
int radiusY = 100;
void setup()
{
size(400,400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
smiley(radiusX,radiusY); // funtions aufruf
}
// funktion
void smiley(int posX,int posY)
{
noFill();
ellipse(posX,posY,180,180); // kopf
fill(0);
ellipse(posX - 30,posY - 30,20,20); // linkes augen
ellipse(posX + 30,posY - 30,20,20); // rechtes augen
noFill();
arc(posX,posY,100,100,radians(20),radians(180-20)); // mund
}
Beispiel 8 - Animation
Linie 13 ist eigentlich die einzige Veränderung zum vorherigen Bespiel. Doch die beiden Variablen '
mouseX' und '
mouseY' sind nicht definiert. Das kommt daher, dass diese beiden Variablen von Processing vordefiniert sind, sie werden vom Framework jeweils mit der aktuellen Maus-Position beschrieben.
Wenn ihr das Beispiel ausprobiert bemerkt ihr, dass der Smiley dem Mauszeiger folgt. Eigentlich ist dies ja schon eine Animation, wie kommt dies zustande ? Wie vorher schon erwähnt wird die Funktion 'draw' von Processing aufgerufen, per Default ist Processing so eingestellt das 'draw' 60 mal in der Sekunde aufgerufen wird(60 Frames per Second-fps). Mit dem Befehl '
frameRate' könnte ihr die Framerate selber ändern.
Was passiert wenn ihr die Zeile 11 löscht oder auskommentiert ?
void setup()
{
size(400,400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
smiley(mouseX,mouseY); // funtions aufruf
}
// funktion
void smiley(int posX,int posY)
{
noFill();
ellipse(posX,posY,180,180); // kopf
fill(0);
ellipse(posX - 30,posY - 30,20,20); // linkes augen
ellipse(posX + 30,posY - 30,20,20); // rechtes augen
noFill();
arc(posX,posY,100,100,radians(20),radians(180-20)); // mund
}
Beispiel 9 - Bedingungen
In der Programmierung gibt es Befehle mit denen man Bedingungen abbilden kann. Durch solche Bedingungen kann man Programmteile ausführen oder nicht. Hierfür nutzt man den Befehl 'if', z.B.:
if(x == 10) // Bedingung
{ // x ist wirklich 10
}
else
{ // x ist nicht gleich 10
}
Die Bedingung ist ein Boolischer Ausdruck, hierfür gibt es folgende Operatoren:
- gleich ==
- ungleich !=
- grösser als >
- kleiner als <
- grösser gleich >=
- kleiner gleich <=
- logisch Und &&
- logisch Oder ||
int SMILEY_DEFAULT = 1;
int SMILEY_SAD = 2;
int SMILEY_DRUNK = 3;
int SMILEY_ANGRY = 4;
int SMILEY_OLD = 5;
int SMILEY_ASTOUND = 6;
int SMILEY_SLEEPY = 7;
int SMILEY_HORNY = 8;
int SMILEY_PANIC = 9;
int smileyType = SMILEY_DEFAULT;
void setup()
{
size(400, 400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
// teste ob der mauszeiger innerhalb des smiley ist
if (mouseX > (width * .5 - 90) &amp;&amp; mouseX < (width * .5 + 90) &amp;&amp;
mouseY > (height * .5 - 90) &amp;&amp; mouseY < (height * .5 + 90))
// die mouse ist im smiley, smiley mag das nicht
smileyType = SMILEY_SAD;
else
smileyType = SMILEY_DEFAULT;
pushMatrix();
translate(width * .5, width * .5);
smiley(smileyType); // funtions aufruf
popMatrix();
}
// funktion
void smiley(int smileyType)
{
noFill();
ellipse(0, 0, 180, 180); // kopf
fill(0);
if ((smileyType &amp; SMILEY_SAD) > 0)
{
ellipse(0 - 30, 0 - 30, 20, 5); // linkes augen
ellipse(0 + 30, 0 - 30, 20, 5); // rechtes augen
}
else
{
ellipse(0 - 30, 0 - 30, 20, 20); // linkes augen
ellipse(0 + 30, 0 - 30, 20, 20); // rechtes augen
}
noFill();
if (smileyType == SMILEY_SAD)
arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
else
arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
}
Beispiel 10 - Keyboard Event
int SMILEY_DEFAULT = 1;
int SMILEY_SAD = 2;
int SMILEY_DRUNK = 3;
int SMILEY_ANGRY = 4;
int SMILEY_OLD = 5;
int SMILEY_ASTOUND = 6;
int SMILEY_SLEEPY = 7;
int SMILEY_HORNY = 8;
int SMILEY_PANIC = 9;
int smileyType = SMILEY_DEFAULT;
void setup()
{
size(400, 400); // def. fenstergroesse
smooth(); // aktiviere antialiasing
strokeWeight(15); // linienbreite
}
void draw()
{
background(255); // def. hintergrundfarbe
pushMatrix();
translate(width * .5, width * .5);
smiley(smileyType); // funtions aufruf
popMatrix();
}
void keyPressed()
{
switch(key)
{
case '1':
smileyType = SMILEY_DEFAULT;
break;
case '2':
smileyType = SMILEY_SAD;
break;
case '3':
smileyType = SMILEY_DRUNK;
break;
}
}
// funktion
void smiley(int smileyType)
{
// kopf
noFill();
ellipse(0, 0, 180, 180); // kopf
// augen
fill(0);
if (smileyType == SMILEY_SAD)
{
ellipse(0 - 30, 0 - 30, 20, 5); // linkes augen
ellipse(0 + 30, 0 - 30, 20, 5); // rechtes augen
}
else if (smileyType == SMILEY_DRUNK)
{
line(-50, -40, -10, -10);
line(-50, -10, -10, -40);
line(50, -40, 10, -10);
line(50, -10, 10, -40);
}
else
{
ellipse(0 - 30, 0 - 30, 20, 20); // linkes augen
ellipse(0 + 30, 0 - 30, 20, 20); // rechtes augen
}
// mund
noFill();
if (smileyType == SMILEY_SAD)
arc(0, 60, 100, 100, radians(180+20), radians(360-20)); // mund
else if (smileyType == SMILEY_DRUNK)
{
line(-50, 20, 50, 20);
arc(-10, 15, 50, 70, radians(20), radians(180-20)); // mund
}
else
arc(0, 0, 100, 100, radians(20), radians(180-20)); // mund
}
Aufgabe:
- Erweitere das Programm so, dass alle Gesichstzustände darstellbar sind
Beispiel 7 - Funktionsparameter
Dieses Beispiel zeigt die stärken der Nutzung von Funktionen. Die Funktion 'smiley' wird um 2 Parameter erweitert. Über diese Parameter kann ich die Position des Smiley steuern.
Beispiel 10 - Keyboard Event