Mit dieser Blogserie kannst du, wie im Buch “Programmieren trainieren” postuliert, deine Programmierkenntnisse verbessern - egal ob Anfänger oder Fortgeschrittener. Heute beginnen wir mit ersten Schritten und erzeugen Bilder. Reiche danach ein selbst-programmiertes Bild ein und gewinne einen von zehn Buchpreisen [Das Gewinnspiel ist beendet].

Wie wird man ein guter Programmierer? Eigentlich ist es wie im Sport: Nur durch kontinuierliches Trainieren kannst du dich verbessern. Vielleicht bist du schon im Alltag auf Probleme gestoßen, für die es noch keine geeigneten Lösungen im Internet gab. Warum nicht also selbst eine Lösung programmieren?

Bevor du aber an diesen Punkt kommen kannst, solltest du die Basics trainieren. Und genau dort treten meist Probleme auf: Viele Programmierbücher haben lediglich eine Aufgabe pro Themenpunkt. Ist diese gelöst, kannst du dich nicht mehr weiter verbessern bzw. vertiefen. Und genau hier wollen wir dir mit unserem Programmiertrainingsbuch helfen. Dort warten über 120 Programmieraufgaben mit Lösungen in Java und Python auf dich.

Um Dir eine bessere Vorstellung davon zu geben, wollen wir mir dir in dieser kurzen Blogserie die wesentlichen Inhalte und Ansätze des Buchs durchgehen. Starten wir mit einer kurzen Einführung in die Programmierung, mit der wir trainieren

Einführung

Wir verwenden die Programmierumgebung Processing. Damit kannst du Programme in Java, Python und weitere Programmiersprachen schreiben. Sogar Android-Apps sind möglich!

Besonders viel Spaß macht Processing, weil du z.B. relativ einfach damit Bilder malen kannst. Der Programmierer Daniele Olmisani hatte beispielsweise spaßeshalber bekannte Filmposter in Processing nachprogrammiert. Schaut euch die Homepage mit den Code-Beispielen an, es lohnt sich (das Raten der Filmtitel macht echt viel Spaß!).

Filmposter in Processing. Ja, das geht! Und sogar ziemlich einfach.

Das erste Programm

Und damit wollen wir direkt das erste Programm in Processing schreiben. Zunächst einmal die grundlegende Struktur: Mit Anweisungen kannst du in Processing zum Beispiel Befehle wie das Malen eines Bildpunktes oder das Setzen des Hintergrundes durchführen.

Anweisungen werden in der Form nameAnweisung(parameter); (Java) bzw. nameAnweisung(parameter) (Python) geschrieben. Mehrere Parameter in der Klammer werden dabei durch Kommas getrennt. Bei zwei Parametern wäre das zum Beispiel nameAnweisung(parameter1, parameter2); (Java).

Mithilfe von Anweisungen können wir nun unser erstes Programm schreiben. Vorher solltest du wissen, dass wir in das Bildschirmfenster aus Bildpunkten (Pixeln) besteht. Außerdem ist der Nullpunkt des Koordinatensystems oben rechts.

Anordnung der X- und Y-Achse in Processing.

Anhand dessen wollen wir unser erstes Bild in Processing malen. Alle Anweisungen für Processing findest auf der Processing-Website für Java bzw. für Python. Die Anweisungen, die wir für diese Aufgabe benötigen sind (angegebene Parameter sind stets Zahlenwerte):

  • size(breite, höhe): Setze das Bildschirmfenster auf eine Größe von Höhe x Breite in Pixel
  • background(rot, grün, blau): Setze die Hintergrundfarbe auf eine Mischfarbe aus Rot, Grün und Blau (RGB). Die Zahlen für RGB können von 0 (keine Farbe) bis 255 (volle Farbe) gesetzt werden. Möchtest du beispielsweise Gelb (Rot + Grün) als Hintergrund haben, kannst du Rot und Grün auf 255 sowie Blau auf 0 setzen.
  • stroke(rot, grün, blau): Setze Farbe des ‘‘Pinsels’’ auf die angegebene Farbe.
  • strokeWeight(Pixel): Setze die Dicke/Größe des ‘‘Pinsels’’ auf die angegebene Pixelzahl. Je größer, desto dicker werden gemalte Striche und Punkte.
  • fill(rot,grün,blau): Setze die farbliche Füllung von Grundformen, hier z.B. Rechteck und Dreieck.
  • rect(x, y, breite, höhe): Male Rechteck ins Fenster. Die rechte obere Ecke des Rechtecks setzt du mit den X- und Y- Koordinaten (x,y), die Breite und Höhe des Rechtecks setzt du mit den anderen Parametern.
  • triangle(x1, y1, x2, y2, x3, y3): Malt ein Dreieck ins Bild. Die Eckpunkte des Dreiecks setzt du mit den übergebenen Koordinaten ((X1, Y1) für den ersten Punkt und so weiter…).

