Film-Zähler

Umwandlung von Objekt-Grafik in Video

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse der Informatik werden vorausgesetzt.



SVG, Grafik und Video


Hier wird vorgestellt, wie man diese Aufgabe mit → SVG Objekt-Grafik löst und wie man das Produkt in animierte Pixel-Grafik und Video umwandeln kann.

Alle 3 Versionen sind portabel: Mann kann sie als Datei herunterladen und ohne zusätzliche Resourcen an jedem gängigen PC verwenden.







SVG Objekt-Grafik


Hier wird vorgeschlagen, die formale (Objekt)-Grafik mit → SVG zu programmieren und die Animation mit → Javascript.
Diese Methode stützt sich auf freie und standardisierte Web-Technologie. Die Entwicklung ist vergleichsweise einfach, erfordert keine teuren Resourcen und lediglich Standard-Kenntnisse der Web-Technologie.
Die Produkte lassen sich (wie hier gezeigt) problemlos in viele verschiedene Datei-Formate umwandeln. Die Methode ist daher (soweit man das heute feststellen kann) zukunfts-sicher.


◀   Aus diesem Text hat ihr Browser die ↑ oben gezeigte SVG Objekt-Grafik + Animation hergestellt. Sie können diesen ↗ Text in einem eigenen Browser-Tab anzeigen, in einer Text-Datei *.svg am eigenen PC speichern und beliebig verwenden.

Die Details sind nur für fortgeschrittene EntwicklerInnen interessant:

In einem → CSS <style>-Element wird die Formatierung aller Elemente vorgegeben.

In einem <script>-Element sind die → Javascript-Programme zur interaktiven Steuerung und Animation enthalten. Der Text ist für Javascript-EntwicklerInnen kommentiert. Mit Standard → DOM-Methoden werden die Eigenschaften einiger Elemente der Grafik geändert.

Danach folgen die Grafik-Elemente:
Im Abschnitt <defs> werden die Clip-Pfade und die mehrfach verwendeten Elemente (Perforations-Löcher, Lochstreifen) definiert.
Der Hintergrund wird als schwarz gefülltes Rechteck angelegt.
Danach werden die beiden Lochstreifen eingesetzt. Rechts werden die Tonspuren mit 2 grauen Linien simuliert.
Für das Video-'Bild' wird der Ursprung des Koordinaten-Systems mit dem Attribut transform="tranlate()" in die Mitte des Bildes verschoben: Das vereinfacht die Programmierung.
Der Bild-Hintergrund <rect> und der bewegliche Sektor <path> werden jeweils mit unterschiedlichen CSS-Klassen formatiert (heller - dunkler).
Danach (d.h. optisch darüber) werden die beiden Achsen und Kreise gezeichnet, zuletzt die Zahl der Sekunden als Text.


Dieses Beispiel kann als einfaches Muster für beliebige Grafiken dienen, mit denen ein Thema vorgestellt, interaktiv gesteuert und animiert wird.

Alle weiteren auf dieser Seite ↓ vorgestellten Beispiele enthalten weniger 'Intelligenz': Animierte Grafik und Video sind passiv konsumierbare Medien und brauchen darüber hinaus weit mehr Speicherplatz und Übertragungs-Zeit.

Von Frames zum Video


PHP

Die Programmierung mit PHP hat diese Vorteile:
PHP kann jeden einzelnen Schritt der Animation als Text-Datei *.svg speichern. Damit lassen sich alle (hier 217) Dateien in wenigen Sekunden erzeugen.
PHP-Kenntnisse sind weit verbreitet und daher leicht und preisgünstig verfügbar.

Nachteil: PHP-Programme laufen nur auf einem (Web)-Server-PC und erfordern daher zusätzliche Resourcen.
Die laufende Anzeige der erzeugten Dateien wäre für eine Animation viel zu langsam und würde zu viele Resourcen (Server, Daten-Übertragung) binden.
Daher eignet sich eine PHP-Version gut zur Erzeugung aller benötigten Frame-Dateien, jedoch keinesfalls zur Animation.

Auf den Servern mancher Web-Provider ist es nicht möglich, mit (PHP)-Programmen erzeugte Dateien zu speichern. In diesem Fall beschränkt man das PHP-Programm auf die Herstellung des jeweiligen SVG-Quelltextes am Server und verwendet zum Empfang und zum Speichern des Quelltextes am eigenen Client-PC das automatisierbaren Programm cURL.



Mit dem ObjektGrafik Programm Inkscape kann man SVG-Grafik erzeugen, ändern, oder - wie hier gefordert - als PixelGrafik exportieren.
Das Programm bietet auch eine Konsolen-(CLI)-Variante, mit der fortgeschrittene AnwenderInnen alle Funktionen automatisieren und damit auf beliebig viele Dateien anwenden können.

Auf Linux gibt es nicht nur Gimp und Inkscape, sondern insbesondere viele Konsolen-(CLI)-Programme, die rasch und sparsam arbeiten, jedoch meist fortgeschrittene Kenntnisse zur Bedienung erfordern.
Das Betriebssystem Ubuntu ist besonders empfehlenswert, weil alle erforderlichen Bibliotheken (automatisch) in der passenden Version installiert werden.

Am besten hat sich das einfache Konsolen-Programm rsvg bewährt, mit dem aus allen 217 SVG-Dateien in wenigen Sekunden und in ausgezeichneter Qualität ebenso viele PixelGrafik-Dateien *.png erzeugt wurden.
Weitere Alternativen sind das Konsolen-(CLI)-Programm von InkScape sowie das Programm-Paket Imagemagick und andere.



Auch auf Linux gibt es viele Grafik-Programme, wenn auch etwas weniger als für Windows.
Für die professionelle Arbeit werden Konsolen-(CLI)-Programme bevorzugt: Sie arbeiten rasch und sparsam und lassen sich leicht automatisieren.

Für die hier gezeigten Beispiele wurde das Programm-Paket Imagemagick verwendet.



Zur Erzeugung von Video-Dateien gibt es 2 verschiedene Wege:

Wenn möglich erzeugt man eine Video-Datei direkt aus den einzelnen Frames = aus vielen einzelnen PixelGrafik-Dateien *.png
In diesem Fall kann man meistens das Verhältnis Qualität/Kompression des Produkts bestimmen.

Alternativ kann man fertige Video-Dateien in ein anderes Video-Format umwandeln. Dabei muss man meistens Verluste an Qualität in Kauf nehmen.

Alle hier verwendeten Video-Dateien wurden auf Ubuntu-Linux mit dem Konsolen-(CLI)-Programm ffmpeg direkt aus den einzelnen Grafik-Dateien hergestellt. Im ↑ Beispiel dieser Seite werden ihrem Browser 6 verschiedene Video-Dateien angeboten: WEBM, MP4, MOV, OGG, MPEG, AVI


Das didaktische Ziel dieser Seite ist die Vermittlung der grundlegenden Vorgänge, mit denen man aus einer konstruierten Objekt-Grafik ein Video erzeugen kann.
Einige der erzeugten Videos werden auf der Seite → HTML-Video vorgestellt.