Grafisch programmieren, messen und steuern mit Processing (Leseprobe)

Grafisch programmieren, messen und steuern mit

PROCESSING

Kurt Diedrich

LEARN DESIGN SHARE

N ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DES HARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE GN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DE HARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ●

Grafisch programmieren, messen und steuern mit

PROCESSING â—? von Kurt Diedrich

LEARN DESIGN SHARE

●

© 2019: Elektor Verlag GmbH, Aachen.

●

Alle Rechte vorbehalten.

1. Auflage 2019

Die in diesem Buch veröffentlichten Beiträge, insbesondere alle Aufsätze und Artikel sowie alle Entwürfe, Pläne, Zeichnungen und Illustrationen sind urheberrechtlich geschützt. Ihre auch auszugsweise Vervielfältigung und Verbreitung ist grundsätzlich nur mit vorheriger schriftlicher Zustimmung des Herausgebers gestattet.

Die Informationen im vorliegenden Buch werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Die in diesem Buch erwähnten Soft- und Hardwarebezeichnungen können auch dann eingetragene Warenzeichen sein, wenn darauf nicht besonders hingewiesen wird. Sie gehören dem jeweiligen Warenzeicheninhaber und unterliegen gesetzlichen Bestimmungen.

Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autor können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen.

Für die Mitteilung eventueller Fehler sind Verlag und Autor dankbar.

●

Erklärung

Der Autor und der Herausgeber dieses Buches haben alle Anstrengungen unternommen, um die Richtigkeit der in diesem Buch enthaltenen Informationen sicherzustellen. Sie übernehmen keine Haftung für Verluste oder Schäden, die durch Fehler oder Auslassungen in diesem Buch verursacht werden, unabhängig davon, ob diese Fehler oder Auslassungen auf Fahrlässigkeit, Unfall oder andere Ursachen zurückzuführen sind.

Umschlaggestaltung: Elektor, Aachen Satz und Aufmachung: D-Vision, Julian van den Berg | Oss (NL) Druck: WILCO, Amersfoort, Niederlande Printed in the Netherlands

●

ISBN 978-3-89576-343-4

Elektor-Verlag GmbH, Aachen www.elektor.de

Elektor ist Teil der Unternehmensgruppe Elektor International Media (EIM), der weltweit wichtigsten Quelle für technische Informationen und Elektronik-Produkte für Ingenieure und Elektronik-Entwickler und für Firmen, die diese Fachleute beschäftigen. Das internationale Team von Elektor entwickelt Tag für Tag hochwertige Inhalte für Entwickler und DIY-Elektroniker, die über verschiedene Medien (Magazine, Videos, digitale Medien sowie Social Media) in zahlreichen Sprachen verbreitet werden. www.elektor.de

LEARN DESIGN SHARE

Inhalt Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Kapitel 1 • Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Starten eines existierenden Processing-Programms . . . . . . . . . . . . . . . . . . . . . . . . . 12 Erzeugen aktueller Programmversionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Zugriff auf externe Dateien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Arbeiten mit dem Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Menüpunkte im Editorfenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Kapitel 2 • Grundlegendes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Die Variablen von Processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Variablendeklaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Deklaration von Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Die Funktion Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Die wichtigsten Grafikfunktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Einbinden von Bitmap-Grafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Kapitel 3 • Interaktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 if und die Funktion mousePressed() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Wo ist die Maus? mouseX und mouseY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Die Funktion mouseReleased() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Eigene Funktionen schreiben und aufrufen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Funktionen auslagern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Konsole als Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Tempo, Tempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Kapitel 4 • Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Programmierung von Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Licht und Schatten: Simulation eines gedrückten Buttons . . . . . . . . . . . . . . . . . . . . . 75 Bitmap-Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Button-Kategorien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Kapitel 5 • Verschiebungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Schiebepoti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Skalenstrich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Vektorgrafik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Kapitel 6 • Darstellung von Daten in Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

●5

Processing Rauschsignale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Total View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Zoom-Cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Ausschnitt mit zwei Cursors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Y-Offset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Y-Zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 X-Zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Gitternetz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Palettenarrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Kapitel 7 • Speichern und Laden / Teil I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Array-Daten im Byte-Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Aus eins mach zwei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Speichern von Zahlen größer 255 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Kapitel 8 • Oszilloskop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Oszilloskop: Die Horizontalablenkung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Der Arduino kommt ins Spiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 COM-Port . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Analoge Daten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Änderung des Samplerate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Kapitel 9 • Ein wenig Analogtechnik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Arduino-Oszilloskop-Vorsatz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Spannungsgesteuerter Funktionsgenerator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Universeller, echter Rauschgenerator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Kapitel 10 • Speichern und Laden/ Teil II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Laden der gespeicherten Byte-Datei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 File Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Kapitel 11 • Steuerung externer Geräte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Schieberegler statt Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Daten und Adressen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Die Schaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Einfaches Programm zum Steuern mehrerer Potis und Schalter . . . . . . . . . . . . . . . . 226