Kommentare kannst du in Java mit //und in Python mit # setzen. Diese Zeile wird dann entsprechend nicht als Code ausgeführt. Sehr praktisch, um einzelne Codestücke zu verstehen.

Mit diesen wenigen Anweisungen können wir jetzt unser erstes Haus in Processing malen. Vorher haben wir uns auf einer kleine Skizze auf Papier eingezeichnet, an welcher Pixelposition welche Grundform stehen soll:

Skizze zum Haus

Und es danach in Codeform gepackt:

Unser erstes Programm

Java:

// Setze Fenstergröße auf 600x600 Pixel
size(600, 600);

// Setze Hintergrund auf weiß
background(255, 255, 255);

// Setze Strichfarbe auf Rot
stroke(255, 0, 0);

// Setze Füllfarbe auf Weiß
fill(255, 255, 255);

// Setze Strichdicke auf 2 Pixel
strokeWeight(2);

// Rechteck malen
rect(150, 200, 300, 300);

// Dreieck malen
triangle(150, 200, 450, 200, 300, 100);

Python:

# Setze Fenstergröße auf 600x600 Pixel
size(600, 600)

# Setze Hintergrund auf weiß
background(255, 255, 255)

# Setze Strichfarbe auf Rot
stroke(255, 0, 0)

# Setze Füllfarbe auf Weiß
stroke(255, 255, 255)

# Setze Strichdicke auf 2 Pixel
strokeWeight(2)

# Rechteck malen
rect(150, 200, 300, 300)

# Dreieck malen
triangle(150, 200, 450, 200, 300, 100)

Wenn du diese Codes in Processing einfügst und ausführst, solltest du das oben stehende Bild sehen können. Bitte beachte aber, dass für die Python-Variante der Python-Mode aktiviert sein muss. Ihn kannst du in Processing als Modus nachinstallieren.

Und jetzt bist du gefragt

Nachdem ihr nun wisst, wie der Hase läuft, stellen wir dir eine Programmieraufgabe zum Selberlösen: Zeichne uns einen Daumen. Das folgende Bild ist keine exakte Vorgabe, aber soll zeigen, wie er aussehen könnte:

So könnte der Daumen aussehen

Aufgabenstellung

Programmiere einen Daumen wie in der oben stehenden Darstellung. Verwende zum Zeichnen die vorgestellten Processing-Grundelemente Rechteck und Dreieck.

Tipps zur Lösung

  1. Stelle zunächst die Fenstergröße auf 600x600 Pixel (size).
  2. Die Bestimmung der Pixelpositionen ist am Einfachsten, wenn du auf kariertem Paper die Grafik einzeichnet.
  3. Setze die Hintergrundfarbe (background). Wir haben die folgende Farbwerte gesetzt: 47 (Rot), 125 (Grün), 225 (Blau).
  4. Setze die Zeichnungsparameter für den Daumen (strokeWeight, stroke, fill). Für den Daumen haben wir folgende Farbwerte gesetzt: 255 (Rot), 186 (Grün), 8 (Blau).
  5. Zeichne den Daumen (rect, triangle).
  6. Setze die Zeichnungsparameter für den Hemdkragen (strokeWeight, stroke, fill). Für den Hemdkragen haben wir folgende Farbwerte gesetzt: 3 (Rot), 43 (Grün), 67 (Blau) und 19 (Rot), 111 (Grün), 99 (Blau).
  7. Zeichne den Hemdkragen (rect).

Einen Lösungsvorschlag gibt es im nächsten Blogartikel.