Der erste Pixel

Zuerst: Wähle dein Spiel

Dieser Kurs läuft auf ein Ziel zu. Am Ende hast du ein eigenes, funktionierendes Spiel geschrieben — und zwar jede Zeile davon selbst.

Entscheide dich jetzt, welches es wird — ein Klick genügt:

Jedes Kapitel baut ein Bauteil genau dieses Spiels. Heute: das Spielfeld und die Figuren darauf. Deine Lehrkraft sieht deine Wahl, damit sie weiß, worauf sich deine Fragen beziehen.

Für das fertige Spiel gibt es später ein Spielgerüst zum Kopieren — mit Menü, Spielverlauf und Game Over sauber getrennt. Schau ruhig schon mal hinein; verstehen musst du es erst ab Kapitel 3.

Womit du arbeitest

Du schreibst deine Programme in der Processing-IDE. Die Abkürzung steht für Integrated Development Environment, auf Deutsch integrierte Entwicklungsumgebung. „Integriert" heißt: Mehrere Werkzeuge stecken in einem Programm.

• ein Editor, in dem du den Text schreibst
• ein Übersetzer, der aus deinem Text etwas macht, das der Computer ausführen kann
• die Ausführung selbst — der Knopf mit dem Dreieck
• eine Konsole, in der Fehlermeldungen und deine println()-Ausgaben landen

Ohne IDE müsstest du diese Schritte einzeln von Hand anstoßen. Genau deshalb gibt es sie.

Das Grundgerüst

Jedes Processing-Programm hat zwei Blöcke:

• setup() läuft einmal am Anfang. Hier legst du die Größe der Zeichenfläche fest.
• draw() läuft danach immer wieder, etwa 60-mal pro Sekunde. Alles, was sich bewegen soll, gehört hier hinein.

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

void draw() {
  background(240);
  circle(200, 150, 80);
}

void heißt: Diese Funktion gibt nichts zurück. Das Semikolon am Ende jeder Anweisung ist Pflicht — das ist der häufigste Fehler am Anfang.

Das Koordinatensystem

Die Zeichenfläche ist ein Gitter aus Pixeln, und jeder Punkt darauf hat zwei Zahlen: x von links nach rechts, y von oben nach unten.

Das ist die häufigste Stolperstelle am Anfang. Hier ist das Gitter mit beschrifteter Skala — jede Linie ist 50 Pixel von der nächsten entfernt. Der grüne Punkt liegt bei (250, 200); such ihn erst auf der oberen und dann auf der linken Skala:

width und height

Sobald size() gelaufen ist, kennt Processing zwei Werte, die du überall benutzen kannst:

• width — die Breite deiner Fläche in Pixeln
• height — die Höhe deiner Fläche in Pixeln

Nach size(400, 300) steht in width also die Zahl 400 und in height die Zahl 300. Du musst dir diese Zahlen nicht merken — du schreibst einfach width hin, und Processing setzt den passenden Wert ein.

Und weil das ganz normale Zahlen sind, kannst du damit rechnen. Nach size(400, 300) bedeutet:

• width — die volle Breite, also 400. Das ist der rechte Rand.
• width / 2 — die halbe Breite, also 200. Das ist die Mitte von links nach rechts.
• height — die volle Höhe, also 300. Das ist der untere Rand.
• height / 2 — die halbe Höhe, also 150. Das ist die Mitte von oben nach unten.

width / 2 heißt also schlicht „die halbe Breite" — und die halbe Breite ist die waagerechte Mitte. Zusammen treffen width / 2 und height / 2 genau den Mittelpunkt der Fläche.

Im folgenden Beispiel zeichnet das Programm seine eigenen Maße mit auf, damit du siehst, worüber wir reden. Ändere die Zahlen in size() und drück auf „Ausführen" — der Kreis bleibt in der Mitte, egal was du einstellst.

Der Vorteil zeigt sich genau dann, wenn du size() änderst: Der Kreis bleibt mittig, ganz ohne dass du irgendeine Zahl nachrechnen musst. Schreibst du dagegen circle(180, 100, 60), sitzt er nach einer Vergrößerung plötzlich schief — probier auch das ruhig einmal aus.

Formen zeichnen

Klick auf einen Befehl, dann siehst du ein laufendes Beispiel dazu. Diese Liste ist zum Nachschlagen gedacht — du musst sie nicht auswendig lernen.

AufgabenÜbungen: Formen setzen

Bevor es an die Farben geht: Diese Aufgaben drehen sich nur ums Platzieren. Wer Formen sicher setzt, tut sich mit allem Weiteren leichter.

Farben

Farben gibt man als RGB an: drei Zahlen von 0 bis 255 für Rot, Grün und Blau. Ein einzelner Wert bedeutet Grau.

Wichtig ist die Reihenfolge: fill() und stroke() gelten ab dem Moment, in dem du sie aufrufst, für alles Nachfolgende — bis du sie wieder änderst.

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

void draw() {
background(245);
strokeWeight(2);

fill(70, 130, 220);   // ab hier ist alles blau
stroke(30, 60, 120);
circle(90, 110, 90);
rect(150, 65, 90, 90);

fill(230, 180, 60);   // ab hier gelb
noStroke();
circle(310, 110, 90);
}

AufgabenÜbungen: Formen und Farben

Kommentare

Nicht alles in deinem Quelltext ist für den Computer bestimmt. Mit zwei Schrägstrichen // schaltest du den Rest der Zeile ab — der Übersetzer überliest ihn einfach:

// Das hier ist eine Notiz für Menschen
circle(100, 80, 40);   // auch hinter Code möglich

Für mehrere Zeilen am Stück gibt es /* und */:

/*
  Alles zwischen diesen beiden Zeichenfolgen
  wird überlesen, egal wie viele Zeilen es sind.
*/

Kommentare sind aber nicht nur für Notizen da. Der Kniff, den du am häufigsten brauchen wirst, heißt auskommentieren: Du machst eine Zeile vorübergehend zum Kommentar, statt sie zu löschen. So findest du heraus, welche Zeile für welchen Teil des Bildes zuständig ist — und kannst sie danach mit zwei Tastendrücken zurückholen.

void setup() {
size(320, 180);
background(250);

fill(70, 130, 220);
circle(90, 90, 90);

// fill(230, 180, 60);
// circle(230, 90, 90);
}

Wie dein Code zum Programm wird

Der Computer versteht deinen Quelltext nicht. Er muss übersetzt werden — und dafür gibt es zwei grundsätzlich verschiedene Wege.

Ein Compiler übersetzt das ganze Programm auf einmal, bevor irgendetwas läuft. Am Ende steht ein fertiges Übersetzungsergebnis, das dann ausgeführt wird. Der Vorteil: Wenn du dich irgendwo vertippt hast, merkt der Compiler das schon beim Übersetzen — dein Programm startet dann gar nicht erst.

Ein Interpreter geht das Programm Zeile für Zeile durch und führt jede sofort aus. Es entsteht kein Zwischenprodukt. Der Vorteil: Es geht sofort los. Der Nachteil: Ein Fehler in Zeile 50 fällt erst auf, wenn das Programm dort ankommt — womöglich mitten im Betrieb.

Auf dieser Webseite passiert übrigens genau das: Dein Processing-Code wird zuerst nach JavaScript übersetzt — das ist die Sprache, die Browser sprechen — und der Browser führt dieses JavaScript dann aus. Für dich bleibt das unsichtbar, du schreibst und siehst überall Processing, genau wie in der IDE.

Jetzt du