Variablen in Processing: Unterschied zwischen den Versionen

Aktuelle Version vom 26. September 2018, 08:51 Uhr

Was ist eine Variable?

Im vorhergehenden Kapitel haben wir bereits sogenannte Systemvariablen benutzt. So wurde beispielsweise der Startpunkt einer Linie nicht durch einen festen Punkt bestimmt, sondern richtete sich variabel nach der jeweiligen Position des Mauszeigers, die durch die Werte für mouseX und mouseY festgelegt wurde. Diese Änderung des Variablenwertes macht das Wesen einer Variable aus.

Rein technisch gesehen ist eine Variable ein benannter Zeiger, der auf einen Ort im Speicher des Computers weist. Nachdem ein Computer immer nur eine Anweisung auf einmal abarbeitet, ermöglicht eine Variable das Speichern einer Information an einer bestimmten Stelle des Programms. Auf diese Information kann dann zu einem späteren Zeitpunkt wieder zugegriffen werden. Verdeutlichen wir uns dies an folgendem Beispiel:

Während der Endpunkt (100, 100) festgelegt ist und nicht geändert werden kann, können wir die Werte für den Startpunkt (x, y) beliebig festlegen. Dazu müssen wir allerdings zuerst zwei Schritte vorschalten. Wir müssen die Variable deklarieren, d.h. wir müssen ihr einen Namen geben und ihr einen sogenannten Datentyp zuweisen, und wir müssen sie initialisieren, d.h. wir müssen ihr einen Anfangswert zuweisen. Zu diesem Zweck nutzen wir den Zuweisungsoperator (=). Das Gleichheitszeichen hat also hier nicht seine mathematische Bedeutung, sondern heißt: "der Variable x wird der Wert a zugewiesen". In der Praxis sähe das dann folgendermaßen aus:

Sehen wir uns etwas genauer an, was hier passiert. In einem ersten Schritt deklarieren wir die Variablen x und y und weisen ihnen den Datentyp float (für eine Fließkommazahl) zu. Zugleich initialisieren wir die beiden Variablen jeweils mit dem Wert 0. In der draw()-Methode wird die Linie mit dem Startpunkt (0, 0) und dem Endpunkt (100, 100) gezeichnet. Anschließend wird der Wert der beiden Variablen jeweils um 1 erhöht. Dadurch haben x und y bei der nächsten Aktualisierung durch draw() jeweils den Wert 1 und die Linie wird mit dem Startpunkt (1, 1) und dem Endpunkt (100, 100) gezeichnet usw., d.h. die an den entsprechenden Speicherorten für x und y abgespeicherten Werte ändern sich bei jeder Aktualisierung des Zeichenfensters durch draw().
Der Ausdruck x=x+1 verdeutlicht hier noch einmal die Arbeitsweise des Zuweisungsoperators: Der Variable x wird der aktuelle Wert von x plus 1 zugewiesen.

float x = 0;
 
void setup(){
 size(400, 400); 
}
 
void draw(){
  background (255);
  ellipse(x, 100, 30, 30);
  x = x+1;
}

float x = 400;
 
void setup(){
 size(400, 400); 
}
 
void draw(){
  background (255);
  ellipse(x, 100, 30, 30);
  x = x-1;
}

void setup(){
 size(400, 400); 
 background (255);
}
 
void draw(){ 
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}

void setup(){
 size(400, 400); 
 background (255);
}
 
void draw(){ 
 
}
 
void mousePressed(){
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}

float x = random(400);
float y = random(400);
 
void setup(){
 size(400, 400); 
 background (255);
}
 
void draw(){ 
   ellipse(x, y, 30, 30);
}

Datentypen

Der Datentyp einer Variable gibt an, von welcher Art die Daten sind, die mit ihm beschrieben werden, wieviel Speicher für die Variable reserviert werden muss, mit welcher Genauigkeit Werte in der Variable abgespeichert werden können und welche Operationen auf diesen ausgeführt werden können. Ein Programm muss beispielsweise erkennen, ob eine Variable einen Text oder eine Zahl enthält. So erwartet man z.B., dass „Sheldon “ + „Cooper“ zu „Sheldon Cooper“ zusammengesetzt wird, aber „1“ + „2“ soll wohl in der Regel „3“ ergeben, und nicht „12“.

Processing stellt uns eine Anzahl primitiver Datentypen zur Verfügung. Die wichtigsten davon sind:

int für ganzzahlige Werte,

float für Fließkommazahlen,

boolean für Wahrheitswerte,

char für Zeichen.

Dazu kommt noch der zusammengesetzte Datentyp

String für Zeichenketten.

Beispiele:

int spielstand = 345;

float preis = 6.99;

boolean verschlossen = true;

char taste = 'A';

String name = "Meier";

Globale und lokale Variablen

Wir unterscheiden grundsätzlich zwischen zwei Arten von Variablen - globalen und lokalen Variablen. Der Unterschied besteht in ihrer Lebensdauer und in ihrer Sichtbarkeit. Unter Lebensdauer versteht man die Zeit, in der die Variable im Programm zur Verfügung steht. Wenn eine Variable deklariert wird, wir für sie Speicherplatz zur Verfügung gestellt. Wir können auf sie zugreifen und mit ihr arbeiten. Ist die Lebensdauer abgelaufen, wird der reservierte Speicher wieder freigegeben. Globale Variablen stehen während des ganzen Programmablaufs zur Verfügung. Sie werden deshalb auch gleich zu Beginn des Programms deklariert. Dort sind sie auch für alle Methoden sichtbar, d.h. alle Methoden können auf sie zurückgreifen. Lokale Variablen werden dagegen innerhalb einer Methode deklariert und sind daher auch nur dort sichtbar, d.h. nutzbar. Wird die Methode verlassen endet auch ihre Lebensdauer.