●6

Inhalt Lichtmuster und Sequencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Sequenzer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Kapitel 12 • Zwei Fenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Fenster im Fenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Kapitel 13 • Programmbeispiele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Beispiel 1: GuiCreator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Beispiel 2: Game of Life . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Beispiel 3: Wachstumsfunktion 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Beispiel 4: Wachstumsfunktion 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Beispiel 5: FFT-Analyse über der Zeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Beispiel 6: Primzahl-Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

●7

Processing

â—?8

Einleitung

Einleitung "Processing – was soll das sein?" Diese oder ähnliche Antworten hörte ich bisher sehr oft, wenn mich jemand fragte, in welcher Sprache ich programmiere. Das ist eigentlich sehr schade, denn trotz seines Nachteils, nicht über ein Tool zum Erzeugen einer grafischen Benutzeroberfläche zu verfügen, bietet Processing sehr viele Vorteile: Der von Processing verwendete Java-Code ist sehr einfach und sehr strukturiert und erinnert mich an das früher einmal sehr bekannte Turbo C von Borland. Wenn man sich ein Mal an die Syntax gewöhnt hat, die in vielen Dingen fast so einfach wie das alte, klassische BASIC ist, kommt man sehr schnell klar damit. Die Anweisungen zum Zeichnen grafischer Elemente wie zum Beispiel von Rechtecken sind sehr einfach. Wo ich bei Visual-Basic zum Beispiel jedes Mal erneut nachschauen muss, wie der sich über zwei oder noch mehr Zeilen erstreckende Befehl lautet, kenne ich das Pendant von Processing aufgrund seiner Kürze auswendig. Objektorientiertes Programmieren ist möglich, aber nicht notwendig, so dass wir uns in diesem Buch nicht mit diesem Thema beschäftigen werden. Statt eines umfangreichen Paketes an Dateien (Projekt) müssen Sie, ganz wie beim alten BASIC, lediglich den Editor starten, das Programm schreiben und den Run-Button anklicken.

Die Ausführungsgeschwindigkeit von Processing ist atemberaubend. Durch Zeitmessungen an verschiedenen Programmbeispielen habe ich herausgefunden, dass Processing beim Zeichnen grafischer Objekte wie Punkten, Linien oder Kreisen mehrere hundert mal schneller ist als Visual-Basic. Aus diesem Grunde ist Processing besonders geeignet für alle Programme, in denen sich etwas auf dem Bildschirm bewegt – zum Beispiel der Schieber eines Schiebepotis, ein Skalenstrich oder gar ein Objekt eines Vektorgrafik-Programms, das per Maus verschoben wird: Ein Ruckeln und Flimmern wird man hier vergeblich suchen. Dieses Buch wendet sich an Leser, die schon über Programmiererfahrungen verfügen und bereits wissen, worum es sich bei einer for-Schleife, einem String oder einem Array handelt. Um es dem Leser so einfach wie möglich zu machen, beschränke ich mich auf die elementarsten Anweisungen und Funktionen. Es leuchtet ein, dass man auch mit wenigen Befehlen fast alles bewirken kann, wenn man diese geschickt und logisch anwendet. Genau davon handelt dieses Buch: Es zeigt anhand einfacher, leicht nachvollziehbarer Beispiele, wie man unter anderem Buttons programmiert, einen Skalenstrich mittels der Maus bewegt oder Signale aufzeichnet und auf dem Bildschirm darstellt; wie man diese verschiebt und zoomt oder wie man mit Processing einen Arduino über eine selbstgemachte, grafische Benutzeroberfläche fernsteuern kann.

Die Beispielprogramme beschränken sich auf das, was man wirklich braucht, um ein bestimmtes Ziel zu erreichen. So muss der Leser nicht lange die für seine Anwendung relevanten Zeilen herauspicken – eine Unsitte, die man vor allem in den im Internet veröffentlichten Beispielen findet. Zusatzlich dazu kann der Leser die Beispiele unter www.elektor.de/processing-buch aus dem Internet herunterladen. Zu den Download-Programmen gehören auch ein universell verwendbares Oszilloskop und ein Programm, mit dem man eine grafische Benutzer-

●9

