Letztes Update: 11.07.2017
Behandelte Befehle: point, line, rect, triangle, ellipse, arc, beginShape, vertex, endShape, fill, stroke, strokeWeight, size, background

Lernziele

  • Punkte und einfache Formen in einem Bildschirm-Koordinatensystem verorten
  • Zeichnen von Formen in Processing-Befehlen formulieren
  • Einfache Formen einfärben und zu komplexeren Formen zusammensetzen

In diesem Kurs wird das Programmieren anhand von grafischen Beispielen erlernt. So können Sie technische Vorgänge direkt visuell überprüfen. Das macht Spaß und beschleunigt den Lernprozess.

Fürs Lernen benutzen wir die Programmiersprache Processing, welche sich unmittelbar aus der populären Programmiersprache Java ableitet.

In diesem Kapitel lernen Sie,

  • wie ein "Befehl" in Processing aufgebaut ist,
  • wie ein Computerprogramm abgearbeitet wird,
  • wie man einfache Figuren im Koordinatensystem von Processing zeichnet.

Nach Durcharbeiten des Kapitels können Sie

  • erste Programme schreiben
  • komplexe Figuren zeichnen, in Graustufen und in Farbe

1.1 Pixel, Koordinaten, Befehle

Video: Pixel und Koordinaten (6:43)

Computermonitore und Bildschirme im allgemeinen bestehen aus einem Gitter kleinster Punkte, aus denen sich das Bild zusammensetzt. Diese Punkte nennt man Pixel (für engl. picture element). Bilder werden erzeugt, indem die Pixel mit verschiedenen Farben belegt werden, im einfachsten Fall mit Schwarz und Weiß.

Um jeden einzelnen Pixel gezielt ansprechen zu können, verwendet man Koordinaten. Eine Koordinate gibt die x-Position an (links nach rechts), die andere gibt die y-Position an (oben nach unten). Das Koordinatensystem ist ähnlich zu dem, das Sie aus der Schule kennen, steht aber auf dem Kopf.

In der Abbildung oben hat der obere Punkt die Koordinaten x=0 und y=1 oder kurz (0, 1). Der untere Punkt hat die Koordinaten (3, 3).

Das Pixel-Koordinatensystem beginnt bei Null. Das heißt, wenn ein Fenster eine Auflösung von 800x600 hat, dann gibt es die x-Koordinaten 0, 1, ..., 799 und die y-Koordinaten 0, 1, ..., 599.

Video: Was ist ein Befehl? (4:46)

Beim Programmieren geht es darum, dem Computer Befehle zu geben. Ein Computerprogramm ist eine Liste von Befehlen. Ein Beispiel für einen Befehl ist

Zeichne einen Punkt an der Stelle (10, 50) !

In Processing sieht das so aus:

point(10, 50);

Der Befehl hat drei Teile:

  • der Name "point" umschreibt, was die Aufgabe ist (Punkt zeichnen!)
  • die zwei Parameter "(10, 50)" geben Details zur Aufgabe (kommt an die Stelle 10, 50)
  • das Semicolon zeigt an, dass der Befehl hier aufhört

1.2 Formen

Video: Zeichnen von Grundformen (11:10)

Linie

Um eine Linie zu zeichnen, gibt man den Startpunkt (x1, y1) und den Endpunkt (x2, y2) der Linie an, also vier Parameter. Allgemein:

line(x1, y1, x2, y2);

Ein konkretes Beispiel:

line(20, 10, 100, 10);

Dreieck

Wenn Sie ein Dreieck zeichnen wollen, müssen Sie noch einen dritten Punkt (x3, y3) angeben. Allgemein:

triangle(x1, y1, x2, y2, x3, y3);

Beispiel:

triangle(0, 100, 80, 100, 40, 20);

Rechteck

Bei einem Rechteck geben Sie den linken, oberen Eckpunkt (x, y), die Breite und die Höhe an. Genau dieser Reihenfolge. Allgemein:

rect(x, y, breite, hoehe);

Beispiel:

rect(10, 10, 100, 50);

Ellipse

Sie möchten einen Kreis zeichnen? Kein Problem. Allerdings verallgemeinern wir das gleich zu Ellipsen. Hier geben Sie den Mittelpunkt (x, y) an, dann den Durchmesser in der Breite und den Durchmesser in der Höhe. Allgemein:

ellipse(x, y, durchmesserBreite, durchmesserHoehe);

Beispiel:

