Tools & Technik

Creative Coding mit p5.js: So schafft ihr den Einstieg!

20.05.2023 von Anne Kaiser | Lesezeit: ca. 7 Minuten

Code eröffnet in den Händen von Designer:innen ganz neue Möglichkeiten. Wir begleiten den ukrainischen Freelance Art Director und Creative-Coding-Autodidakten Anatolii Babii bei seinem Einstieg in die Coding-Szene – und beim Programmieren seines ersten Kreativ-Tools

Ein mit dem RITM Wellengenerator generiertes Wellenbild in Blau- und Grüntönen mit ein wenig lila. Im Vordergrund Schaltflächen der Anwendung — **Mit Code gestalten**
Anatolii Babii programmierte den RITM-Wellengenerator als Tool für Kreative und Laien, die auch ohne Code generatives Design produzieren wollen. Am besten läuft die Anwendung auf dem Desktop – Babii arbeitet aber schon an einer schlankeren Mobile-Variante.

Anatolii Babiis Liebe zum Design begann schon in den frühen 1990ern, als er seinen ersten eigenen Computer bekam – eine selbst gebaute Konstruktion aus klobiger Tastatur, flimmerndem Röhrenbildschirm und einem Kassettenlaufwerk. Die Ästhetik der Games aus dieser Zeit fasziniert ihn bis heute, genauso wie die Möglichkeit, »aus dem Nichts« mittels Grafikdesign und Code ganze interaktive Welten zu erschaffen. Seit Beginn des russischen Angriffskriegs auf die Ukraine lebt Babii in der bulgarischen Stadt Warna. Er arbeitet dort als Freelance-Grafikdesigner, unterstützt Agenturen und Unternehmen – und bringt sich selbst Creative Coding bei.

Babiis Karriere begann als Stock-Illustrator – Creative Coding entdeckte er erst 2020 in einem Designkollektiv aus codeinteressierten Freelancer:innen, das den Pattern-Generator Normform mit Unterstützung eines professionellen Developers entwickelte. Leider löste sich die Gruppe auf und hinterließ lediglich eine Reihe an wundervollen grafischen Artworks. In seinem nächsten Projekt ging Anatolii Babii einen Schritt weiter und entwarf den RITM Generator – ein Grafiktool, mit dem man Wave-Animationen erzeugen und exportieren kann. Das Interface Design und die Programmierung des RITM Generators und dessen Bedienflächen übernahm Babii selbst.

Dabei lernte er nicht nur mittels der JavaScript-basierten Open-Source-Library p5.js (mehr dazu unter »Coding-Ressourcen für den Einstieg«, siehe Seite 82) die Grundlagen des Creative Coding, sondern erkundete auch die stark vernetzte Coding-Community. Heute empfiehlt Babii Designerinnen und Designern, den Sprung in den Code zu wagen, und macht Anfänger:innen Mut. »Beim Programmieren kann einen die Informationsmenge schnell einschüchtern. Dabei ist alles, was man braucht, Interesse, ein wenig Geduld und Zeit zum Üben. Dann kann Code Kreativen ganz neue Welten eröffnen – auch ohne Vorkenntnisse.«

PROJEKT RITM Generator
DESIGNER Anatolii Babii, Kiew, Ukraine, und Warna, Bulgarien
TOOLS OpenProcessing-Webeditor, JavaScript, HTML, CSS, p5.js, Simplex-Noise-Algorithmus
ZEITRAUM August bis Dezember 2022

Warum eigene Tools programmieren?

Für Anatolii Babii lagen die Vorteile grundlegender Coding-Kenntnisse auf der Hand: Von besonderen Effekten im Webdesign bis hin zu generierten Animationen und Grafiken gibt Code Kreativen neue Ausdrucksformen an die Hand oder erleichtert Prozesse – wie beispielsweise das automatisierte Animieren mit selbst programmierten After-Effects-Expressions. Babii interessierte am Programmieren aber vor allem die Möglichkeit, eigene Gestaltungstools zu schaffen, die über die Grenzen der bestehenden Programme hinausgehen und auf spezifische Tasks zugeschnitten sind.

