Startseite>Einführung in die Programmierung mit Processing
Aus Raspberry Pi Geek 10/2018

Einführung in die Programmierung mit Processing

© Computec Media Group

Physiklabor

Pit Noack

Der Java-Dialekt Processing zielt auf interaktive Animationen ab und eignet sich auch für Programmiernovizen.

Die objektorientierte, stark typisierte Programmiersprache Processing wurde ursprünglich am Massachusetts Institute of Technology in Boston für die Einsatzbereiche Grafik, Simulation und Animation entwickelt. Als stark vereinfachte Version von Java zielt Processing darauf ab, Gestaltern, Künstlern und Programmieranfängern das Programmieren visueller Elemente zu ermöglichen. Die Klassenbibliotheken der Sprache berücksichtigen neben Grafik, Video, Animation und Sound auch Simulation, Typografie, 3-D, den Datentransfer sowie Netzwerkprotokolle. Auf der Homepage Processing.org finden sie zahlreiche Hintergrundinformationen zu dem quelloffenen Projekt.

Die Installation der Processing-Entwicklungsumgebung erledigen Sie mit einer Zeile im Terminal (Listing 1). Anschließend finden Sie das Processing-Icon im Anwendungsmenü unter Entwicklung. Alternativ starten Sie das Programm mit dem Kommando processing auf der Kommandozeile.

Listing 1

 

$ curl https://processing.org/download/install-arm.sh | sudo sh

Die IDE selbst (Abbildung 1) gibt sich minimalistisch: Der Textbereich enthält Code, den Sie durch einen Druck auf den Knopf Run ausführen. Processing legt bei Installation automatisch ein Verzeichnis ~/sketchbook/ an, in dem Sie Ihre Processing-Programme speichern. Diese nennt man auch Sketches, also Skizzen.

Abbildung 1: Die Processing-IDE mit einem kompletten Programm, mit dem Sie per Mauszeiger einen Kreis über den Bildschirm schieben.

Abbildung 1: Die Processing-IDE mit einem kompletten Programm, mit dem Sie per Mauszeiger einen Kreis über den Bildschirm schieben.

Aufwärmübungen

Schon ein leeres Programm liefert beim Ausführen ein grau gefülltes Programmfenster mit einer Seitenlänge von 100 Pixeln. Probieren Sie gleich Ihre erste Codezeile: size(500,500) schafft mehr Platz. Schreiben Sie als zweite Zeile ellipse(250,250,100,100), um einen Kreis mit einem Durchmesser von 100 Pixeln mittig ins Fenster zu zeichnen. Wie bei Computergrafik üblich, liegt der Ursprung des Koordinatensystems links oben.

Der Kreis erscheint mit weißer Füllung und einem schwarzen Rand. Mit den Befehlen fill() und stroke() ändern Sie diese Farben. Als Parameter übergeben Sie dabei Zahlen zwischen 0 und 255. Eine einzelne Zahl repräsentiert eine Graustufe, drei Zahlen eine Farbmischung aus Rot-, Grün- und Blauanteil. So sorgt fill(255,0,0) beispielsweise für eine rote Füllung. Eine zusätzliche zweite beziehungsweise vierte Zahl steuert die Deckkraft. Eine Farbwahl gilt immer für alle folgenden Zeichenaktionen, bis ein weiterer Farbbefehl sie aufhebt.

Sie finden diese und weitere Grafikbefehle in der Tabelle “Wichtige Befehle und Variablen”. Eine Übersicht aller Funktionen und Systemvariablen öffnen Sie über Hilfe | Referenz.

Wichtige Befehle und Variablen

Befehl/Variable

Funktion

Grafik

ellipse(x, y, Breite, Höhe)

Ellipse zeichnen

rect(x, y, Breite, Höhe)

Rechteck zeichnen

line(x1, y1, x2, y2)

Linie zeichnen

fill(R, G, B)

Füllfarbe festlegen

stroke(R, G, B)

Strichfarbe festlegen

strokeWeight(Stärke)

Strichdicke festlegen

background(R, G, B)

Fenster mit Farbe füllen

Programmeigenschaften

size(Breite, Höhe)

Größe des Programmfensters festlegen

width / height

Breite und Höhe des Programmfensters

frameRate(FPS)

Bildrate festlegen

Interaktion

mouseX / mouseY

aktuelle Mausposition

key

zuletzt gedrückte Taste

Bewegung statt Stillstand

Mit Abfolgen aus den vorgestellten Befehlen zeichnen Sie einfache, statische Grafiken. Abbildung 1 zeigt den Code eines ersten interaktiven Programms: Mit schlanken 8 Codezeilen schieben Sie per Mauszeiger einen Kreis über den Bildschirm.

Die Funktion setup() läuft automatisch beim Programmstart ab und setzt hier lediglich die Größe des Fensters. Die Funktion draw() führt Processing bei jedem Neuzeichnen des Fensters aus, per Voreinstellung 60-mal pro Sekunde.

setup() und draw() fungieren als zentrale Bausteine eines jeden Sketches mit dynamischer Grafik. Das Kommando background(255) füllt den Hintergrund weiß. Die Funktion ellipse() zeichnet den Kreis, wobei die mit mouseX und mouseY ermittelten Koordinaten des Mauszeigers dynamisch als dessen Mittelpunkt dienen.

Ein künstliches Biotop

Im Folgenden entwickeln wir in drei Schritten ein Programm, das ein künstliches Biotop auf den Bildschirm zaubert. Die erste Version beschränkt sich darauf, per Mausklick kreisförmige Partikel auf den Bildschirm zu setzen. In der zweiten Version bewegen sich die Partikel selbstständig und prallen von den Fenstergrenzen ab. Die abschließende Version bringt dann Anziehung und Abstoßung ins Spiel. Diese rudimentäre Physiksimulation führt zu lebendig anmutenden Bewegungsabläufen.

Den Code von Partikel01 finden Sie hier komplett abgedruckt, den der weiteren Versionen nur in Auszügen. Alle Programme stehen vollständig als Download auf unserer Webseite zur Verfügung. Sie öffnen ein Programm, indem Sie in der IDE über File | Open in den jeweiligen Ordner wechseln und eine beliebige PDE-Datei darin auswählen. Möchten Sie schon einmal wissen, wohin die Reise geht, starten Sie Partikel03 und klicken Sie in das Programmfenster.

Die Klasse <c>Particle<C>

Das Programm Partikel01 besteht wie alle Versionen aus drei Codedateien: Partikel0X.pde, Particle.pde und ParticleSystem.pde. In der IDE verteilen sich die Codedateien auf Tabs: Der Reiter ganz links heißt immer genauso wie das Programm; hier gehören die Definitionen von setup() und draw() hin. Über das Dreieck-Symbol in der Reiterleiste können Sie Tabs hinzufügen, löschen und umbenennen.

Bei Processing handelt es sich um eine objektorientierte Sprache. Objekte fassen Eigenschaften und Funktionen zusammen; sogenannte Klassen dienen dabei quasi als Bauplan für ein Objekt. In unserem Projekt beschreibt die Klasse Particle kreisförmige, bewegliche Grafikobjekte.

DIESEN ARTIKEL ALS PDF KAUFEN
EXPRESS-KAUF ALS PDFUmfang: 6 HeftseitenPreis €0,99
(inkl. 19% MwSt.)
€0,99 – Kaufen
RASPBERRY PI GEEK KAUFEN
EINZELNE AUSGABE Print-Ausgaben Digitale Ausgaben
ABONNEMENTS Print-Abos Digitales Abo
TABLET & SMARTPHONE APPS
Deutschland