HAWK Hildesheim / SS 09 / Processing / Dozent Jens Franke

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.

Space-Bar

Bildquelle: http://www.odopod.com/

Um in alter „Joshua Davis“-Manier durch Drücken der Space-Bar eine neue Variante seines Grafik-Programmes zu erzeugen, muss man innerhalb der vorgegeben Methode keyPressed abfragen, ob die Space-Taste gedrückt wurde. Wenn ja erzwingt die Anweisung redraw() ein einmaliges Ausführen des draw()-Bereiches und somit ein Neuzeichnen des Zeichenbereiches.

Beispiel:

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++;
  }

Verschachtelte Schleifen

Schleifen lassen sich natürlich auch ineinander verschachteln. Dabei befindet sich innerhalb einer Schleife eine zweite Schleife. Die äußere Schleife erstellt in dem folgenden Beispiel insgesamt drei Reihen. Sobald eine neue Reihe erstellt wird, wird die aktuelle Spaltenanzahl auf null gesetzt, um auch in dieser Reihe 10 neue Spalten zu erstellen.

Um ein Bild für den Kopf zu haben, empfiehlt sich die Vorstellung eines Schachbrettes.

Beispiel:

void draw()
{
  background( 120 );
 
  // Startwerte werden gesetzt
  int row = 0;
  int column = 0;
 
  // drei Reihen sollen erstellt werden
  while( row < 3 )
  {
    // bei jedem Wechsel zu einer neuen Reihen
    // werden 10 neue Spalten erstellt
    column = 0;
    while( column < 10 )
    {  
      // zufällig Größe der Kreise definieren   
      float circleSize = random( 50 );
      // Position auf der X-Achse
      int xPos = 100 + column * 50;
      // Position auf der Y-Achse
      int yPos = 100 + row * 50;
      // einen Kreis zeichnen
      ellipse( xPos, yPos, circleSize, circleSize ); 
      column++;
      // Ausgabe der aktuellen Reihe & Spalte
      println( "row: " + row + " column: " + column );
    }
    row++;
  }
}

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 einer einfachen Schleife realisiert werden. Die zweite Grafik sollte das Prinzip der Verschachtelung nutzen und Elemente in einem festen Raster anordnen. Das letzte Beispiele sollte dann durch den Einsatz der random()-Methode, dieses starre Raster wieder auflockern.

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

Die Arbeiten sollten außerdem keine Elemente verwenden, die urheberrechtlich geschützt sind.

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.