(2024)
(2024)
Coding:
Coding:
Animated Type
Animated Type
Über Das Projekt
Im Fach "Creative Coding" habe ich mehrere Projekte realisiert, in denen ich Coding mit Design verbunden habe. Eines dieser Projekte ist ein interaktives Programm, welches durch den experimentellen Umgang mit Typografie und Animation spannende typografische Kompositionen erstellen lässt.
Art des Projekts
Studienprojekt
Beteiligte
Ich (Einzelprojekt)
Bereiche
Creative Coding
Grafikdesign
Zeitraum
6 Wochen
IDEE
Kreativ werden mit Typografie
In diesem Projekt wollte ich mein Interesse für Typografie und meine Affinität zu bolden Designs und Farben mit Creative Coding verbinden.
Der Artikel Programming Posters und ein Tutorial zu kinetischer Typografie von Tim Rodenbröker (https://timrodenbroeker.de/programming-posters/) haben mich dazu inspiriert, eine Anwendung zu entwickeln, mit der sich Typografie durch Programmierung in eine lebendige, interaktive Erfahrung verwandeln lässt.
Ich habe mit verschiedenen Farbkombinationen, Worten und Bewegungsmustern herumgespielt, wodurch eine interessante Auswahl an typografischen Postern und Animationen entstanden ist.
Kreativ werden mit Typografie
In diesem Projekt wollte ich mein Interesse für Typografie und meine Affinität zu bolden Designs und Farben mit Creative Coding verbinden.
Der Artikel Programming Posters und ein Tutorial zu kinetischer Typografie von Tim Rodenbröker (https://timrodenbroeker.de/programming-posters/) haben mich dazu inspiriert, eine Anwendung zu entwickeln, mit der sich Typografie durch Programmierung in eine lebendige, interaktive Erfahrung verwandeln lässt.
Ich habe mit verschiedenen Farbkombinationen, Worten und Bewegungsmustern herumgespielt, wodurch eine interessante Auswahl an typografischen Postern und Animationen entstanden ist.
Kreativ werden mit Typografie
In diesem Projekt wollte ich mein Interesse für Typografie und meine Affinität zu bolden Designs und Farben mit Creative Coding verbinden.
Der Artikel Programming Posters und ein Tutorial zu kinetischer Typografie von Tim Rodenbröker (https://timrodenbroeker.de/programming-posters/) haben mich dazu inspiriert, eine Anwendung zu entwickeln, mit der sich Typografie durch Programmierung in eine lebendige, interaktive Erfahrung verwandeln lässt.
Ich habe mit verschiedenen Farbkombinationen, Worten und Bewegungsmustern herumgespielt, wodurch eine interessante Auswahl an typografischen Postern und Animationen entstanden ist.
Kreativ werden mit Typografie
In diesem Projekt wollte ich mein Interesse für Typografie und meine Affinität zu bolden Designs und Farben mit Creative Coding verbinden.
Der Artikel Programming Posters und ein Tutorial zu kinetischer Typografie von Tim Rodenbröker (https://timrodenbroeker.de/programming-posters/) haben mich dazu inspiriert, eine Anwendung zu entwickeln, mit der sich Typografie durch Programmierung in eine lebendige, interaktive Erfahrung verwandeln lässt.
Ich habe mit verschiedenen Farbkombinationen, Worten und Bewegungsmustern herumgespielt, wodurch eine interessante Auswahl an typografischen Postern und Animationen entstanden ist.
Umsetzung
Die Technologie dahinter
Für die Umsetzung habe ich mit Processing gearbeitet – einer Open-Source-Programmiersprache und -Entwicklungsumgebung, die speziell für visuelle Gestaltung entwickelt wurde. Sie macht Programmierung leicht zugänglich und wird vor allem in Kunst, Design und Creative Coding für die Erstellung von Grafiken, Animationen und interaktiven Projekten genutzt.
Für die Interaktivität habe ich die Library controlP5 eingesetzt. Sie bietet eine einfache Möglichkeit, Bedienelemente wie Slider, Buttons oder Eingabefelder zu integrieren. Zusätzlich habe ich Tastaturbefehle für das Speichern von einzelnen Frames und Bildschirmaufzeichnungen implementiert.
Die Technologie dahinter
Für die Umsetzung habe ich mit Processing gearbeitet – einer Open-Source-Programmiersprache und -Entwicklungsumgebung, die speziell für visuelle Gestaltung entwickelt wurde. Sie macht Programmierung leicht zugänglich und wird vor allem in Kunst, Design und Creative Coding für die Erstellung von Grafiken, Animationen und interaktiven Projekten genutzt.
Für die Interaktivität habe ich die Library controlP5 eingesetzt. Sie bietet eine einfache Möglichkeit, Bedienelemente wie Slider, Buttons oder Eingabefelder zu integrieren. Zusätzlich habe ich Tastaturbefehle für das Speichern von einzelnen Frames und Bildschirmaufzeichnungen implementiert.
Die Technologie dahinter
Für die Umsetzung habe ich mit Processing gearbeitet – einer Open-Source-Programmiersprache und -Entwicklungsumgebung, die speziell für visuelle Gestaltung entwickelt wurde. Sie macht Programmierung leicht zugänglich und wird vor allem in Kunst, Design und Creative Coding für die Erstellung von Grafiken, Animationen und interaktiven Projekten genutzt.
Für die Interaktivität habe ich die Library controlP5 eingesetzt. Sie bietet eine einfache Möglichkeit, Bedienelemente wie Slider, Buttons oder Eingabefelder zu integrieren. Zusätzlich habe ich Tastaturbefehle für das Speichern von einzelnen Frames und Bildschirmaufzeichnungen implementiert.
Die Technologie dahinter
Für die Umsetzung habe ich mit Processing gearbeitet – einer Open-Source-Programmiersprache und -Entwicklungsumgebung, die speziell für visuelle Gestaltung entwickelt wurde. Sie macht Programmierung leicht zugänglich und wird vor allem in Kunst, Design und Creative Coding für die Erstellung von Grafiken, Animationen und interaktiven Projekten genutzt.
Für die Interaktivität habe ich die Library controlP5 eingesetzt. Sie bietet eine einfache Möglichkeit, Bedienelemente wie Slider, Buttons oder Eingabefelder zu integrieren. Zusätzlich habe ich Tastaturbefehle für das Speichern von einzelnen Frames und Bildschirmaufzeichnungen implementiert.
Interaktive Steuerung von Text, Farbe und Bewegung
Um den Anwender*innen mehr kreativen Freiraum zu geben, habe ich zahlreiche Parameter über ein User Interface steuerbar gemacht. Wenn ein Parameter verändert wird, spiegelt sich das sofort auf dem Canvas wider.
Als Nutzer*in hat man folgende Gestaltungsmöglichkeiten:
eigenen Text eingeben, Textgröße bestimmen
Text- und Hintergrundfarbe verändern (per Auswahl im Farbrad oder Eingabe eines HEX-Codes)
Größe des Canvas festlegen
Anzahl der Textreihen (Wiederholung des Textes durch y-Verschiebung), deren Abstand und horizontalen Versatz steuern
Geschwindigkeit der Animation und Stärke des horizontalen Bewegungsausschlags kontrollieren
Zudem lässt sich die Anzahl der Tiles bestimmen, in die der Text horizontal und vertikal geteilt wird, wodurch ein mehr oder weniger stark fragmentiertes Bild entsteht.
Durch Veränderung dieser Parameter können sehr vielfältige und unerwartete Ergebnisse entstehen: von einfachen, klar lesbaren Textanimationen bis zu stark abstrahierten Strukturen.
Interaktive Steuerung von Text, Farbe und Bewegung
Um den Anwender*innen mehr kreativen Freiraum zu geben, habe ich zahlreiche Parameter über ein User Interface steuerbar gemacht. Wenn ein Parameter verändert wird, spiegelt sich das sofort auf dem Canvas wider.
Als Nutzer*in hat man folgende Gestaltungsmöglichkeiten:
eigenen Text eingeben, Textgröße bestimmen
Text- und Hintergrundfarbe verändern (per Auswahl im Farbrad oder Eingabe eines HEX-Codes)
Größe des Canvas festlegen
Anzahl der Textreihen (Wiederholung des Textes durch y-Verschiebung), deren Abstand und horizontalen Versatz steuern
Geschwindigkeit der Animation und Stärke des horizontalen Bewegungsausschlags kontrollieren
Zudem lässt sich die Anzahl der Tiles bestimmen, in die der Text horizontal und vertikal geteilt wird, wodurch ein mehr oder weniger stark fragmentiertes Bild entsteht.
Durch Veränderung dieser Parameter können sehr vielfältige und unerwartete Ergebnisse entstehen: von einfachen, klar lesbaren Textanimationen bis zu stark abstrahierten Strukturen.
Interaktive Steuerung von Text, Farbe und Bewegung
Um den Anwender*innen mehr kreativen Freiraum zu geben, habe ich zahlreiche Parameter über ein User Interface steuerbar gemacht. Wenn ein Parameter verändert wird, spiegelt sich das sofort auf dem Canvas wider.
Als Nutzer*in hat man folgende Gestaltungsmöglichkeiten:
eigenen Text eingeben, Textgröße bestimmen
Text- und Hintergrundfarbe verändern (per Auswahl im Farbrad oder Eingabe eines HEX-Codes)
Größe des Canvas festlegen
Anzahl der Textreihen (Wiederholung des Textes durch y-Verschiebung), deren Abstand und horizontalen Versatz steuern
Geschwindigkeit der Animation und Stärke des horizontalen Bewegungsausschlags kontrollieren
Zudem lässt sich die Anzahl der Tiles bestimmen, in die der Text horizontal und vertikal geteilt wird, wodurch ein mehr oder weniger stark fragmentiertes Bild entsteht.
Durch Veränderung dieser Parameter können sehr vielfältige und unerwartete Ergebnisse entstehen: von einfachen, klar lesbaren Textanimationen bis zu stark abstrahierten Strukturen.
Interaktive Steuerung von Text, Farbe und Bewegung
Um den Anwender*innen mehr kreativen Freiraum zu geben, habe ich zahlreiche Parameter über ein User Interface steuerbar gemacht. Wenn ein Parameter verändert wird, spiegelt sich das sofort auf dem Canvas wider.
Als Nutzer*in hat man folgende Gestaltungsmöglichkeiten:
eigenen Text eingeben, Textgröße bestimmen
Text- und Hintergrundfarbe verändern (per Auswahl im Farbrad oder Eingabe eines HEX-Codes)
Größe des Canvas festlegen
Anzahl der Textreihen (Wiederholung des Textes durch y-Verschiebung), deren Abstand und horizontalen Versatz steuern
Geschwindigkeit der Animation und Stärke des horizontalen Bewegungsausschlags kontrollieren
Zudem lässt sich die Anzahl der Tiles bestimmen, in die der Text horizontal und vertikal geteilt wird, wodurch ein mehr oder weniger stark fragmentiertes Bild entsteht.
Durch Veränderung dieser Parameter können sehr vielfältige und unerwartete Ergebnisse entstehen: von einfachen, klar lesbaren Textanimationen bis zu stark abstrahierten Strukturen.
Erklärung des Code-Prinzips
Die Funktionsweise des Programms lässt sich in fünf zentrale Schritte unterteilen:
Text wird in ein PGraphics-Objekt gezeichnet
Statt den Text direkt auf den Haupt-Canvas zu setzen, wird er zunächst in ein eigenes PGraphics-Objekt geschrieben. Diese Art "Off-Screen-Zeichenfläche" ermöglicht es, den Text mehrfach im Hauptfenster zu platzieren, zu verschieben oder zu skalieren, ohne ihn jedes Mal neu berechnen zu müssen.Positionierung anhand von Parametern
Der Text wird entsprechend der Nutzereingaben auf dem PGraphics positioniert. So entstehen verschiedene Layouts, vom einfachen Schriftzug bis hin zu wiederholten, versetzten Textmustern.Aufteilen in Tiles
Der Inhalt des PGraphics wird in Kacheln (Tiles) zerlegt. Die Anzahl der Tiles in x- und y-Richtung kann getrennt gesteuert werden.Animation durch Sinus-Funktion
Jede Kachel wird mit einer Sinus-Funktion animiert. Dadurch verschieben sich die enthaltenen Textfragmente rhythmisch nach links und rechts.Zusammensetzen auf dem Canvas
Alle Kacheln werden schließlich auf der Hauptleinwand platziert. Diese ist ebenso in ein Raster aufgeteilt. Durch die Überlagerung und Verschiebung der Kacheln entsteht die finale Animation im Split-Look.
Erklärung des Code-Prinzips
Die Funktionsweise des Programms lässt sich in fünf zentrale Schritte unterteilen:
Text wird in ein PGraphics-Objekt gezeichnet
Statt den Text direkt auf den Haupt-Canvas zu setzen, wird er zunächst in ein eigenes PGraphics-Objekt geschrieben. Diese Art "Off-Screen-Zeichenfläche" ermöglicht es, den Text mehrfach im Hauptfenster zu platzieren, zu verschieben oder zu skalieren, ohne ihn jedes Mal neu berechnen zu müssen.Positionierung anhand von Parametern
Der Text wird entsprechend der Nutzereingaben auf dem PGraphics positioniert. So entstehen verschiedene Layouts, vom einfachen Schriftzug bis hin zu wiederholten, versetzten Textmustern.Aufteilen in Tiles
Der Inhalt des PGraphics wird in Kacheln (Tiles) zerlegt. Die Anzahl der Tiles in x- und y-Richtung kann getrennt gesteuert werden.Animation durch Sinus-Funktion
Jede Kachel wird mit einer Sinus-Funktion animiert. Dadurch verschieben sich die enthaltenen Textfragmente rhythmisch nach links und rechts.Zusammensetzen auf dem Canvas
Alle Kacheln werden schließlich auf der Hauptleinwand platziert. Diese ist ebenso in ein Raster aufgeteilt. Durch die Überlagerung und Verschiebung der Kacheln entsteht die finale Animation im Split-Look.
Erklärung des Code-Prinzips
Die Funktionsweise des Programms lässt sich in fünf zentrale Schritte unterteilen:
Text wird in ein PGraphics-Objekt gezeichnet
Statt den Text direkt auf den Haupt-Canvas zu setzen, wird er zunächst in ein eigenes PGraphics-Objekt geschrieben. Diese Art "Off-Screen-Zeichenfläche" ermöglicht es, den Text mehrfach im Hauptfenster zu platzieren, zu verschieben oder zu skalieren, ohne ihn jedes Mal neu berechnen zu müssen.Positionierung anhand von Parametern
Der Text wird entsprechend der Nutzereingaben auf dem PGraphics positioniert. So entstehen verschiedene Layouts, vom einfachen Schriftzug bis hin zu wiederholten, versetzten Textmustern.Aufteilen in Tiles
Der Inhalt des PGraphics wird in Kacheln (Tiles) zerlegt. Die Anzahl der Tiles in x- und y-Richtung kann getrennt gesteuert werden.Animation durch Sinus-Funktion
Jede Kachel wird mit einer Sinus-Funktion animiert. Dadurch verschieben sich die enthaltenen Textfragmente rhythmisch nach links und rechts.Zusammensetzen auf dem Canvas
Alle Kacheln werden schließlich auf der Hauptleinwand platziert. Diese ist ebenso in ein Raster aufgeteilt. Durch die Überlagerung und Verschiebung der Kacheln entsteht die finale Animation im Split-Look.
Erklärung des Code-Prinzips
Die Funktionsweise des Programms lässt sich in fünf zentrale Schritte unterteilen:
Text wird in ein PGraphics-Objekt gezeichnet
Statt den Text direkt auf den Haupt-Canvas zu setzen, wird er zunächst in ein eigenes PGraphics-Objekt geschrieben. Diese Art "Off-Screen-Zeichenfläche" ermöglicht es, den Text mehrfach im Hauptfenster zu platzieren, zu verschieben oder zu skalieren, ohne ihn jedes Mal neu berechnen zu müssen.Positionierung anhand von Parametern
Der Text wird entsprechend der Nutzereingaben auf dem PGraphics positioniert. So entstehen verschiedene Layouts, vom einfachen Schriftzug bis hin zu wiederholten, versetzten Textmustern.Aufteilen in Tiles
Der Inhalt des PGraphics wird in Kacheln (Tiles) zerlegt. Die Anzahl der Tiles in x- und y-Richtung kann getrennt gesteuert werden.Animation durch Sinus-Funktion
Jede Kachel wird mit einer Sinus-Funktion animiert. Dadurch verschieben sich die enthaltenen Textfragmente rhythmisch nach links und rechts.Zusammensetzen auf dem Canvas
Alle Kacheln werden schließlich auf der Hauptleinwand platziert. Diese ist ebenso in ein Raster aufgeteilt. Durch die Überlagerung und Verschiebung der Kacheln entsteht die finale Animation im Split-Look.
Mögliche Einsatzfelder
Abgesehen vom experimentellen und spielerischen Charakter des Programms eröffnen die erzeugten Grafiken und Animationen vielfältige Anwendungsmöglichkeiten. Sie könnten beispielsweise als Teil eines visuellen Brandings, für Plakate, Postkartendesigns oder als Gestaltungselemente im Web eingesetzt werden.
Auch im Ausstellungskontext wäre das Programm spannend: Als interaktive Station in einem Museum oder bei Design- und Typografie-bezogenen Ausstellungen könnten Besucher:innen selbst kreativ werden und eigene typografische Werke erschaffen.
Mögliche Einsatzfelder
Abgesehen vom experimentellen und spielerischen Charakter des Programms eröffnen die erzeugten Grafiken und Animationen vielfältige Anwendungsmöglichkeiten. Sie könnten beispielsweise als Teil eines visuellen Brandings, für Plakate, Postkartendesigns oder als Gestaltungselemente im Web eingesetzt werden.
Auch im Ausstellungskontext wäre das Programm spannend: Als interaktive Station in einem Museum oder bei Design- und Typografie-bezogenen Ausstellungen könnten Besucher:innen selbst kreativ werden und eigene typografische Werke erschaffen.
Mögliche Einsatzfelder
Abgesehen vom experimentellen und spielerischen Charakter des Programms eröffnen die erzeugten Grafiken und Animationen vielfältige Anwendungsmöglichkeiten. Sie könnten beispielsweise als Teil eines visuellen Brandings, für Plakate, Postkartendesigns oder als Gestaltungselemente im Web eingesetzt werden.
Auch im Ausstellungskontext wäre das Programm spannend: Als interaktive Station in einem Museum oder bei Design- und Typografie-bezogenen Ausstellungen könnten Besucher:innen selbst kreativ werden und eigene typografische Werke erschaffen.
Mögliche Einsatzfelder
Abgesehen vom experimentellen und spielerischen Charakter des Programms eröffnen die erzeugten Grafiken und Animationen vielfältige Anwendungsmöglichkeiten. Sie könnten beispielsweise als Teil eines visuellen Brandings, für Plakate, Postkartendesigns oder als Gestaltungselemente im Web eingesetzt werden.
Auch im Ausstellungskontext wäre das Programm spannend: Als interaktive Station in einem Museum oder bei Design- und Typografie-bezogenen Ausstellungen könnten Besucher:innen selbst kreativ werden und eigene typografische Werke erschaffen.
Ausblick
Weiterentwicklungsmöglichkeiten
Für eine zukünftige Weiterentwicklung des Projekts wäre eine Auswahlmöglichkeit für Schriftarten sinnvoll, um noch individuellere Ergebnisse zu ermöglichen. Allgemein könnte das User Interface optimiert werden, indem die Slider präziser gesteuert werden können und Eingaben zuverlässig im Feld bestehen bleiben.
Außerdem würde es das Nutzererlebnis verbessern, könnten die erzeugten Werke direkt in verschiedenen Dateiformaten gespeichert werden, um ihre Weiterverwendung zu erleichtern.
Weiterentwicklungsmöglichkeiten
Für eine zukünftige Weiterentwicklung des Projekts wäre eine Auswahlmöglichkeit für Schriftarten sinnvoll, um noch individuellere Ergebnisse zu ermöglichen. Allgemein könnte das User Interface optimiert werden, indem die Slider präziser gesteuert werden können und Eingaben zuverlässig im Feld bestehen bleiben.
Außerdem würde es das Nutzererlebnis verbessern, könnten die erzeugten Werke direkt in verschiedenen Dateiformaten gespeichert werden, um ihre Weiterverwendung zu erleichtern.
Weiterentwicklungsmöglichkeiten
Für eine zukünftige Weiterentwicklung des Projekts wäre eine Auswahlmöglichkeit für Schriftarten sinnvoll, um noch individuellere Ergebnisse zu ermöglichen. Allgemein könnte das User Interface optimiert werden, indem die Slider präziser gesteuert werden können und Eingaben zuverlässig im Feld bestehen bleiben.
Außerdem würde es das Nutzererlebnis verbessern, könnten die erzeugten Werke direkt in verschiedenen Dateiformaten gespeichert werden, um ihre Weiterverwendung zu erleichtern.
Weiterentwicklungsmöglichkeiten
Für eine zukünftige Weiterentwicklung des Projekts wäre eine Auswahlmöglichkeit für Schriftarten sinnvoll, um noch individuellere Ergebnisse zu ermöglichen. Allgemein könnte das User Interface optimiert werden, indem die Slider präziser gesteuert werden können und Eingaben zuverlässig im Feld bestehen bleiben.
Außerdem würde es das Nutzererlebnis verbessern, könnten die erzeugten Werke direkt in verschiedenen Dateiformaten gespeichert werden, um ihre Weiterverwendung zu erleichtern.
Weitere Projekte
Weitere Projekte
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
nkm Onlineshop
Redesign
(2023)
UI/UX Design
E-Commerce
nkm Onlineshop
Redesign
(2023)
UI/UX Design
E-Commerce
nkm Onlineshop
Redesign
(2023)
UI/UX Design
E-Commerce
nkm Onlineshop
Redesign
(2023)
UI/UX Design
E-Commerce