Lernpfad:Einführung in Processing/8: Unterschied zwischen den Versionen
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{NNavigation}} | {{NNameAnzeigen}}{{NNavigation}} | ||
{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}} | |||
* Was ist eine ''Variable''. | |||
* ''Deklaration'' einer Variablen. | |||
* ''Initialisierung'' einer Variablen. | |||
* ''Gültigkeitsbereich'' einer Variablen. | |||
{{Tldr:End}} | |||
Interaktionen mit der Maus basieren auf besonderen Schlüsselwörtern wie <code>mouseX</code>. Diese Schlüsselwörter nennt man '''Variablen'''. | Interaktionen mit der Maus basieren auf besonderen Schlüsselwörtern wie <code>mouseX</code>. Diese Schlüsselwörter nennt man '''Variablen'''. | ||
Zeile 8: | Zeile 15: | ||
== Variablen benutzen == | == 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 | 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 {{Pfad|3|Schritt 3}} hast du Variablen benutzt, um die Eingabe des ersten Algorithmus zu definieren: | Direkt in {{Pfad|3|Schritt 3}} hast du Variablen benutzt, um die Eingabe des ersten Algorithmus zu definieren: | ||
<syntaxhighlight lang="java" lines="1"> | <syntaxhighlight lang="java" lines="1" highlight="1-2"> | ||
int a = 3; | int a = 3; | ||
int b = 5; | int b = 5; | ||
Zeile 19: | Zeile 26: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<code>a</code> und <code>b</code> 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. | <code>a</code> und <code>b</code> 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 == | == Variablen erstellen == | ||
Zeile 25: | Zeile 32: | ||
; '''Deklaration''' | ; '''Deklaration''' | ||
: Zuerst muss der Computer wissen, | : 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. | ||
: <code>int a;</code> | : <code>int a;</code> | ||
; '''Initialisierung''' | ; '''Initialisierung''' | ||
: Wir müssen in die neue Schublade nun zum ersten Mal etwas hineinlegen. Dazu weisen wir der Variablen einen Wert zu. | : Wir müssen in die neue Schublade nun ''zum ersten Mal'' etwas hineinlegen. Dazu weisen wir der Variablen einen Wert zu. | ||
: <code>a = 3;</code> | : <code>a = 3;</code> | ||
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 <code>int</code> für ganze Zahlen. | 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 <code>int</code> für ganze Zahlen. | ||
Wir konzentrieren uns auf folgende Datentypen: | Wir konzentrieren uns auf folgende Datentypen: | ||
Zeile 60: | Zeile 67: | ||
| Texte | | Texte | ||
'''Achtung''': <code>String</code> wird im Gegensatz zu den anderen | '''Achtung''': <code>String</code> wird im Gegensatz zu den anderen großgeschrieben! Im Gegensatz zu <code>char</code>s werden sie mit doppelten Anführungszeichen angegeben. | ||
| <code>String einText = "Hallo Welt!";</code> | | <code>String einText = "Hallo Welt!";</code> | ||
|} | |} | ||
{{Hinweis| | |||
Wir werden zunächst vorwiegend die Datentypen <code>int</code> und <code>float</code> verwenden, sowie <code>String</code> für Texte. Den Datentyp <code>boolean</code> werden wir erst ab {{Pfad|12|Schritt 12}} näher betrachten.}} | |||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
# Probier dieses Programm aus und ändere es so ab, dass dein Name angezeigt wird. | # Probier dieses Programm aus und ändere es so ab, dass dein Name angezeigt wird. | ||
Zeile 104: | Zeile 112: | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||
Wie du siehst, kann eine Variable aus <code>setup()</code> nicht in <code>draw()</code> benutzt werden. ''Das liegt daran, | Wie du siehst, kann eine Variable aus <code>setup()</code> nicht in <code>draw()</code> 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. | 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. | ||
Zeile 132: | Zeile 140: | ||
== Übungsaufgaben == | == Übungsaufgaben == | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
# Schreibe ein Programm, dass die Anzahl der Mausklicks mitzählt und auf die Zeichenfläche | # Schreibe ein Programm, dass die Anzahl der Mausklicks mitzählt und auf die Zeichenfläche schreibt. | ||
#: {{P5js|https://editor.p5js.org/Ngb/full/5Eoro7V-I|Beispiel|height=100}} | #: {{P5js|https://editor.p5js.org/Ngb/full/5Eoro7V-I|Beispiel|height=100}} | ||
# Schreibe ein Programm, dass sich bei einem Mausklick die Mausposition merkt und eine Linie von der gespeicherten Position zur Maus zeichnet. | # Schreibe ein Programm, dass sich bei einem Mausklick die Mausposition merkt und eine Linie von der gespeicherten Position zur Maus zeichnet. | ||
#: {{P5js|https://preview.p5js.org/Ngb/present/aD6Gi1RTP|Beispiel|height=400}} | #: {{P5js|https://preview.p5js.org/Ngb/present/aD6Gi1RTP|Beispiel|height=400}} | ||
#: '''Hinweis''': Die Mausposition <code>mouseX</code> und <code>mouseY</code> wird als Kommazahl gespeichert. Die Variablen sollten daher den ''Datentyp'' <code>float</code> erhalten. | |||
# Spiegele die Mausposition am Mittelpunkt der Zeichenfläche. Benutze lokale Variablen, um die <code>x</code> und <code>y</code> Koordinaten des Spiegelpunktes zu speichern. | # Spiegele die Mausposition am Mittelpunkt der Zeichenfläche. Benutze lokale Variablen, um die <code>x</code> und <code>y</code> Koordinaten des Spiegelpunktes zu speichern. | ||
#: {{P5js|https://preview.p5js.org/Ngb/present/4JQzolp-6|Beispiel|height=100}} | #: {{P5js|https://preview.p5js.org/Ngb/present/4JQzolp-6|Beispiel|height=100}} | ||
# Entwickle ein Programm, dass bei einem Mausklick den Hintergrund in einer zufälligen Farbe einfärbt. | # Entwickle ein Programm, dass bei einem Mausklick den Hintergrund in einer zufälligen Farbe einfärbt. | ||
#: '''Tipp''': Du kannst mit <code>random(256)</code> eine | #: '''Tipp''': Du kannst mit <code>int(random(256))</code> (siehe {{Processing Ref|int()}} und {{Processing Ref|random()}}) eine zufällige Ganzzahl von <code>0</code> bis <code>255</code> erzeugen. Speichere die aktuelle Hintergrundfarbe in drei Variablen (Für den Rot-, Grün- und Blau-Anteil) ab. | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||
{{Lösung:Start|Lösung Aufgabe 1}} | {{Lösung:Start|Lösung Aufgabe 1}} | ||
Zeile 164: | Zeile 173: | ||
{{Lösung:Start|Lösung Aufgabe 2}} | {{Lösung:Start|Lösung Aufgabe 2}} | ||
<syntaxhighlight lang="java" line="1"> | <syntaxhighlight lang="java" line="1"> | ||
float x = 0; | |||
float y = 0; | |||
void setup() { | void setup() { | ||
Zeile 178: | Zeile 187: | ||
} | } | ||
void | void mousePressed() { | ||
x = mouseX; | x = mouseX; | ||
y = mouseY; | y = mouseY; | ||
Zeile 199: | Zeile 208: | ||
fill(0); | fill(0); | ||
circle(spiegelX, spiegelY, 20); | circle(spiegelX, spiegelY, 20); | ||
} | |||
</syntaxhighlight> | |||
{{Lösung:End}} | |||
{{Lösung:Start|Lösung Aufgabe 4}} | |||
<syntaxhighlight lang="java" line="1"> | |||
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)); | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Zeile 206: | Zeile 237: | ||
Programmiere das kleine Rechteck in der Ecke. Der Punkt dort zeigt die Position der Maus im Gesamtfenster an. | Programmiere das kleine Rechteck in der Ecke. Der Punkt dort zeigt die Position der Maus im Gesamtfenster an. | ||
{{P5js|https://preview.p5js.org/Ngb/present/-J2uSxDMA|Sieh dir hier ein Beispiel an | {{P5js|https://preview.p5js.org/Ngb/present/-J2uSxDMA|Sieh dir hier ein Beispiel an|height=150}} | ||
Du kannst mit folgender Vorlage starten: | Du kannst mit folgender Vorlage starten: | ||
Zeile 232: | Zeile 263: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Eine Vorgehensweise wäre, zwei lokale Variablen <code>x2</code> und <code>y2</code> anzulegen, in die | Eine Vorgehensweise wäre, zwei lokale Variablen <code>x2</code> und <code>y2</code> anzulegen, in die du das Ergebnis der Umrechnung von <code>mouseX</code> und <code>mouseY</code> in das System des Rechtecks vornehmen. Es handelt sich um eine klassische Anwendung des Dreisatzes. | ||
'''Achtung''': Du musst hier mit Dezimalzahlen (Datentyp <code>float</code>) arbeiten. Damit der Computer das weiß, | '''Achtung''': Du musst hier mit Dezimalzahlen (Datentyp <code>float</code>) arbeiten. Damit der Computer das weiß, musst du die Zahlen mit einer Nachkommastelle schreiben, zum Beispiel <code>200.0</code> statt <code>200</code>. Das Problem wird deutlich, wenn du folgendes kleines Programm ausprobierst: | ||
<syntaxhighlight lang="java" line="1"> | <syntaxhighlight lang="java" line="1"> | ||
void draw() { | void draw() { |
Aktuelle Version vom 16. Februar 2022, 21:31 Uhr
- 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 einKomma = ',';
|
String
|
Texte
Achtung: |
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.
- 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, 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.
{
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 schreibt.
- Schreibe ein Programm, dass sich bei einem Mausklick die Mausposition merkt und eine Linie von der gespeicherten Position zur Maus zeichnet.
- Hinweis: Die Mausposition
mouseX
undmouseY
wird als Kommazahl gespeichert. Die Variablen sollten daher den Datentypfloat
erhalten.
- 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;
}
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;
}
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);
}
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));
}
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 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);
}
// 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.