Processing- und p5.js-Beispiele zum Lehrbuch „Programmieren lernen mit Computergrafik“
Auf diesen Seiten werden alle Programme samt Lösungen der Aufgaben des Lehrbuchs "Programmieren lernen mit Computergrafik" (Springer-Vieweg-Verlag) bereitgestellt. Außerdem gibt es zu vielen Themen ergänzende Sketche. ("Sketche", so heißen Programme in Processing). Mit dabei ist immer eine mehr oder weniger umfangreiche Erläuterung des theoretischen Hintergrundes. Die Seite wurde komplett überarbeitet, sodass nun auch mit Smartphone (fast) alle im Browser laufenden Anwendungen getestet werden können. Man benötigt somit weder Maus noch Tastatur.
Inhaltsverzeichnis des Buches
Ebenfalls zu finden sind ergänzende Inhalte zu den Themen Schwärme, 3D-Animationen, Simulationen, dynamische Systeme, Bildbearbeitung, OOP, Transformationen, Kryptologie, Fraktale, Attraktoren, Steganografie und Design.
Manche Sketche laufen direkt im Browser (sofern dort Skripte nicht deaktiviert sind). Da man fast alle Anwendungen durch Klicken steuern kann, lassen sie sich auch problemlos mit dem Smartphone bedienen. Im Browser allerdings laufen sie etwas langsamer als beispielsweise unter Windows, Linux, macOS oder auf einem Raspberry Pi. Für jeden Sketch findet man einen Download-Link zum Programmcode in Processing.
Processing und p5.js
Processing ist im Wesentlichen eine vereinfachte Version der Programmiersprache Java. Immer dann, wenn auf möglichst eingängige Weise Bilder oder Animationen erstellt werden sollen, ist Processing eine gute Wahl. Das soll nicht heißen, dass man auf die Erzeugung von Bildern und Animationen beschränkt ist. Wie Java ist auch Processing als imperative, plattformunabhängige, objektorientierte Sprache für alle nur denkbaren Anwendungen geeignet. Alle weiteren Informationen hierzu finden Sie sehr ausführlich bei Wikipedia.
p5.js hingegen ist eine Bibliothek für JavaScript. p5.js gehört, wie Processing, zur "Processing Foundation". Die Sketche, die in Browsern laufen, sind in p5.js programmiert. Ursprünglich waren Animationen für Browser in Flash erzeugt worden. Wegen der häufigen Sicherheitsprobleme wurde diese Programmiersprache im Laufe der letzten Jahre durch JavaScript ersetzt. Heißt das nun, dass man Processing und p5.js lernen muss, um derartige Animationen schreiben zu können? Natürlich nicht! Geht es ausschließlich darum, Animationen für den Browser zu erstellen, so kann man sich darauf beschränken, nur die einfachere Sprache p5.js zu lernen. Aber selbst dann, wenn die Entscheidung, wegen der viel breiteren Anwendungsmöglichkeiten, für Processing fällt, heißt das nicht, dass man auf die Animationen im Browser verzichten muss. Die beiden Sprachen sind sehr ähnlich. Wie man recht leicht von einem Animations-Processing-Sketch zum p5.js-Skript kommt, wird hier behandelt.
Ganz oben auf dieser Seite sollten Sie eine sich bewegende bunte Schlange sehen. Wenn dies nicht der Fall ist, können Sie Abhilfe schaffen, indem Sie dem Browser für diese Seite erlauben, Skripte auszuführen. Meist sorgt ein Browser-Add-on, wie NoScript, für die Sperre, und es genügt, dem Add-on mitzuteilen, dass auf dieser Seite Skripte erlaubt sein sollen.
Sketch schlange