Animation Coding

Beschreibung

Schon Video- und Animationsfilme verwenden Computerprogramme, um bewegte Bilder zu erzeugen und zu präsentieren. Programmierte Animationen hingegen erzeugen die gezeigten Bilder zur Laufzeit, d.h. jedes Bild wird von einem Algorithmus erzeugt, kurz bevor es angezeigt wird. Die Ausgabe eines Programms hängt gewöhnlich von festgelegten Werten ab. Ändert man diese Werte zur Laufzeit, kann sofort Einfluss genommen werden auf die Ausgabe. So entsteht eine weitere Dimension, die der Interaktion, und somit verschiedene "Handlungsstränge".

Es gibt unzählige Werkzeuge, um bewegte Bilder zu erzeugen. Wir konzentrieren uns auf die Programmierumgebung Processing, die sich vorwiegend an Gestalter, Künstler und Programmieranfänger richtet. Processing bietet einen einfachen Einstieg in die Programmierung von Grafik und Animation. Interaktive Systeme können damit individuell und sehr kostengünstig umgesetzt und auf verschiedensten Plattformen eingesetzt werden, z.B. PC, Raspberry Pi, Android, Web.

Processing

Alle Resourcen zu Processing finden sich auf der Processing Webseite: https://processing.org

  • Installationspakete für Windows, Mac, Linux
  • Tutorials
  • Beschreibungen aller Funktionen (Reference)
  • Bibliotheken zur Erweiterung der Funktionalität (Libraries)

Es gibt Processing auf für JavaScript: p5.js
Damit können Sketches im Internet publiziert werden. Auf der Webseite finden sich auch Dokumentation der Funktionen etc.

p5.js hostet einen eigenen Webeditor, in dem gearbeitet werden kann: p5.js Webeditor
Um für eine Webseite zu entwickeln, empfiehlt sich auch das p5.js Template auf CodePen.

Sketches

Programme werden in Processing Sketches genannt. Alle Sketches liegen in einem Sketchbook Ordner, der in den Einstellungen von Processing (File->Options...) konfigurierbar ist. Man erreicht das Verzeichnis eines Sketches auch über das Sketch Menü (Sketch->Show Sketch Folder).

Der folgende Link beinhaltet ein Zip-Archiv mit 5 Sketches, die als Einstieg dienen. Die Sketch-Verzeichnisse sollten in den Sketchbook-Ordner von Processing kopiert werden, damit sie dort sichtbar werden (nach Neustart von Processing).

[ Download Processing sketches ] [ Download Processing examples using images and video ]

Die Sketches sind auch als p5.js Version auf CodePen zu finden:

[ p5.js sketches at CodePen ]