Processing

oberfläche für Processing erzeugen kann. Ihre ausführliche Beschreibung würde aufgrund ihres Umfangs die Grenzen des vorliegenden Buches überschreiten (das GUI-Programm besitzt fast 5000 Programmzeilen). Durch das Verändern von Teilen dieser Programme und durch das Beobachten der Folgen kann der Leser jedoch wertvolle Kenntnisse erlangen.

Mir bleiben nur noch zwei Wünsche: Erstens, dass Sie viel Spaß beim Lesen dieses Buches haben werden und sie von den zahlreichen Beispielen profitieren, und zweitens, dass ich danach nie wieder die Frage "Processing – was soll das sein?" hören muss.

● 10

Kapitel 1 • Vorbereitungen

Kapitel 1 • Vorbereitungen Den Beispielcode für das Buch können Sie unter

www.elektor.de/processing-buch

herunterladen.

Um Ihr erstes Processing-Programm zu schreiben, starten Sie die Datei processing.exe, die sich in dem Verzeichnis befindet, das beim Herunterladen der Software angelegt wurde.

Nach einem Doppelklick auf das betreffende Icon öffnet sich der übersichtliche und einfach gestaltete Editor (Bild 1.1), in den Sie Ihren Programmcode als Text nun eingeben können.

Zum Speichern Ihres Codes klicken Sie auf das Menü Datei und dann auf Speichern unter. In dem sich daraufhin öffnenden Browserfenster wählen Sie das gewünschte Verzeichnis und einen aussagekräftigen Dateinamen. Processing bietet zwar selbst einen Namen an (z.B. sketch 18_12_30a), doch wenn man später nach einem bestimmten Programm sucht, ist solch ein Name nicht gerade hilfreich.

Bild 1.1: Der Processing-Editor Beim Speichern unseres ersten Programmcodes treffen wir gleich auf eine Besonderheit von Processing: Die Datei muss immer in einem Verzeichnis gespeichert werden, das den gleichen Namen wie die Datei selber trägt (nur ohne die Endung pde), und das beim erstmaligen Speichern automatisch erzeugt wird. Wenn Sie versuchen, die pde-Datei in ein anderes Verzeichnis zu verschieben und dann zu starten, fragt Processing, ob es einen

● 11

Processing

neuen Ordner am Zielort erzeugen oder den Vorgang abbrechen soll (Bild 1.2). Um ein unübersichtliches Chaos auf Ihrer Festplatte zu vermeiden, sollten Sie beim Verschieben von Processing-Dateien daher immer gleich den ganzen Ordner mit Inhalt verschieben.

Bild 1.2: Unzulässiges Verschieben einer pde-Datei Starten eines existierenden Processing-Programms Sie können natürlich zuerst den Processing-Editor vom oben angegebenen Ort aus starten und dann den Code über das Menü Datei -> Öffnen laden. Einfacher geht es, wenn man, wie bei allen Windows-Programmen, im Explorer direkt auf die betreffende Datei doppelklickt.

Der Editor mit dem gewünschten Code öffnet sich dann nach ca. 8 Sekunden automatisch.

Erzeugen aktueller Programmversionen Beim Programmieren geht man auf Nummer sicher und überschreibt niemals eine alte mit einer neuen Version. Im Falle eines nicht zu findenden Programmierfehlers kann man dann nämlich nicht mehr zur ursprünglichen Version zurückkehren und die Entstehung des Fehlers zurückverfolgen. Aus diesem Grunde ist es empfehlenswert, das komplette Verzeichnis (gleichen Namens) in dem sich die pde-Datei befindet, im Explorer zu kopieren. Dies geht ganz einfach, indem man mit der rechten Maustaste auf das Verzeichnis klickt, die Maustaste gedrückt hält und dabei gleichzeitig die Maus in Richtung einer nicht beschrifteten, freien Stelle verschiebt. Nach dem Loslassen der Maustaste erscheint das in Bild 1.3 gezeigte Menü. Klicken Sie auf Hierher kopieren. Daraufhin erscheint im Explorer eine Kopie des Verzeichnisses, die den gleichen Namen und den Zusatz -Kopie trägt. Benennen Sie den Ordner Ihren Anforderungen entsprechend um und vergessen Sie nicht, auch der pde-Datei im Innern des Ordners den gleichen Namen zu geben. So könnte das erste Verzeichnis zum Beispiel wie folgt lauten: Version_1. Die im Verzeichnis enthaltene pde-Datei trägt dann den Namen: Version_1.pde. Bitte achten Sie dabei auch auf die Groß- und Kleinschreibung. Das kopierte Verzeichnis könnte dann zum Beispiel mit Version_2 bezeichnet werden, wobei auch hier natürlich die darin enthaltene pde-Datei ebenfalls so heißen muss.