Der von Babii entwickelte RITM Generator lässt sich durch ein eigenes Interface, eingebettet in seine Website, auch von anderen Kreativen nutzen. Er ist öffentlich zugänglich und erstellt Grafiken und Animationen, die man als WebM-, GIF-, PNG- oder JPEG- Dateien herunterladen kann. Als Grundlage für das Tool wählte Babii einen Simplex-Noise-Algorithmus. Dieser generiert innerhalb eines vordefinierten Felds zufällig animierte Partikel, die Babii durch zusätzliche Funktionen wie übereinanderliegende Wellen aussehen lässt.

Verschiedene Wellenformen, die mit unterschiedlichen Einstellungen im RITM Generator entstanden sind: Große oder flache Amplitude, mehr oder wenig eckige Wellen, etc. Das Bild ist in Rosa und Bordeauxtönen mit etwas Orange — Was wäre, wenn wir generative Kunst nach unseren Vorstellungen anpassen könnten, um sie anschließend als Assets weiterzuverwenden? Hier sieht man, welche Wirkung bereits die Einstellung der Wellenqualität auf die Designs in Anatolii Babiis RITM Generator hat

Die Idee ist inspiriert von einem Artwork des Processing-Künstlers Takawo, das animierte Wellengrafiken in immer neuen Farbverläufen erzeugt, die aber nicht wie bei Babiis RITM Generator selbst manipuliert und heruntergeladen werden können. Der zugehörige Code für Takawos generatives Kunstwerk ist – wie übrigens ein Großteil der auf OpenProcessing geteilten Artworks – öffentlich zugänglich und kann frei für weitere Projekte verwendet werden. Anatolii Babii übernahm diesen Code für seinen RITM Generator, fügte allerdings weitere Stellschrauben für Nutzer:innen hinzu. Sein Tool sollte nicht nur Artworks generieren, sondern es Kreativen erlauben, auch visuelle Eigenschaften wie Strichstärken, Farbpaletten, Geschwindigkeit und Füllung der Wellenformen einzustellen, um so ihr Ergebnis auf unterschiedliche Projekte zuschneiden – und direkt weiterverwenden – zu können.

Wellen in Gelb-, Grün- und Blautönen mit gepunkteten Linien, die die Wellen noch räumlicher erscheinen lassen. Stoffähnliche Wellen in Gelb- und Blautönen mit Strichmuster, das die Räumlichkeit unterstreicht

Wellenberge nur aus Linien, die sich überlagern. So wirkt das Wellengebirge durchsichtig. — Ob Linien, Verläufe, Punkte oder eine wilde Mischung – die individualisierten Animationen lassen sich als WebM-, GIF-, PNG- oder JPEG-Dateien herunterladen und anschließend in eigenen Projekten weiterverwenden

Warm werden mit HTML, CSS und JavaScript

Beim Einstieg ins Creative Coding begegnen Designer:innen einige Hürden: Welche Programmiersprache ist die richtige? Welche Tutorials und Kurse aus der Flut an Angeboten passen für mein Projekt? Welchen Code-Editor sollte ich benutzen? Anatolii Babii empfiehlt, sich zunächst in der Coding-Community zu orientieren, die meist sehr großzügig mit eigenen Codes umgeht und im regen Austausch untereinander Probleme zu lösen versucht. GitHub und OpenProcessing liefern Inspiration, Hilfsforen und passende Open-Source-Code-Snippets.

Babii schwört außerdem auf die Tutorial-Reihe »The Coding Train« von Programmierer Daniel Shiffman, der einfach und humorvoll in kurzen Abschnitten Grundelemente des Programmierens mit der p5.js-Library erklärt. Eine Kombination aus HTML, CSS und JavaScript ist gängig in generativen Gestaltungsprojekten – zudem schadet es nicht, ihre Grundlagen für die Kommunikation mit Webdeveloper:innen zu kennen.

