Mit dieser Blogserie kannst du, wie in unserem Buch “Programmieren trainieren” postuliert, deine Programmierkenntnisse verbessern – egal ob du das erste Mal programmierst oder schon Programmiererfahrung gesammelt hast. Heute beginnen wir mit ersten Schritten und erzeugen Bilder. Reiche danach ein selbst-programmiertes Bild ein und gewinne dein eigenes Buchexemplar „Programmieren trainieren“.

Das erwartet dich im Beitrag:

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. damit relativ einfach 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 (https://mad4j.github.io/book-mdpc/). Ja, das geht! Und sogar ziemlich einfach.

Abbildung 1: Filmposter in Processing (https://mad4j.github.io/book-mdpc/). 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 das Bildschirmfenster aus Bildpunkten (Pixeln) besteht. Außerdem ist der Nullpunkt des Koordinatensystems oben links.

Anordnung der X- und Y-Achse in Processing.

Abbildung 2: 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 kleinen Skizze auf Papier eingezeichnet, an welcher Pixelposition welche Grundform stehen soll:

Abbildung 3: Skizze zum Haus

Abbildung 3: Skizze zum Haus

Und es danach in Codeform gepackt:

Abbildung 4: erstes Programm

Abbildung 4: 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 Strichdicke auf 2 Pixel
strokeWeight(2);

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

// 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 Strichdicke auf 2 Pixel
strokeWeight(2)

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

# 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:

Abbildung 5: So könnte der Daumen aussehen

Abbildung 5: 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 600×600 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, mit dem Du etwa in einem Monat rechnen kannst.

Gewinnspiel – Mach mit und gewinne dein persönliches Buchexemplar „Programmieren trainieren“

Wenn du ausreichend trainiert hast, kommen dir ganz automatisch eigene Ideen. Reiche uns doch ein selbst-programmiertes Bild mit dem zugehörigen Processing-Code ein. Schicke uns dazu eine Mail mit einem Screenshot des Bildes mit dem zugehörigen Codes (Processing-Dateiformat) mit dem Betreff „Wettbewerb Programmieren trainieren“ an hanser-update@hanser.de. Einsendeschluss ist der 29.04.2018. Die fünf kreativsten Bilder werden mit einem Buchexemplar „Programmieren trainieren“ belohnt. Die Bilder werden jeweils mit dem Namen der Gewinner am 04.05.2018 hier im Beitrag bekannt gegeben.

Gerne schreibe uns auch im Kommentar des Beitrags, wie Du zurechtgekommen bist und ob Du schon ein Bild eingereicht hast! Natürlich kannst Du hier auch Fragen stellen!

Dabei gelten natürlich wie immer unsere Gewinnspiel Teilnahmebedingungen.