Bild 1.3: Menü zum (unter anderem) Kopieren eines Verzeichnisses oder einer Datei im Explorer Zugriff auf externe Dateien In dem Verzeichnis, in dem eine pde-Datei eingebettet ist, dürfen sich auch beliebige andere Dateien befinden. So ist es zum Beispiel möglich, Bitmap-Grafiken während der Laufzeit

● 12

Kapitel 1 • Vorbereitungen

in ein Programm zu laden und darzustellen. Auch die in einem Array gespeicherten Daten können mit einem Processing-Programm während der Laufzeit auf der Festplatte gespeichert und von dort wieder geladen werden (wie das funktioniert, erfahren Sie in diesem Buch).

Wichtig: Wenn sich diese Daten und die betreffende pde-Datei im gleichen Verzeichnis befinden, ist keine Pfadangabe notwendig. Dies kann in vielen Fällen sehr hilfreich sein.

Mehrere pde-Dateien in einem Verzeichnis In dem zu einer Processing-Datei gehörenden Verzeichnis dürfen sich auch weitere Processing-Dateien mit beliebigen, anderen Namen befinden. Diese werden vom Hauptprogramm (also dem Programm, das den gleichen Namen wie das übergeordnete Verzeichnis besitzt) als Module betrachtet. Diese Module können zu Beispiel Funktionen enthalten, die man gerne auslagern möchte und die vom Hauptprogramm aus aufgerufen werden können.

Die Module dürfen jedoch nicht die nur einmal zu vergebenden Programmstrukturen wie z. B. draw und setup enthalten. Doch darauf werden wir später noch einmal ausführlich zurückkommen, wenn es um ein entsprechendes Beispielprogramm geht.

Arbeiten mit dem Editor Text-Kompatibilität Das Arbeiten mit dem Editor ist relativ einfach und komfortabel, da dieser sich wie ein Textverarbeitungsprogramm verhält. Doch damit nicht genug: Der Programmcode ist kompatibel zu einem mit Word geschriebenen Text. Ein Processing Code kann daher in Word kopiert werden – und umgekehrt, was bei einigen speziellen Anwendungen von Vorteil sein kann. Außerdem ist es möglich, innerhalb es Programmcodes selber einen weiteren, lauffähigen Code mittels ASCI-Text zu erzeugen, zu speichern und zu starten. Davon können wir zum Beispiel in dem am Ende des Buches beschriebenen Compiler zur Erzeugung von Programmen mit grafischer Benutzeroberfläche profitieren.

Copy and Paste Mit Copy and Paste lassen sich außerdem, wie in Textprogrammen, beliebig lange Blöcke kopieren, in denen zum Beispiel nur eine Kleinigkeit verändert werden muss. Ein Feature, das viel Tipparbeit erspart.

Fehlermeldungen Schreibt man eine neue Anweisung in eine leere Zeile im Editor (zum Beispiel rect (100,100, 40,40)), so erfolgt sofort bei der Eingabe des ersten Buchstabens, also dem "r", eine Fehlermeldung in der Konsole – in diesem Falle Error on "VariableDeclarations". Schreibt man weiter, so erhält man weitere Fehlermeldungen: Zum Beispiel, dass nicht genügend Parameter eingegeben wurden oder dass die rechte Klammer fehlt. Man möchte dem Editor zurufen: "Das weiß ich – verflixt nochmal. Lass mich doch einfach weitertippen und warte ab, bis ich fertig bin". Sicher gut gemeint, aber etwas störend. Ansonsten werden die Fehler zum Teil sehr hilfreich kommentiert. Eine Ausnahme gibt es jedoch: Wenn eine geschweifte Klammer fehlt oder wenn eine geschweifte Klammer zu viel eingesetzt wurde. Hier erkennt der Compiler nicht, wo das Problem liegt und macht unsinnige Fehlermeldungen. Das ist

● 13

Processing

schade, denn gerade eine geschweifte Klammer, die sich an einer falschen Stelle befindet, ist sehr schwer zu identifizieren. Und geschweifte Klammern werden in Processing sehr häufig benötigt. Wenn ich mir etwas wünschen dürfte, wäre es ein Keyboard mit zwei großen Extratasten für geschweifte (und außerdem noch eckige) Klammern.