ellipse(50, 50, 80, 50);

Ellipsen-Segment

Um nur einen Teil der Ellipse zu zeichnen, geben Sie zusätzlichden Startwinkel alpha und den Endwinkel beta an. Die Winkel sind im Bogenmaß anzugeben (360° entspricht 2*PI). Das PI enthält den Wert von Pi, so dass Sie damit rechnen können. Allgemein sieht der Befehl arc so aus:

arc(x, y, b, h, alpha, beta);

Die Winkel werden relativ zu einer gedachten Linie vom Mittelpunkt nach rechts gemessen. Das ist die Referenzlinie:

Zum Beispiel bei einem Startwinkel von 30°, gemessen im Uhrzeigersinn in Bezug auf die Referenzlinie.

Ein Endwinkel von 330° sieht dann so aus:

Sie müssen die Winkel im Bogenmaß angeben:

arc(50, 50, 80, 50, PI/6, 2*PI - PI/6);

Sie können die Funktion radians() verwenden, um in Grad zu denken und wirken. Hier das gleiche wie oben mit Grad:

arc(50, 50, 80, 50, radians(30), radians(330));

Allgemeines Viereck

Wenn Sie eine Form mit vier Ecken, das nicht notwendigerweise ein Rechteck ist (somit nicht unbedingt rechte Winkel in den Ecken hat), dann verwenden Sie den Befehl quad und übergeben diesem die vier Eckpunkte (x1, y1), (x2, y2), (x3, y3) und (x4, y4) hintereinander weg.

quad(x1, y1, x2, y2, x3, y3, x4, y4);

Beispiel:

quad(10, 10, 80, 20, 90, 80, 15, 50);

Polygone

Sie können auch Formen definieren, indem Sie eine Reihe von Punkten definieren, die dann mit Linien verbunden werden. Das nennt man auch Polygon (Vieleck).

Schauen wir mal, wie das funktioniert:

beginShape();
vertex(50, 10);
vertex(80, 80);
vertex(5, 35);
endShape(CLOSE);

Jetzt erweitern wir das noch um zwei Ecken links oben:

beginShape();
vertex(50, 10);
vertex(80, 80);
vertex(5, 35);
vertex(10, 0);  // neue Ecke
vertex(30, 30); // neue Ecke
endShape(CLOSE);

Sie müssen also Processing zunächst mit beginShape sagen, dass Sie ein Vieleck definieren möchten. Dann definieren Sie die Eckepunkte mit vertex (engl. für Knotenpunkt).

Mit endShape geben Sie das Signal zum Zeichnen. Deshalb steht dort in Klammern noch eine weitere Angabe (nennt man auch Paramter, aber dazu später), nämlich, ob der letzte Punkt mit dem ersten verbunden sein soll, dann geben Sie CLOSE an. Wenn Sie es weglassen, wird die Form nicht geschlossen:

beginShape();
vertex(50, 10);
vertex(80, 80);
vertex(5, 35);
vertex(10, 0);
vertex(30, 30);
endShape(); // nicht schließen

Es gibt noch ein paar weitere Optionen. Schauen Sie sich unter Help > Reference den Befehl beginShape() mal an.

Übungsaufgaben

Zeichnen Sie die folgenden Figuren zunächst auf Papier und schreiben Sie dann die entsprechende Befehlsfolge auf.

(a) Haus

Zeichnen Sie folgendes Haus, indem Sie Grundformen kombinieren.

(b) Halbkreis

(c) Haus

Zeichnen Sie ein Haus mit Hilfe von beginShape und endShape.

(d) Drudenfuß

Zeichnen Sie folgende Figur mit Hilfe von beginShape und endShape.

Zeichenmodus

Wir haben gesehen, dass bei einem Rechteck immer der linke obere Punkt angeben wird. Jetzt stellen Sie sich vor, Sie wollen folgendes Rechteck zeichnen:

Sie sehen, dass das Rechteck auf dem Mittelpunkt steht, aber Sie müssen die linke, obere Ecke "ausrechnen":

rect(30,30,40,40);

Einfacher wäre es, wenn Sie den Mittelpunkt angeben könnten, denn man sieht sofort, dass das (50, 50) ist. Processing erlaubt dies mit dem Befehl rectMode(CENTER):

rectMode(CENTER);
rect(50,50,40,40);

Dieser Befehl stellt die Art und Weise um, wie rect() seine Parameter interpretiert.

