8: Variablen

Vorheriger Schritt

Nächster Schritt

Was du in diesem Schritt lernst

• Was ist eine Variable.
• Deklaration einer Variablen.
• Initialisierung einer Variablen.
• Gültigkeitsbereich einer Variablen.

Interaktionen mit der Maus basieren auf besonderen Schlüsselwörtern wie mouseX. Diese Schlüsselwörter nennt man Variablen.

Variablen kannst du dir wir Schubladen in einem Schrank vorstellen: Das Programm kann in jede Schublade etwas hineinlegen (einen Wert speichern) und dieses Etwas jederzeit wieder herausholen.

Processing legt vor jedem Aufruf von draw() die aktuelle x-Koordinate der Maus als Zahl in die "Schublade" mit der Aufschrift mouseX und dein Programm kann dann darauf zugreifen und diese Zahl benutzen. Dazu musst du nur den Namen der Schublade angeben. Praktisch, oder?

Variablen benutzen

Das schöne ist, das du auch selber Variablen anlegen und in ihnen etwas speichern kannst. Das hast du auch schon mehrfach getan. Kannst du dich erinnern, wann das war? Denk noch mal an die bisherigen Schritte...

Direkt in Schritt 3 hast du Variablen benutzt, um die Eingabe des ersten Algorithmus zu definieren:

int a = 3;
int b = 5;

println(a + b);

a und b sind auch Variablen. In Zeile 1 und 2 werden die Variablen deklariert (erstellt) und mit Werten initialisiert (befüllt). In Zeile 4 wird auf die Inhalte der Variablen zugegriffen, indem ihr Name angeben wird.

Variablen erstellen

Das sind immer die Schritte, die zur Benutzung einer neuen Variablen ausgeführt werden müssen:

Deklaration

Zuerst muss der Computer wissen, wie viel Speicherplatz benötigt wird und wie er diesen benennen soll. Der Computer sucht gewissermaßen im Schrank eine leere Schublade, die groß genug ist, und schreibt einen Namen drauf.

int a;

Initialisierung

Wir müssen in die neue Schublade nun zum ersten Mal etwas hineinlegen. Dazu weisen wir der Variablen einen Wert zu.

a = 3;

Verschiedene Arten von Daten benötigen mehr oder weniger Speicherplatz. Deshalb musst du bei der Deklaration (und nur dort) angeben, von welchem Typ die Daten sind. Zum Beispiel steht int für ganze Zahlen.

Wir konzentrieren uns auf folgende Datentypen:

Datentyp	Art der Daten	Beispiel
int	ganze Zahlen	int zahl = 5;
float	Dezimalzahlen (Kommazahlen)	float zahl = 5.3;
boolean	Wahrheitswerte (true und false)	boolean wahr = true;
char	Ein einzelnes Zeichen (Buchstabe, Ziffer, Sonderzeichen, ...) Achtung: Ein char muss mit einfachen Anführungszeichen angegeben werden.	char einKomma = ',';
String	Texte Achtung: String wird im Gegensatz zu den anderen großgeschrieben! Im Gegensatz zu chars werden sie mit doppelten Anführungszeichen angegeben.	String einText = "Hallo Welt!";

Wir werden zunächst vorwiegend die Datentypen int und float verwenden, sowie String für Texte. Den Datentyp boolean werden wir erst ab Schritt 12 näher betrachten.

Arbeitsauftrag

1. Probier dieses Programm aus und ändere es so ab, dass dein Name angezeigt wird.

   void setup() {
       size(400, 400);
   }
   
   void draw() {
     String name = "Max";
   
     int x = mouseX + 5;
     int y = mouseY + 5;
     
     background(200);
     text(name, x, y);
   }
   

Globale und lokale Variablen

Nicht alle Variablen lassen sich überall benutzen.

Arbeitsauftrag

Probier das Programm aus und lies die Fehlermeldung. Wo liegt der Fehler? Korrigiere das Programm.

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

    int a = 50;
}

void draw() {
    int x = 30;
    int y = 80;

    rect(x, y, a, a);
}

Wie du siehst, kann eine Variable aus setup() nicht in draw() benutzt werden. Das liegt daran, dass Variablen nur in dem Block gültig sind, in dem sie deklariert werden.

Wenn wir wieder an einen Schrank denken, dann könnte man sagen, der Schrank ist nur in dem Raum zugänglich, in dem er steht. Wenn ich in einem anderen Raum (Block) bin, habe ich keinen Zugriff mehr auf die Schubladen.

Zur Erinnerung: Ein Block wird durch { und } markiert.

Was aber, wenn sich eine Variable in gar keinem Block befindet?

Arbeitsauftrag

1. Probier das Programm aus.

   int frame = 0;
   
   void setup() {
       size(400, 400);
       frame = frame + 1;
   }
   
   void draw() {
       println(frame);
   }
   

2. Das Programm funktioniert. frame befindet sich außerhalb aller Blöcke und ist überall gültig. Sozusagen global.

   Modifiziere es so, dass es die Anzahl an Frames zählt, die das Programm bisher läuft. (Jeder Aufruf von draw() ist ein Frame.)

Übungsaufgaben

Arbeitsauftrag