Syntax Die Syntax werden Sie anhand der zahlreichen Programmbeispiele noch zur Genüge kennenlernen. Sie ähnelt sehr stark derjenigen des klassischen C, so dass es C-Programmierer sehr leicht haben werden, sich an Processing zu gewöhnen. Gewöhnungsbedürftig sind einige spezifische Processing-Anweisungen, da sie in nicht intuitiver Weise munter zwischen Klein- und Großbuchstaben wechseln, ohne dass dabei eine bestimmt Systematik zu erkennen ist. Ich werde an den betreffenden Stellen noch einmal gesondert darauf hinweisen.

Konsole Am unteren Ende des Editorfensters (Bild1.1) befindet sich die sogenannte Konsole; eine Art Kontrollmonitor. Hier können während eines laufenden Programms wichtige, vom Programm generierte Daten ausgegeben werden, die zum Beispiel eine Auskunft über eventuelle Fehler im Code geben können.

Programmfenster Nach dem Start eines Programms (Pfeil im Kreis links oben im Editorfenster) erscheint das laufende Programm in einem eigenen, zusätzlichen Fenster auf dem Bildschirm. Das Editorfenster bleibt dabei (wenn der Bildschirm genug Platz bietet) ebenfalls sichtbar. Während eines laufenden Programms kann der Code im Editor weiter bearbeitet und gespeichert werden. Die Änderungen wirken sich natürlich erst nach einem Neustart des Programms aus. Zum Stopp des laufenden Programms klicken Sie auf das Quadrat neben dem Pfeil oben im Editor oder verwenden das Windows-Icon zum Schließen eines Programms (X), das sich rechts oben am Rand des betreffenden Fensters befindet. Das Programmfenster kann während der Laufzeit in seiner Größe standardmäßig nicht geändert werden. Die Fenstergröße wird am Anfang des Codes in der Funktion setup() eingegeben (mehr dazu später). Die Größe des Editorfensters kann jedoch per Maus beliebig und nach der bei Windows üblichen Methode per Maus nach allen Richtungen hin erweitert werden.

Menüpunkte im Editorfenster In der Menüleiste des Editors gibt es neben dem Datei-Menü zum Speichern und Laden eines Processing-Programms (pde-Datei) eine Reihe weiterer, interessanter Menüpunkte, von denen ich hier einige, die mir am wichtigsten erscheinen, kurz vorstellen möchte: Einstellungen Klickt man im Datei-Menü auf den Eintrag Einstellungen, so öffnet sich das in Bild 1.4 gezeigte Fenster. In diesem Fenster erscheint mir die Option Maximalen Speicher erhöhen auf … MB recht interessant. Wenn man nämlich zu viele Arrays mit einer großen Anzahl von Elementen deklariert, kann es sein, dass eine Fehlermeldung erscheint, die besagt, dass der für Processing reservierte Speicherplatz nicht ausreicht. Hier hilft oft der Eintrag einer Zahl, die wesentlich höher ist als diejenige, die standardmäßig dort steht.

● 14

Kapitel 1 • Vorbereitungen

Bild 1.4: Das unter Datei erreichbare Menü Einstellungen Das Beispiel zeigt den neuen Wert, den ich nach einer Fehlermeldung wegen zu geringem Speicherplatz auf 512 MB erhöht habe. Der maximale Eintrag hängt natürlich auch von der Hardware-Ausstattung Ihres PCs ab.

Editor-Schriftgröße Im Menü Einstellungen kann auch die Editor-Schriftgröße und –Schriftart den eigenen Anforderungen und Wünschen angepasst werden. Während meine Versuche, eine schöneren Font als den per Standard eingestellten Typ zu finden, nicht von Erfolg gekrönt waren, half mir jedoch die Änderung der Editor-Schriftgröße weiter: Für meine leider nicht mehr ganz jungen Augen war die Standardschriftgröße etwas zu klein, so dass eine Erhöhung auf 14 Punkt eine spürbare Verbesserung mit sich brachte.

● 15

Processing

Bild 1.5: Schrift erstellen Schrift erstellen Im Menü Tools erscheint mir der Eintrag Schrift erstellen besonders interessant. Er führt zu einem Menü, in welchem Sie eine der gängigen PC-Schriftarten zuzüglich ihrer Font-Größe auswählen können. Beim Klick auf OK wird ein Verzeichnis im aktuellen Arbeitsverzeichnis abgelegt, das die Daten der gewählten Schrift enthält. Mit ein paar Programmzeilen, auf die wir an geeigneter Stelle noch zu sprechen kommen, kann diese Schrift dann während der Laufzeit des Programms auf den Bildschirm gebracht werden. Ein sehr nützliches Tool, da die von Processing während der Laufzeit erzeugte Schrift nach meinem ästhetischen Empfinden nicht besonders ansprechend aussieht, da sie irgendwie verschmiert erscheint.