Als letzte Vorbereitung rät der Designer, einen Zeitplan aufzustellen und jeden Tag – je nach Kapazität – ein bis zwei Stunden fürs Lernen einzuplanen. Dazu gehört, dass man sich Tutorials anschaut, Beispiele nachprogrammiert und verändert, um die Funktionen des Codes zu verstehen, nach Inspiration surft und Code von anderen Designer:innen und Vorbildern bewundert. Wer gleich einsteigen möchte, kann sich so wie Anatolii Babii ein Projektziel setzen und loslegen. »Coden lernt man, indem man es tut. Die ersten Versuche dauern lang und sind nicht sehr komplex. Dafür fühlt sich jede selbst geschriebene Zeile, die funktioniert, wie ein Erfolg an.«

Coding-Ressourcen für den Einstieg

Anatolii Babii lernte das Coden mithilfe der Community und in Open-Source-Tutorials wie »The Coding Train« von Daniel Shiffman, der die Grundlagen des Creative Coding mit p5.js erklärt. Die p5.js-Library ist der Community-Hub der Processing Foundation und enthält eine ganze Reihe an JavaScript-basierten Code-Bibliotheken zum Download, Beispiele zum Experimentieren und einen eigenen Webeditor, mit dem man direkt loslegen kann. Wir haben die wichtigsten Ressourcen für den Einstieg in die Coding-Community hier für euch zusammengefasst.

Von der generativen Kunst zum Tool

So setzte Anatolii Babii seine frisch gewonnenen Coding-Kenntnisse in einem JavaScript-basierten Designgenerator um

Screenshot von der Benutzer:innenoberfläche des RITM-Generators. — Das erste Code-Projekt kann schnell einschüchternd wirken. Anatolii Babii empfiehlt, sich von eigenen Ideen leiten zu lassen und das Konzept im Lauf des Projekts Schritt für Schritt zu erweitern. So kamen die Einstellungsmöglichkeiten für den Interface-Hintergrund im RITM Generator erst später dazu

Für seinen RITM Generator legte Anatolii Babii zunächst ein Development Journal an, in dem er das konkrete Ziel – also die generative Erstellung von Wave-Animationen und -Stills mittels Interface – festhielt. Außerdem definierte er, wie die Anwendungssituation aussehen würde. Wer sind die User:innen? Soll das Tool online zugänglich sein? Wofür verwenden es Nutzer:innen? Welche Schritte durchlaufen sie in der User Experience?

Sobald dieses Grundgerüst stand, begann Babii, einzelne Funktionen für Interaktion und Rendering zu definieren. Neben dem Generator brauchte das Tool auch ein Interface mit unterschiedlichen Einstellungsmöglichkeiten. Diese Aufgaben ließen sich wiederum in kleinere Prozessketten unterteilen und spezifischer beschreiben. Beispiel: »Ich möchte, dass man die Geschwindigkeit der Wellenbewegung anpassen kann. Das Interface benötigt einen stufenlosen Slider mit einer Geschwindigkeitsanzeige.« Auf diese Weise erstellte der Designer Schritt für Schritt eine To-do-Liste für die Programmierung und eine erste Skizze für das Interface.

Ideen in Code fassen

Nach der Konzeption begann Anatolii Babii, die passenden JavaScript-Funktionen für die gewünschten Aktionen zu recherchieren. Er ergänzte zunächst den Code von Takawos Kunstwerk um ein separates JavaScript-Sheet, in dem er eigene Farbpaletten definierte und Kontrollelemente für die zufällige Generierung hinzufügte. Außerdem enthält dieser Code-Abschnitt auch eine Funktion, mit der Nutzer:innen später eigene Farben auswählen können sollten.

Anschließend definierte Babii Füllung, Strichstärke und Beschaffenheit sowie die Hintergründe der Wellengrafiken in separaten JavaScript-Sheets und fügte Kontrollelemente hinzu, die er mit dem HTML- und CSS-basierten Interface verknüpfte. Für dessen Programmierung orientierte er sich an einem Tutorial aus der Online-Coding-Bibliothek SuperLibrary. »Das rudimentäre Interface gewinnt vielleicht keine Designpreise, doch es erlaubt, den RITM Generator von reiner generativer Kunst zu einem echten Tool werden zu lassen«, erklärt Anatolii Babii.