1. Schreibe ein Programm, dass die Anzahl der Mausklicks mitzählt und auf die Zeichenfläche schreibt.

   Klicken, um das Programm zu starten.

2. Schreibe ein Programm, dass sich bei einem Mausklick die Mausposition merkt und eine Linie von der gespeicherten Position zur Maus zeichnet.

   Klicken, um das Programm zu starten.

   Hinweis: Die Mausposition mouseX und mouseY wird als Kommazahl gespeichert. Die Variablen sollten daher den Datentyp float erhalten.

3. Spiegele die Mausposition am Mittelpunkt der Zeichenfläche. Benutze lokale Variablen, um die x und y Koordinaten des Spiegelpunktes zu speichern.

   Klicken, um das Programm zu starten.

4. Entwickle ein Programm, dass bei einem Mausklick den Hintergrund in einer zufälligen Farbe einfärbt.

   Tipp: Du kannst mit int(random(256)) (siehe int() und random()) eine zufällige Ganzzahl von 0 bis 255 erzeugen. Speichere die aktuelle Hintergrundfarbe in drei Variablen (Für den Rot-, Grün- und Blau-Anteil) ab.

Lösung Aufgabe 1

int clicks = 0;

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

void draw() {
  background(200);
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text(clicks, 50, 50);
}

void mouseClicked() {
  clicks = clicks + 1;
}

Lösung Aufgabe 2

float x = 0;
float y = 0;

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

void draw() {
  background(200);
  circle(x,y, 8);
  circle(mouseX,mouseY, 8);
  line(x,y,mouseX,mouseY);
}

void mousePressed() {
    x = mouseX;
    y = mouseY;
}

Lösung Aufgabe 3

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

void draw() {
  int spiegelX = 100-mouseX;
  int spiegelY = 100-mouseY;
  
  background(200);
  fill(255);
  circle(mouseX, mouseY, 20);
  fill(0);
  circle(spiegelX, spiegelY, 20);
}

Lösung Aufgabe 4

float x = 50;
float y = 0;
float xd = 1;
float yd = 1;

int r = int(random(256));
int g = int(random(256));
int b = int(random(256));

void draw() {
  background(r, g, b);
}

void mouseClicked() {
  r = int(random(256));
  g = int(random(256));
  b = int(random(256));
}

Zusatzaufgabe

Programmiere das kleine Rechteck in der Ecke. Der Punkt dort zeigt die Position der Maus im Gesamtfenster an.

Klicken, um das Programm zu starten.

Du kannst mit folgender Vorlage starten:

// Position/Größe des Rechtecks
float x = 130.0;
float y = 100.0;
float w = 60.0;
float h = 40.0;

void setup() {
  size(200, 150);
}

void draw() {
  background(0);
  stroke(255);
  noFill();
  rect(x, y, w, h);
  fill(255);
  ellipse(mouseX, mouseY, 10, 10); // Mauszeiger

  // Dein Code ...
}

Eine Vorgehensweise wäre, zwei lokale Variablen x2 und y2 anzulegen, in die du das Ergebnis der Umrechnung von mouseX und mouseY in das System des Rechtecks vornehmen. Es handelt sich um eine klassische Anwendung des Dreisatzes.

Achtung: Du musst hier mit Dezimalzahlen (Datentyp float) arbeiten. Damit der Computer das weiß, musst du die Zahlen mit einer Nachkommastelle schreiben, zum Beispiel 200.0 statt 200. Das Problem wird deutlich, wenn du folgendes kleines Programm ausprobierst:

void draw() {
  print("Ohne Kommazahl: ");
  println(mouseX / 100);
  
  print("Mit Kommazahl: ");
  println(mouseX / 100.0);
}

Lösung Zusatzaufgabe

// Position/Größe des Rechtecks
float x = 130;
float y = 100;
float w = 60;
float h = 40;

void setup() {
  size(200, 150);
}

void draw() {
  background(0);
  stroke(255);
  noFill();
  rect(x, y, w, h);
  fill(255);
  ellipse(mouseX, mouseY, 10, 10); // Mauszeiger

  float x2 = (mouseX/200.0)*w + x;
  float y2 = (mouseY/150.0)*h + y;
  
  ellipse(x2, y2, 2, 2);
}

Sprinteraufgabe

Wie auf die Maus kannst du auch auf einen Tastendruck reagieren. Dazu sieht der Quelltext auch sehr ähnlich aus:

void keyPressed() {
    // Befehle bei Tastendruck (egal welche)
}

1. Probiere das neue Konstrukt aus, indem du einige der Übungsprogramme von oben von Mausklicks auf Tastendruck umschreibst.
2. Schreibe ein Programm, dass bei einem Tastendruck das Wort Hallo im Textfenster ausgibt.
3. Schreibe ein Programm, bei dem sich ein Ball, der zu Beginn an Position (0, 50) steht, bei jedem Tastendruck um 5 Pixel nach rechts bewegt.
4. Schreibe ein Programm, bei dem sich ein Quadrat, das in der Mitte steht, bei jedem Mausklick um 5 Pixel vergrößert, und bei jedem Tastenanschlag um 5 Pixel verkleinert.