Referenz Im Hilfe-Menü finden Sie unter dem Eintrag Referenz eine Liste aller Anweisungen und Operatoren, die in einem Processing-Programm zur Anwendung kommen. Dazu ist jedoch eine Internetverbindung erforderlich. Die Gruppierung ist etwas gewöhnungsbedürftig, aber mit etwas Geduld findet man schließlich alles, was man sucht. Ein Klick auf den gesuchten Begriff führt zu weiteren Webseiten mit Erklärungen und Programmbeispielen, die jedoch nicht immer das zeigen, was man gerade wissen möchte und daher oft eine weitere Durchforstung des Internets erforderlich machen.

● 16

Kapitel 1 • Vorbereitungen

Bild 1.6: Ausschnitt aus der Processing-Referenzseite Programm als .exe exportieren Das Verwandeln eines Quellcodes in eine exe-Datei bietet viele Vorteile: Erstens: Der Anwender kann den Code nicht sehen und daher auch keine Tricks und Kniffe des Programmierers für seine eigenen Zwecke verwenden. Eine Exe-Datei kann zweitens durch Doppelklick aus dem Explorer oder vom Desktop aus gestartet werden, ohne dass man vorher umständlich einen Editor öffnen muss. Leider läuft eine Processong-Exe-Datei jedoch nicht schneller, als wenn der Quellcode von Editor aus gestartet wird. Dies ist jedoch nicht weiter schlimm, da die Geschwindigkeit eines vom Editor aus gestarteten Processing-Programms bereits, wie schon erwähnt, sehr hoch ist.

So wird’s gemacht Um einen Processing-Code in eine exe-Datei zu verwandelt, muss zunächst einmal eine wichtige Bedingung erfüllt sein: Auf Ihrem Computer muss das

Java Runtime Environment

installiert sein. Ist dies nicht der Fall, so informiert Sie Ihr Compiler spätestens beim Klicken auf den Exportieren-Button darüber. Das Runtime Environment können Sie über Ihren Webbrowser suchen lassen und dann auf die übliche Weise auf ihrem Computer installieren.

Das Ganze geschieht weitgehend automatisch, wenn Sie den Anweisungen auf dem Bildschirm folgen. Zum Zeitpunkt, als ich an diesem Manuskript geschrieben habe, handelte es sich um die Version 8. Diese Nummer kann sich im Laufe der Zeit ändern. Machen Sie nicht den Fehler, den ich gemacht habe: Beim Suchen bin ich auf eine Version mit höherer Nummer (10) gestoßen und dachte mir: 10 ist jedenfalls neuer als 8, also nehme ich die.

Das war jedoch ein Irrtum: Es hat nicht funktioniert.

Wenn Sie also die richtige Version installiert haben, starten Sie den Editor mit dem zu exportierenden Programm, öffnen dort das Datei-Menü und klicken auf Exportieren (Bilder 1.7 und 1.8). Daraufhin öffnet sich das Menü mit der Bezeichnung Export Optionen. Dort klicken Sie auf das von Ihnen verwendete Betriebssystem und dann auf Exportieren. Im

● 17

Processing

Verzeichnis, in welchem sich Ihre pde-Datei befindet, erscheinen nun (auf meinem Rechner mit der64-Bit-Windows 7-Version), zwei zusätzliche Verzeichnisse: Application.windows32 und Application.windows64. In beiden Verzeichnissen befindet sich eine exe-Datei mit dem gleichen Namen wie die Datei des Quellcodes, mit dem Unterschied, dass sie die Erweiterung exe statt pde besitzen. In dem betreffenden Verzeichnis befinden sich noch weitere Verzeichnisse mit Ressourcen.

Hinweis 1: Wenn Sie eine exe-Datei weiter geben, muss stets das komplette, übergeordnete Verzeichnis weitergegeben werden.

Hinweis 2: Vergessen Sie nicht, eventuelle Dateien, die vom Programm aus ohne absolute Pfadangabe während der Laufzeit geladen werden, mit in das Verzeichnis zu geben. Ich spreche aus Erfahrung: Ich glaubte am Anfang, dass das Verwandeln in exe-Dateien auf meinem Computer nicht funktioniere, weil nach dem Start der exe-Datei stets ein Absturz erfolgte. Irgendwann war mir dann klar, dass das nach dem Programmstart automatisch zu ladende Hintergrundbild nicht gefunden wurde, was dann zu einem Absturz führte. Es wurde nicht, wie ich annahm, in die exe-Datei eingebettet.