RITM Generator: Make it public

Nach mehreren Schleifen Bug-Hunting und Optimierung veröffentlichte Anatolii Babii das Tool schließlich auf seiner Website. Der RITM Generator ist als interaktives Programm direkt in den Code seiner Seite eingebettet und für Anwender:innen frei zugänglich. Die Funktionsweise erklärt er in einem ausführlichen Blogbeitrag auf Medium. Babii folgte so dem Open-Source-Gedanken der Coding-Community und stellte zudem über Links und Danksagungen seine Ressourcen zur Verfügung. Den vollständigen Code veröffentlichte er auf OpenProcessing.org.

Obwohl Anatolii Babii bei seinem ersten Projekt noch einiges Potenzial zu Erweiterungen und Verbesserungen sieht, arbeitet er bereits an einem nächsten Designtool – dem Plain Generator, mit dem es möglich sein soll, Grafiken und Animationen in 3D zu generieren. Außerdem erhielt er Aufträge für Creative-Coding-Projekte und sogar ein Jobangebot für eine Position als Creative Coding Director einer Firma in Dubai. Babii zieht die Arbeit als Freelancer allerdings einer Anstellung vor – sie erlaubt ihm, seine Zeit frei einzuteilen und sich dem Coding zu widmen. »Ich habe im Creative Coding eine neue Inspirationsquelle gefunden und fange gerade erst an. Es gibt noch viel zu lernen!«

Tutorial: Wellengenerator programmieren

Anatolii Babii erklärt Step by Step, wie man einen eigenen Simplex-Noise-Wellengenerator programmiert

Screenshot der Startseite des Tutorials von Anatolii Babii

Für euren leichteren Einstieg ins Creative Coding habe ich ein detailliertes Tutorial auf OpenProcessing verfasst, mit dem wir gemeinsam Schritt für Schritt euren eigenen Wellengenerator programmieren. Darin gebe ich eine Anleitung, erkläre Codezeilen und zeige euch, was ihr mit den einzelnen Funktionen anstellen könnt. Wir starten mit den Grundlagen im OpenProcessing-Editor und arbeiten uns über eine generierte Welle mit Simplex Noise, Animation und individuellen Farbpaletten zu eurem ganz eigenen generativen Kunstwerk vor.

Sobald ihr euch durch die ersten Zeilen Code gekämpft habt, könnt ihr anfangen, einzelne Einstellungen zu verändern, und experimentieren. Dabei sind wirklich keine Grenzen gesetzt: Ob ihr neue Farben einsetzt oder mit Outlines spielt, die Animation beschleunigt oder im Sekundentakt neue Verläufe generiert – habt Spaß und bereichert die Coding-Community mit euren Ideen!

Los geht’s! Anatolii Babii hat eigens für PAGE-Leser:innen ein Tutorial erstellt, mit dem ihr direkt in ein interaktives Code-Beispiel einsteigen könnt. Besonders wichtig: experimentieren, Zahlenwerte verändern und Spaß haben.

Portraitfoto von Anatolii Babii hinter einem Keyboard Anatolii Babii ist Freelance Art Director und Creative-Coding-Autodidakt aus Kiew. Seit Beginn des Krieges in der Ukraine lebt er mit seiner Frau in Warna, Bulgarien und unterstützt von dort Agenturen oder arbeitet an neuen Creative-Coding-Projekten

Dieser Artikel ist in PAGE 03.2022 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 03.2023

Produkt-Details anzeigen

Mental Health ++ Branding: Hotels & Lodges ++ Creative Coding mit p5.js ++ ENGLISH SPECIAL Khyati Trehan ++ Edi-torial Design: Kundenmagazine ++ Top 50: PAGE Ranking 2023 ++ Praxis: Weiterbildung & Coaching

9,90 €

AGB