Quelltext der Seite Variablen in Processing

<div style="background-color:#A9E2F3; padding:10px; margin-bottom:30px;">
'''Am Ende des Kapitels solltest du'''
* wissen, was eine Variable ist,
* wissen, wie man eine Variable deklariert und mittels Zuweisungsoperator initialisiert,
* wissen, wie man Zufallszahlen erzeugt,
* die wichtigsten Datentypen kennen,
* den Unterschied zwischen globalen und lokalen Variablen verstehen,
* wissen, was man unter der ''Lebensdauer'' und der ''Sichtbarkeit'' einer Variablen versteht.
* die Einsatzmöglichkeit von Systemvariablen verstehen.
</div>

==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:


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


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:


<div style="color:blue; margin-left:80px;">
float x = 0;

float y = 0;


void setup(){

:size(200,200);

}


void draw(){

:background(255);

:line(x, y, 100, 100);

:x = x+1;

:y = y+1;

}
</div>


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


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


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

Warum müssen die Variablen in folgendem Programm <u>innerhalb</u> der Methode ''draw()'' deklariert und initialisiert werden?


<div style="color:blue; margin-left:80px;">
void setup(){
  
:size(200,200);

}


void draw(){
  
:float x = mouseX;

:float y = mouseY;

:background(255);

:line(x, y, 100, 100);

}
</div>



'''Aufgabe 2'''

a) Schreibe ein Programm, bei dem sich ein Kreis von links nach rechts durch das Zeichenfenster bewegt.

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
float x = 0;

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

void draw(){
  background (255);
  ellipse(x, 100, 30, 30);
  x = x+1;
}
</syntaxhighlight>
</popup>

b) Ändere das Programm so ab, dass sich der Kreis von rechts nach links bewegt.

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
float x = 400;

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

void draw(){
  background (255);
  ellipse(x, 100, 30, 30);
  x = x-1;
}
</syntaxhighlight>
</popup>


'''Aufgabe 3'''

Processing stellt eine Funktion '''[https://processing.org/reference/random_.html random()]''' zur Verfügung, mit der Zufallszahlen erzeugt werden können. Beispielsweise ergibt ''random(10)'' eine Zufallszahl zwischen 0 und 9.

a) Erstelle ein Programm, das nach seinem Aufruf bis zum Abbruch Kreise an beliebiger Stelle der Zeichenfläche erzeugt.

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
void setup(){
 size(400, 400); 
 background (255);
}

void draw(){ 
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}
</syntaxhighlight>
</popup>


b) Ändere das Programm so ab, dass ein neuer Kreis nur bei einem Mausklick erzeugt wird.

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
void setup(){
 size(400, 400); 
 background (255);
}

void draw(){ 
  
}

void mousePressed(){
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}
</syntaxhighlight>
</popup>


c) Wie müsste man das Programm abändern, damit nur ein einziger Kreis an einer zufälligen Position erzeugt wird?

<popup name="Lösungsvorschlag">
<syntaxhighlight lang="java">
float x = random(400);
float y = random(400);

void setup(){
 size(400, 400); 
 background (255);
}

void draw(){ 
   ellipse(x, y, 30, 30);
}
</syntaxhighlight>
</popup>

Mache dir noch einmal deutlich, welchen Einfluss die Position der Variablen auf den Ablauf des Programms hat.
</div>

==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:

<div style="color:blue; margin-left:80px;">
float d = random(30);


void setup(){

:size(400, 400); 

:background (255);

:frameRate(20);

}


void draw(){ 

:float x = random(400);

:float y = random(400);

:fill(255,255,0);

:ellipse(x, y, d, d);

}

void mousePressed(){

:float x = random(400);

:float y = random(400);

:fill(255, 0, 0);

:rect(x, y, d, d);

}
</div>


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.


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

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

a)

<div style="color:blue; margin-left:80px;">
void mousePressed(){

:float d = random(400);

:float y = random(400);

:fill(255, 0, 0);

:rect(d, y, d, d);

}
</div>

<popup name="Lösungsvorschlag">

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.

</popup>

b)

<div style="color:blue; margin-left:80px;">
void draw(){ 
 
:fill(255,255,0);

:ellipse(x, y, d, d);

} 
</div>

<popup name="Lösungsvorschlag">

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. 

</popup>


'''Aufgabe 5'''

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


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


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

==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 [https://processing.org/reference/width.html width] und [https://processing.org/reference/height.html 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:


<div style="color:blue; margin-left:80px;">
void setup(){

:size(200, 200);

}


void draw(){

:ellipse(width/2, height/2, width/2, height/2);

} 
</div>


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 '''[https://processing.org/reference/constrain_.html constrain()]''', die den Wertebereich einer Variable beschränkt, d.h. eine Ober- und eine Untergrenze für den betreffenden Variablenwert angibt:


<div style="color:blue; margin-left:80px;">
void setup(){

:size(600, 400);

}

void draw(){

:background(255);

:float x = constrain(mouseX, 100, width-100);

:float y = constrain(mouseY, 100, height-100);

:ellipse(x, y, 30, 30);
   
}
</div>


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 '''[https://processing.org/reference/translate_.html translate()]''', mit der wir eine Figur oder mehrere miteinander verbundene Figuren beispielsweise relativ zum Mauszeiger verschieben können. Betrachten wir folgendes Programm:

<div style="color:blue; margin-left:80px;">
void setup(){

:size(600,400);

}

void draw(){

:background(255);

:translate(mouseX,mouseY);

:rect(0,0,100,100);

:ellipse(50,50,100,100);

}
</div>

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.

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

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


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


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