Mit rectMode(CORNERS) bringen Sie Processing dazu, die Parameter als zwei Eckpunkte (links-oben, rechts-unten) zu interpretieren. Das wäre für ein Rechteck interessant, dass unbedingt rechts unten am Mittelpunkt sein soll:

Im Code geben Sie also die zwei Eckpunkte (20,20) und (50,50) an:

rectMode(CORNERS);
rect(20,20,50,50);

Wichtig: Sobald Sie rectMode verwenden, gilt der neue Modus so lange bis wieder rectMode aufgerufen wird.

Wenn Sie z.B. wieder den ursprünglichen Modus herstellen wollen (linke-obere Ecke + Breite + Höhe), geben Sie rectMode(CORNER) an:

rectMode(CORNERS); // Zwei-Ecken-Modus
rect(20, 20, 50, 50);
rectMode(CORNER); // "normaler" Modus
rect(50, 50, 10, 10);

Zeichenreihenfolge

Wenn Sie mehrere Formen zeichnen, verdecken die später gezeichneten alle früheren.

ellipse(40, 40, 35, 35);
rect(40, 40, 40, 30);
triangle(60, 60, 20, 90, 60, 90);

Sie können das nutzen, um komplexere Figuren durch Überlagerung zu erschaffen.

Beispiel:

rect(10, 10, 80, 60);
// Kreissegment ein Pixel runter, damit untere Linie verdeckt
arc(50, 71, 80, 80, radians(180), radians(360));

Übungsaufgabe

(e) Gesicht

Zeichnen Sie folgendes Gesicht aus Grundformen. Achten Sie darauf, welche Befehle vor oder nach welchen anderen ausgeführt werden müssen, damit alle Teile sichtbar sind.

Zusammenfassung

  • Grundformen: Processing stellt Befehle zum Zeichnen vieler Grundformen bereit. Anfangs- und Endpunkte oder andere Informationen zum Zeichnen werden als Parameter übergeben. Sie haben folgende Befehle kennen gelernt: line, triangle, rect, ellipse, arc und quad.
  • Polygone: Beliebige Polygone (Vielecke) zeichnen Sie mit einer Reihe von vertex-Befehlen (Eckpunkte), die von beginShape() und endShape() umschlossen sind.
  • Zeichenreihenfolge: Eine Zeichnung entsteht in der Reihenfolge, wie die Befehle im Code stehen (von oben nach unten). Wenn Sie mehrere Formen zeichnen, verdecken die später gezeichneten alle früheren.

1.3 Farbe I

Graustufen und fill

Sie können Ihre Figuren variieren, indem Sie bestimmen, mit welchem Grauwert das Innere gefüllt werden soll. Grauwerte werden von 0 (schwarz) bis 255 (weiß) angegeben. Stellen Sie sich vor, Sie würden die "Lichtmenge" angeben (0 = keins, 255 = alles). Es gibt 256 Werte, weil das der Wertumfang ist, den ein Byte (8 Bit) speichern kann.

Der Befehl, um die Farbe festzulegen, mit der Figuren gefüllt werden, lautet fill. Sobald Sie diesen Befehl verwenden, gilt er für alle weiteren Zeichenbefehle bis zum nächsten fill. Zum Beispiel alles schwarz füllen:

fill(0);
ellipse(40, 40, 35, 35);
rect(40, 40, 40, 30);
triangle(60, 60, 20, 90, 60, 90);
						

Oder drei Figuren jeweils unterschiedlich füllen:

fill(0);
ellipse(40, 40, 35, 35);
fill(100);
rect(40, 40, 40, 30);
fill(255);
triangle(60, 60, 20, 90, 60, 90);

Übungsaufgaben

(a) Code verstehen

Sehen Sie sich die zwei Code-Teile an. In welchen Farben werden jeweils Ellipse, Rechteck und Dreieck gemalt?

fill(0);
ellipse(40, 40, 35, 35);
fill(255);
rect(40, 40, 40, 30);
triangle(60, 60, 20, 90, 60, 90);
fill(0);
ellipse(40, 40, 35, 35);
rect(40, 40, 40, 30);
fill(255);
triangle(60, 60, 20, 90, 60, 90);

(b) Halb-halb

Zeichnen Sie folgende Figur.

(c) Gesicht

Zeichnen Sie folgendes Gesicht.

Kontur und stroke