Sehen wir uns folgendes Beispiel an:

Beim Programmstart wird die globale Variable d mit einem Zufallswert initialisiert, den die beiden Methoden draw() und mousePressed() nutzen und auf den sie während der ganzen Laufzeit des Programms zugreifen können. x und y sind dagegen lokale Variablen. Sie gelten nur bis die Methode verlassen wird. Jedesmal wenn die Methode draw() aufgerufen wird (20 mal pro Sekunde) wird der Wert für x und y neu ermittelt. Gleiches gilt für die Methode mousePressed(). Ein weiterer Hinweis auf den lokalen Charakter der Variablen x und y ist die Tatsache, dass sie in beiden Methoden denselben Namen haben. Trotzdem gibt es hier keine Probleme, da sie nur innerhalb der Methode, in der sie deklariert wurden, sichtbar sind.

Aufgabe 4

Was passiert, wenn wir folgende Änderungen am Programm vornehmen:

a)

void mousePressed(){

float d = random(400);

float y = random(400);

fill(255, 0, 0);

rect(d, y, d, d);

}

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

Der Wert der globalen Variable d wird durch den der lokalen Variable d überschrieben. Die Konsequenz ist, dass wir globale Variablen soweit wie möglich vermeiden sollten.

b)

void draw(){

fill(255,255,0);

ellipse(x, y, d, d);

}

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

Wir erhalten die Fehlermeldung The variable "x" does not exist. Dies zeigt, dass die Variablen aus der Methode mousePressed() in der Methode draw() nicht sichtbar sind.

Aufgabe 5

Schreibe ein Programm, das an zufälliger Position Kreise erzeugt, deren Farbe sich bei einem Mausklick zufällig ändert.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

void setup(){
 size(200, 200); 
 background (255);
 frameRate(5);
}
 
void draw(){  
   float x = random(400);
   float y = random (400);
   ellipse(x, y, 20, 20);
}
 
void mousePressed(){
  float r = random(256);
  float g = random(256);
  float b = random(256);
  fill(r, g, b);
}

Systemvariablen

Bis jetzt haben wir Variablen in erster Linie dazu benutzt, Informationen abzuspeichern. Wir haben aber bereits gesehen, dass es auch Variablen gibt, die uns Daten über die Anwendung selbst liefern. So erhalten wir über mouseX' bzw. 'mouseY Informationen über die Position des Mauszeigers. Man bezeichnet solche Variablen als Systemvariablen. Weitere interessante Systemvariablen sind width und height, die uns Informationen über die Größe des Ausgabefensters liefern. Dadurch können wir unsere Graphiken flexibel an die Größe des Zeichenfensters anpassen. Betrachten wir beispielsweise folgendes Programm:

Wenn wir das Programm mit verschiedenen Zeichenfenstergrößen testen, werden wir feststellen, dass die Proportionen der Graphik im Verhältnis zum Zeichenfenster gleich bleiben.

Ein weiteres Beispiel arbeitet mit der Methode constrain(), die den Wertebereich einer Variable beschränkt, d.h. eine Ober- und eine Untergrenze für den betreffenden Variablenwert angibt:

Hier finden wir gleich vier Systemvariablen. Die Variablen mouseX und mouseY legen die Position des Kreises fest, während wir mit Hilfe von height und width dafür sorgen, dass der Kreis unabhängig von der Zeichenfenstergröße immer einen Abstand von 100px zum Rand einhält.

Interessant ist in diesem Zusammenhang die Methode translate(), mit der wir eine Figur oder mehrere miteinander verbundene Figuren beispielsweise relativ zum Mauszeiger verschieben können. Betrachten wir folgendes Programm:

Das Rechteck mit seinem Innkreis wird hier relativ zum Mauszeiger verschoben. Dabei bezieht sich die Verschiebung nur auf die Figuren, die nach der Methode translate() gezeichnet werden. Weitere Anwendungen findest du in der Referenz.

Aufgabe 6

Schreibe ein Programm, bei dem drei senkrechte Linien gleichzeitig mit der Maus von links nach rechts und umgekehrt bewegt werden. Die erste Linie kann komplett zwischen den Seitenrändern bewegt werden, die zweite Linie ist jeweils mindestens 40px vom Rand weg, die dritte Linie jeweils mindestens 80px. Nutze dabei die Systemvariablen width, height, mouseX und die Methode constrain.

Lösungsvorschlag anzeigen

Lösungsvorschlag verstecken

int xPos1;
int xPos2;
int xPos3;
 
void setup(){
  size(400, 300);
}
 
void draw(){
  background(0);
 
  xPos1 = mouseX;
  xPos2 = constrain(mouseX, 40, width-40);
  xPos3 = constrain(mouseX, 80, width-80);
 
  strokeWeight(5);
 
  stroke(255, 0, 0);
  line(xPos1, height/2, xPos1, height/2-30);
 
  stroke(255, 255, 0);
  line(xPos2, height/2-40, xPos2, height/2-70);
 
  stroke(255, 0, 255);
  line(xPos3, height/2-80, xPos3, height/2-110);
}