Lernpfad:Einführung in Processing/8
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 nochmal 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, wieviel Speicherplatz benötigt wird und wie er diesen benennen soll. Der Computer sucht quasi 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 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 einKomma = ',';
|
String
|
Texte
Achtung: |
String einText = "Hallo Welt!";
|
- 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.
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, das 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.
{
und }
markiert.
Was aber, wenn sich eine Variable in gar keinem Block befindet?
- Probier das Programm aus.
int frame = 0; void setup() { size(400, 400); frame = frame + 1; } void draw() { println(frame); }
- 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.)
- Modifiziere es so, dass es die Anzahl an Frames zählt, die das Programm bisher läuft. (Jeder Aufruf von
Übungsaufgaben
- Schreibe ein Programm, dass die Anzahl der Mausklicks mitzählt und auf die Zeichenfläche schriebt.
- Schreibe ein Programm, dass sich bei einem Mausklick die Mausposition merkt und eine Linie von der gespeicherten Position zur Maus zeichnet.
- Spiegele die Mausposition am Mittelpunkt der Zeichenfläche. Benutze lokale Variablen, um die
x
undy
Koordinaten des Spiegelpunktes zu speichern. - Entwickle ein Programm, dass bei einem Mausklick den Hintergrund in einer zufälligen Farbe einfärbt.
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;
}
int x = 0;
int 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 mouseClicked() {
x = mouseX;
y = mouseY;
}
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);
}
Programmiere das kleine Rechteck in der Ecke. Der Punkt dort zeigt die Position der Maus im Gesamtfenster an.
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 Dreisatz'.
Achtung: Du musst hier mit Dezimalzahlen (Datentyp float
) arbeiten. Damit der Computer das weiß, muss 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);
}
// 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);
}
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)
}
- Probiere das neue Konstrukt aus, indem du einige der Übungsprogramme von oben von Mausklicks auf Tastendruck umschreibst.
- Schreibe ein Programm, dass bei einem Tastendruck das Wort
Hallo
im Textfenster ausgibt. - 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. - 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.