Bild 1.7 und 1.8: Erzeugen von Processing-exe-Dateien.

Bei längeren Listings ist die Suchfunktion sehr hilfreich. Wenn Sie im Menü Bearbeiten auf den Eintrag Suchen klicken, öffnet sich das in Bild 1.9 gezeigte Fenster Suchen. Geben Sie in der Zeile Suche den

● 18

Kapitel 1 • Vorbereitungen

Bild 1.9: Suchfunktion gesuchten Begriff ein und klicken Sie auf den Button Suchen. Der erste im Listing gefundene Begriff wird markiert dargestellt. Nach jedem erneuten Klick erscheint der als nächstes gefundene Suchbegriff. Bei der Funktion Suchen und Ersetzen sollte man vorsichtig sein: Hier werden alle Begriffe im kompletten Listing durch den Begriff ersetzt, der in Ersetzen durch eingetragen wurde. Mir ist es leider nicht gelungen, eine Lösung zu finden, bei der nur die Begriffe in einem per Maus markierten Abschnitt ersetzt werden. Auch die im Eintrag Suche in Auswahl gefundene Lösung hat nicht das Gewünschte gebracht: Statt die in der per Maus markierten Auswahl gesuchten Begriffe zu ersetzen, wurde der komplette markierte Bereich gelöscht und durch das in ersetzen durch eingetragene Wort ersetzt. Das ist natürlich wenig hilfreich. Ich vermute, dass es sich hier ganz einfach um einen Fehler im Editor handelt.

Manchmal ist es jedoch notwendig, dass in einem längeren Code-Abschnitt ein Begriff durch einen anderen ersetzt werden soll – zum Beispiel, wenn eine zweite, ähnliche Funktion (oder ein Teil einer Funktion) erzeugt werden soll, in welcher jedoch ein anderer Variablen- oder Array-Name vorkommt. Was tun, wenn die Funktion Suchen und Ersetzen aber nicht richtig funktioniert? Die Lösung: Man kann den gesamten betreffenden Code mit Copy & Paste kopieren und dann den alten Variablennamen wiederum per Copy & Paste an den betreffenden Stellen durch den neuen Namen ersetzen. Dies kann bei einem umfangreicheren Code manchmal sehr lange dauern. In solchen Fällen kann das Textprogramm Word sehr hilfreich sein: Kopieren Sie den betreffenden Code-Abschnitt in eine leere Word-Seite.

Stören Sie sich nicht daran, dass die Formatierung nun etwas unübersichtlich geworden ist. Makieren Sie den gesamten Text auf der Wordseite und ändern Sie den Code durch die Suche und Ersetzen Funktion von Word. Nun können Sie den geänderten Code per Copy & Paste wieder zurück in den Processing Editor kopieren. Die Formatierung besitzt nur wieder das ursprüngliche, übersichtliche Aussehen.

Bei solchen Copy-&-Paste-Aktionen sollte man jedoch sehr vorsichtig sein, dass man dabei nicht irgendwelche Codezeilen verdoppelt oder löscht. Der Editor reagiert in solchen Fällen sehr empfindlich und gibt Fehlermeldungen aus, die nicht wirklich weiter helfen.

● 19

Processing

Autoformatierung Im Menü bearbeiten gibt es noch ein weiteres Feature, das mir interessant erscheint: Autoformatierung. Beim Programmieren hat man nicht immer Zeit, die Zeilen jedesmal auch so einzurücken, dass alles besonders ästhetisch und übersichtlich aussieht. Ein richtig eingerückter Code erleichtert jedoch die Übersicht. Dies ist auch wichtig, wenn man seinen eigenen Code zu einem späteren Zeitpunkt erneut bearbeiten möchte. Dann ist es oft schwierig, sich in frühere Gedankengänge wieder einzuarbeiten. Mit Autoformatierung wird ein unordentlich geschriebener Code sozusagen verschönert und übersichtlicher gestaltet, so dass er wie aus dem Lehrbuch kopiert aussieht. Was mir jedoch nicht gefällt, ist die Tatsache, dass dabei die öffnenden geschweiften Klammern an das Ende einer Zeile gesetzt werden.

Auch wenn man dadurch eine Zeile gespart hat: Übersichtlich finde ich dies nicht – aber das ist wohl letztlich Geschmacksache. Unterm Strich auf jeden Fall ein nützliches Tool.