Die Umrandung/Kontur einer Form kann man mit dem Befehl stroke (engl. für Pinselstrich) einfärben. Die Dicke der Umrandung kontrolliert man mit dem Befehl strokeWeight (weight ist engl. für Gewicht). Zum Beispiel weißer Rand, schwarze Füllung:

strokeWeight(4);
stroke(255);
fill(0);
ellipse(40, 40, 35, 35);

Mit dem Befehl noStroke schalten Sie das Zeichnen der Kontur vollständig aus (solange bis wieder der Befehl stroke kommt).

noStroke();
ellipse(20, 20, 35, 35);
rect(60, 60, 35, 35);

Hier wird die Kontur beim zweiten Objekt wieder eingeschaltet:

noStroke();
ellipse(20, 20, 35, 35);
stroke(0); // schwarze Kontur
rect(60, 60, 35, 35);

Auf ähnliche Weise können Sie das Füllen von Figuren ausschalten. Mit noFill werden Figuren nicht gefüllt, d.h. unter anderem, dass darunterliegende Objekte sichtbar sind:

rect(20,20,60,60);
noFill();
ellipse(20, 20, 35, 35);
rect(60, 60, 35, 35);

Übungsaufgabe

(d) Mund

Zeichnen Sie ein Gesicht mit Mund:

Zeichenfläche und Hintergrund

Mit dem Befehl size legt man die Größe (Breite und Höhe) des Zeichenfensters fest, das normalerweise 100x100 Pixel groß ist. Beispiel, um ein 800x600-Pixel großes Fenster zu erhalten:

size(800, 600);

Die Hintergrundfarbe setzt man mit background. Hier z.B. auf schwarz...

background(0);

... oder weiß:

background(255);

Der Hintergrund ist auf ein Grau voreingestellt.

Wichtig: Der Befehlt background übermalt das gesamte Fenster mit der angegebenen Farbe. Es ist also wichtig, dass background vor allem anderen Zeichencode gesetzt wird.

Richtig:

background(50); // Bild wird mit Grau übermalt
rect(25,25,50,50);

Falsch:

rect(25,25,50,50);
background(50); // Bild wird mit Grau übermalt

Farbe

Um bei stroke oder fill eine Farbe anzugeben, gibt man nicht einen, sondern drei Werte an: jeweils für Rot, Grün und Blau (deshalb auch RGB-Farbe). Jeder Wert kann zwischen 0 und 255 (inklusive) liegen. Wenn man einen der Werte auf 255 setzt und die anderen auf 0, bekommt man also reines Rot oder Grün oder Blau:

strokeWeight(4);
background(255, 0, 0);
stroke(0, 255, 0);
fill(0, 0, 255);
rect(20, 20, 60, 60);

Als Merkhilfe denken Sie immer: R - G - B. Das heißt: Rot - Grün - Blau. Das ist genau die Reihenfolge der Zahlen bei allen Farbbefehlen.

Für eine rote Füllung, setzen Sie nur den ersten Wert aufs Maximum (= 255):

fill(255, 0, 0);

Für eine grüne Füllung:

fill(0, 255, 0);

Für eine blaue Füllung:

fill(0, 0, 255);

Auch der Befehl background() funktioniert mit drei RGB-Werten.

Übungsaufgabe

(d) Regenbogen

Versuchen Sie, folgenden Regenbogen zu malen. Arbeiten Sie ausschließlich mit fill und schalten Sie die Kontur mit noStroke aus.

Zusammenfassung

  • Graustufen: Eine Graustufe wird als Zahl zwischen 0 und 255 (inklusive) angegeben, je kleiner desto schwärzer. Merkhilfe: Zahl gibt Lichtmenge an.
  • Befehle: Mit fill() legen Sie die Farbe im Innern einer Form fest, mit stroke() die Farbe der Kontur. Mit noFill() und noStroke() verhindern Sie das Malen der Füllung bzw. der Kontur. Mit strokeWeight() legen Sie die Dicke der Kontur fest (in Pixeln).
  • Zeichenfenster: Mit size() legen Sie die Größe des Fensters fest, mit background() übermalen Sie das gesamte Fenster mit der angegebenen Graustufe.
  • Farbe: Sie erzeugen Farbe, indem Sie drei Werte statt einem Wert angeben. Die drei Werte (je zwischen 0 und 255) bestimmen die drei Farbanteile Rot, Grün, Blau (RGB). Alle Befehle, die eine Graustufe akzeptieren (ein Wert), akzeptieren auch eine Farbe (drei Werte, also drei Parameter), z.B. fill(), stroke() und background().