HAWK Hildesheim / SS 10 / Processing 1 / Dozent Jens Franke

setup & draw

Um ein Programm zu ordnen unterteilt man Anweisungen in Processing in einen setup- und einen draw-Block.

Der setup-Bereich wird einmalig zum Beginn eines Programmes ausgeführt. Hier definiert man z.B. die Größe der Zeichenfläche, die Hintergrundfarbe und das Anti-Aliasing für das Programm.

Hingegen wird der draw-Bereich kontinuierlich ausgeführt, sprich in diesem Bereich können sich Formen durch Veränderung der Anweisung, z.B. durch Veränderung der Mausposition, in ihrem Aussehen variieren. Der draw-Bereich wird solange aufs Neue ausgeführt bis das Programm gestoppt wird.

Beispiel:

void setup()
{
  size( 800, 600 );
  smooth();
  background( 120 );
}
 
void draw()
{
  fill( random( 255 ), random( 255 ), random( 255 ) );
  stroke( 0, 255, 0 );
 
  ellipse( 300, 300, 50, 50 );
}

Variablen

Um sich eine Variable bildlich vorzustellen, gibt es eine Vielzahl an Ansätzen. Bei den folgenden drei Beispielen sollte für jeden etwas dabei sein.

1. Eine Variable kann man sich wie eine Schublade vorstellen, die man beschriften und in die man etwas ablegen kann.

2. Eine Variable ist ein Notizzettel, auf dem man eine Information für längere Zeit festhalten kann.

3. Eine Variable dient als Datencontainer und hat eine bestimmte Adresse im Speicher.

Jede Variable definiert sich durch einen Namen und einen Typ.

Der Name einer Variable ist zum Beispiel age und sie ist vom Datentyp int. Über eine Zuweisung ( variable = Wert ) kann man den Wert der Variablen festlegen.

Beispiel:

int age = 25;

In der Folge kann man diese Variable immer wieder ändern. Dies erfolgt ohne den Datentyp, wobei zu beachten ist, dass der Wert weiterhin vom gleichen Datentyp sein muss.

// geht
age = 20;
// geht nicht
age = 20.5;

Datentypen

In den ersten Einheiten werden wir mit folgenden Datentypen arbeiten:

// ganze Zahlen, von -2,147,483,648 bis 2,147,483,647
int daysInMonth = 0;
// Gleitkommazahl von -3.40282347E+38 bis 3.40282347E+38
float averageAge = 25.5;
// möglicher Wert ist true oder false
boolean isSummerTime = true;
// ein einzelnes Zeichen, einfache Anführungszeichen oben
char letter = ‚a‘;
// Zeichenkette, doppelte Anführungszeichen oben
String myName = „Jens Franke“;

Bis auf den Datentyp String handelt es sich um primitive Datentypen. String zählt bereits zu komplexen Datentypen. In den kommenden Einheiten werden wir weitere Datentypen kennenlernen.

Wieso gibt es unterschiedliche Datentypen?

Alle Variablen müssen vom Computer gespeichert werden. Die verschiedenen Datentypen belegen unterschiedlich viel Speicher. Um diesen effektiv zu nutzen, empfiehlt es sich jeweils den passenden Datentyp zu verwenden.

Was ist bei der Namensgebung zu beachten?

- Der Name muss eindeutig sein.
- Der erste Buchstabe ist ein Kleinbuchstabe.
- Vordefinierte (reservierte) Wörter von Processing dürfen nicht verwendet werden.
- Der Name der Variable sollte beschreibend sein, sprich der Name gibt einen Hinweis auf den Inhalt.
- Variablen können aus mehreren Wörtern bestehen. Dabei wird für eine besser Lesbarkeit zwischen den Wörtern mit Groß- und Kleinschreibung (myName) getrennt. Diese Schreibweise nennt man CamelCase, Beispiel iPod.

In einem späteren Beitrag wird dieses Thema noch einmal ausführlich besprochen.

Mehr Informationen zu allen Datentypen findet man in der Hilfe unter dem Punkt Data: http://processing.org/reference/.

Variablen von Processing

Processing bietet einige Variablen, die bereits von Haus aus definiert sind:

// beinhaltet die Breite des Zeichenbereiches
width
// beinhaltet die Höhe des Zeichenbereiches
height
 
// Position der Maus auf der X-Achse
mouseX
// Position der Maus auf der Y-Achse
mouseY
 
// Boolean-Variable, die die Information beinhaltet,
// ob die Maus gedrückt true oder nicht gedrückt false ist
mousePressed

Beispiel, bei dem jeweils an der aktuellen Position der Maus Kreise gezeichnet werden.

float circleSize = random( 200 );
ellipse( mouseX, mouseY, circleSize, circleSize );

Verknüpfung und Kombination von Variablen

Variablen vom gleichen Datentyp lassen sich miteinander verknüpfen und kombinieren.

int myAge = 25;
int yourAge = 24;
 
int totalAge = myAge + yourAge;
 
String prefix = „Mein Name ist: „;
String myName = „Jens Franke“;
 
String text = prefix + myName;

Zu der Verarbeitung unterschiedlicher Datentypen kommen wir in einer der nächsten Einheiten.

Ausgabe von Werten

Um die Arbeitsweise von Programmen auf ihre Richtigkeit zu überprüfen, bietet Processing zwei Helfer-Methoden an, um sich Werte ausgeben zu lassen.

Die Methode print( data ) gibt in der Ausgabe den Wert in Klammern aus.

Die Methode println( data ) gibt ebenfalls den Wert in Klammern in der Ausgabe aus, erzeugt aber zusätzlich nach jedem Aufruf einen Zeilenumbruch.

noLoop()

Sobald man sein Programm mit setup() und draw() gliedert, werden alle Anweisung innerhalb des draw()-Bereiches bekanntlich kontinuierlich ausgeführt. Um diesen Bereich lediglich einmalig auszuführen, kann man am Ende des setup-Bereiches die Helfer-Methode noLoop() einsetzen.

Schleifen

Wiederholung ist ein essentielles Werkzeug um generative Grafiken zu erzeugen. Aber dabei sollte das zeilenweise duplizieren und wiederholen von Programmieranweisungen vermieden werden. Ein wichtiges Konzept, um Anweisungen mit wenigen Zeilen Programmcode mehrfach auszuführen ist der Einsatz von Schleifen.

Es gibt mehrere Arten von Schleifen. Im ersten Schritt werden wir die while-Schleife unter die Lupe nehmen.

Die Anweisungen innerhalb der while-Schleife (eingerahmt von den geschweiften Klammern), wird solange die Bedingung wahr ist ausgeführt.

while( Bedingung )
{
    Anweisung;
}

Beispiel, das 10 Kreise auf der X-Achse verteilt:

int count = 0;
 
  while( count < 10 )
  {
    float circleSize = random( 50 );
    ellipse( 100 + count * 50, 200, circleSize, circleSize );
    count++;
  }

Anlaufstellen für Farben

Wer auf der Suche nach neuen, frischen und passenden Farbwelten ist, der wird hier fündig:

http://www.colourlovers.com/
http://kuler.adobe.com/

Hausaufgabe

Eine Hausaufgabe sollte mit Hilfe der Maus erstellt werden. Die anderen beiden Grafiken sollt ihr mit while-Schleifen realisieren.

Die bekannten Gesetze der Gestaltung sollten angewendet werden und der richtige Einsatz von Farbe sollte ebenfalls überdacht werden.

Informationen zum Dateiformat, der Bezeichnung und zum Upload der Dateien sind unter dem Punkt Prüfungsleistung zu finden.

Die Beispiele der Woche können hier herunter geladen werden.