In diesem Buch habe ich übrigens meine eigene, mir am übersichtlichsten erscheinende Schreibweise eingeführt: Jede geschweifte Klammer bekommt (in den meisten Beispielen) ihre eigene Zeile. Dies kostet zwar ein wenig mehr Platz, aber es lohnt sich, da der Code dann wesentlich übersichtlicher wird.

In den verschiedenen Menüs haben Sie sicher schon gesehen, dass es noch viele andere Features gibt. Wollen wir es an dieser Stelle bei der Besprechung der mir persönlich am interessantesten erscheinenden Menüpunkte belassen. Bei einem Klick auf Optimieren (Sketch- Menü) ist mir sogar der Editor abgestürzt. Also Vorsicht beim weiteren Erkunden und Experimentieren!

● 20

Processing

Index A Arduino 169 ArduScope 291 Arrays 24 Autoformatierung 20 B Background 26 Buttons 64 C CMOS-Schalter 226 D Dreiecksignal 111 E Eingangsspannungen 185 Einstellungen 14 Exportieren 17 F Faltung 279 Farbarray 155 Farben 27 Fehlermeldungen 13 FFT-Analyse 277 G Game of Life 268 Gitternetz 148 Grid 148 GuiCreator 261 H Horizontalablenkung 169 I if-Bedingung 45 Initialisierung 22 J Java Runtime Environment

â—? 296

17

M Maus 48 Mini-Moog-Synthesizers 209 Muster 273 P Palettenarrays 150 Pfadangabe 13 Port-Abfrage 180 Primfaktoren 289 Primzahl 282 Processing 11 Prytes 287 R Rauschgenerator 192 Rauschsignale 115 Rechtecksignal 111 S Sägezahnsignal 111 Samplerate 182 Schieberegler 96 Schrift 16 Sequencer 243 Setup 24 Sierpinksi-Dreieck 274 Skalenstrich 103 Speichern 11 Syntax 14 T Text 36 V Variablendeklaration 21 Vektorgrafik 105 Verschiebungen 92 W Wachstumsfunktion 274 Z Zeitsignale 145 Zufallszahlen 116

Grafisch programmieren, messen und steuern mit

PROCESSING

Kurt Diedrich ist gelernter Geologe und gehört zu den langjährigen freien Mitarbeitern des ElektorVerlags. Neben dem nun schon seit über 25 Jahren erfolgreichen „Dauerbrenner“ Operationsverstärker gar nicht schwer stammen auch verschiedene Bücher zum Thema Programmierung aus seiner Feder.

Auf seiner Webseite www.subroutine. info veröffentlicht er in unregelmäßigen Abständen die neuesten Ergebnisse seiner Arbeit.

ISBN 978-3-89576-343-4

Ein Blick in die einschlägigen Internetforen zeigt, dass das Programmieren immer noch in der Gruppe der beliebten Hobbys rangiert. Wo dem Hobbyprogrammier früher eine Reihe bekannter und populärer Programmiersprachen zur Verfügung standen, ist es heute relativ übersichtlich geworden: Außer C++, Java und Visual Basic gibt es wenig bekannte und beliebte Programmiersprachen. Was fehlt, ist eine Programmiersprache, die für Laien fast so einfach zu handhaben ist wie die alten BASIC-Versionen, deren Leistung und Features dennoch an die Möglichkeiten und die Power moderner Windows-Rechner angepasst sind. Diese Programmiersprache existiert und heißt Processing. Das vorliegende Buch führt den Leser in diese visuelle Programmiersprache ein.

Das Buch richtet sich an Leser, die bereits allgemeine Erfahrungen im Umgang mit Programmiersprachen besitzen und wissen, worum es sich bei Strings, Arrays oder Schleifen handelt.

Der Autor zeigt anhand vieler kurzer Programmbeispiele, wie einfach es ist, mit Processing auch leistungsfähige Software zu programmieren und sich dabei auf eine nur geringe Anzahl von Befehlen, Anweisungen und Funktionen zu beschränken.

Die in diesem Buch vorgestellten Programme sind zum Teil Hardware-orientiert, wobei auch die Erfassung von Daten und die Steuerung von Hardware mittels des bekannten Mikrocontrollers Arduino einer Rolle spielt. Kurz und gut: Ein Buch für alle, die eine schnell und einfach zu programmierende Software mit elektronischer Hardware kombinieren, und das Ganze über maßgeschneiderte Benutzeroberflächen steuern möchten.

Elektor-Verlag GmbH 52072 Aachen www.elektor.de

LEARN DESIGN SHARE

● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEA IGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● D HARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN N ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEA SIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● DESIGN ● SHARE ● LEARN ● D