Es bewegt sich

Der Herzschlag deines Programms

Im letzten Kapitel hast du Bilder gezeichnet. Jetzt bringen wir sie zum Laufen — und das Geheimnis dahinter ist simpler, als du denkst.

draw() läuft nicht einmal, sondern immer wieder. Etwa 60-mal pro Sekunde zeichnet Processing das Bild komplett neu. Ein Film ist ja auch nichts anderes als viele Einzelbilder hintereinander.

frameCount zählt mit, das wievielte Bild gerade gezeichnet wird. Lass es einen Moment laufen — die Zahl steht nie still.

Variablen: Dinge, die sich merken

Bisher standen in deinem Code feste Zahlen: circle(100, 80, 40). Der Kreis sitzt damit für immer an derselben Stelle. Damit sich etwas bewegen kann, brauchst du einen Platz, an dem sich das Programm eine Zahl merkt — und den kannst du verändern. Das ist eine Variable.

Die drei Wörter, die du dafür brauchst

Für den Umgang mit Variablen gibt es Fachbegriffe. Die stehen später in jeder Fehlermeldung und in jedem Tutorial, deshalb hier gleich richtig:

Deklaration — die Variable anlegen. Du sagst, welchen Typ sie hat und wie sie heißt:

int punkte;

Damit existiert punkte, hat aber noch keinen brauchbaren Wert.

Zuweisung — einen Wert hineinlegen. Der Typ steht jetzt nicht mehr dabei, die Variable gibt es ja schon:

punkte = 0;

Deklaration mit Initialisierung — beides in einem Rutsch. Das ist der Normalfall, und so wirst du es fast immer schreiben:

int punkte = 0;

Initialisieren heißt schlicht „den ersten Wert setzen".

Die Typen

Beim Deklarieren sagst du, was für eine Art Wert darin stecken soll. Das ist der Typ:

int — ganze Zahlen, ohne Komma.

int punkte = 0;
int leben = 3;

Für alles, was man zählt: Punkte, Leben, Anzahl der Blöcke. Eine Kommazahl passt hier nicht hinein.

float — Zahlen mit Nachkommastellen.

float tempo = 2.5;
float x = 100.0;

Für alles, was fein einstellbar sein soll. Positionen und Geschwindigkeiten macht man fast immer zu float — sonst kann sich etwas nur in ganzen Pixeln bewegen, und das ruckelt.

boolean — kennt nur zwei Werte: true oder false.

boolean laeuft = true;
boolean istGetroffen = false;

Für Ja-Nein-Fragen: Läuft das Spiel gerade? Wurde schon getroffen?

char — ein einzelnes Zeichen, in einfachen Anführungszeichen.

char taste = 'w';
char note = 'A';

Für einzelne Tasten: Welche wurde gedrückt? In Kapitel 3 fragst du damit die Tastatur ab.

String — Text, immer in doppelten Anführungszeichen.

String name = "Ball";
String nachricht = "Game Over";

color — eine Farbe, die du dir merken willst. Die gibt es nur in Processing, nicht in normalem Java.

color rot = color(220, 40, 40);
fill(rot);

Praktisch, wenn dieselbe Farbe an mehreren Stellen vorkommt: Du änderst sie dann nur an einer Stelle.

Selbst ausprobieren

In diesem Abschnitt stecken mehrere Dinge auf einmal. Hak einzeln ab, was schon sitzt — dann siehst du selbst, was noch fehlt, und deine Lehrkraft sieht es auch.

So entsteht Bewegung

Der ganze Trick besteht aus zwei Zeilen: Du zeichnest den Kreis an der Stelle x — und danach machst du x ein bisschen größer. Beim nächsten Bild sitzt er also weiter rechts.

float x = 0;

void setup() {
size(360, 160);
}

void draw() {
background(250);

noStroke();
fill(70, 130, 220);
circle(x, 80, 40);

x = x + 2;   // beim nächsten Bild ein Stück weiter
}

Die wichtigste Falle

Schau dir an, wo float x = 0; im Beispiel oben steht: ganz oben, außerhalb von setup() und draw(). Das ist kein Zufall.

Der folgende Sketch sieht fast genauso aus. Der einzige Unterschied: Die Variable ist eine Zeile nach innen gerutscht, in draw() hinein. Lass ihn laufen, bevor du weiterliest.

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

void draw() {
background(250);

float x = 0;
x = x + 2;

noStroke();
fill(200, 70, 70);
circle(x, 75, 40);
}

Auf Klick und Taste reagieren

Bisher hast du zwei Funktionen kennengelernt, die Processing von selbst aufruft: setup() einmal am Anfang, draw() immer wieder. Es gibt noch zwei weitere — und die laufen genau dann, wenn jemand etwas tut.

void mousePressed() wird aufgerufen, sobald geklickt wird. Du musst nichts abfragen und nichts prüfen: Processing ruft die Funktion auf, und zwar genau einmal pro Klick.

float x = 0;

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

void draw() {
background(250);
noStroke();
fill(70, 130, 220);
circle(x, 90, 40);

x = x + 3;

fill(120);
textSize(14);
text("Klick ins Bild", 15, 25);
}

// Läuft automatisch, sobald jemand klickt.
void mousePressed() {
x = 0;
}

Genauso funktioniert void keyPressed() für die Tastatur:

void keyPressed() {
  x = 0;
}

Neue Werkzeuge

AufgabenÜbungen

Jetzt du

Was noch fehlt

Ist dir beim Ball etwas aufgefallen? Er rollt nach rechts — und dann ist er weg. Für immer.

Was fehlt, ist eine Entscheidung: Wenn der Ball den Rand erreicht, dann soll er umkehren. Dein Programm macht bisher stur immer dasselbe, egal was auf der Fläche los ist.

Genau darum geht es im nächsten Kapitel.