Dynamische Pixel-Grafik

Live erzeugte (dynamische) Pixel-Grafik

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure. Die vorgestellten Beispiele zeigen einige Möglichkeiten zur Herstellung und Änderung von Bildern mit Programmen.

Zur Anwendung der Beispiele werden keine Kenntnisse vorausgesetzt. Die Hinweise zur Programmierung erfordern jedoch Grundkenntnisse der Informatik sowie einer beliebigen Programmiersprache.



Pixel-Quadrat


Mit derartigen Bildern und einem Grafik-Programm kann man einige Experimente ausführen.
Die Programmierung ist besonders einfach und eignet sich daher als Aufgabe für Anfängerinnen.


Diese Pixel-Grafik wurde Live von einem Programm in der Programmiersprache → Javascript mit Canvas-Grafik-Funktionen erzeugt.
Mit Klick in die Grafik wird ein neues Bild in einer Zufalls-Farbe erzeugt.
Die Technologie mit Javascript + Canvas ist relativ neu und erst seit → HTML-Version 5 verfügbar. Sie ist besonders schnell und daher geeignet, um Pixel-Grafik Live nach interaktiven Anweisungen zu erzeugen. Sie wird bei allen Pixel-Grafik Beispielen dieses Webs bevorzugt.


Diese Pixel-Grafik wurde Live mit einem Programm in der Programmiersprache → PHP mit GD-Grafik-Funktionen erzeugt.
Die Technologie mit PHP + GD ist schon lange etabliert, heute jedoch veraltet und wird weitgehend durch ↑ Javascript + Canvas ersetzt.
Für Web-EntwicklerInnen sind Kenntnisse dieser Technologie allerdings nach wie vor unentbehrlich.


Ein wesentliches Merkmal dynamischer Grafik ist die Möglichkeit zur interaktiven Steuerung.
Man kann die Bilder auf Anweisung der AnwenderInnen programmieren (wie mit den links angebrachten Programm-Tasten), alternativ aber auch durch beliebige 'Ereignisse' (Events) wie z.B. links durch Überfahern der 'MouseOver'-Taste, durch Zeit, Wetter oder Standort gesteuert, usw.



Man kann die beiden hier gezeigten (und andere) Methoden zur Erzeugung dynamischer Pixel-Grafik vergleichen.
Dazu werden die jeweiligen Programme meist oft (z.B. 1000mal) wiederholt. Die Zeit-Messung erfordert allerdings fortgeschrittene Kenntnisse.

Man kann den Quelltext der beiden Programme (nächster↓ Absatz) in einer Text-Datei am eigenen Arbeits-PC speichern. Die Javascript+Canvas-Technologie funktioniert an jedem PC, jene mit PHP+GD dagegen nur auf einem Webserver (→ PHP, → HTTP-Diagramm)



Ein ähnliches Beispiel ist die Programmierung einer → 1‑Pixel‑Grafik. Ein derartiges 'Bild' kann man mit → CSS-Methoden in jeder beliebigen Breite und Höhe anzeigen.

Links

Wikipedia: Pixel-(Raster)-Grafik, Objekt-(Vektor)-Grafik, Canvas, GD‑Library
Mozilla (MDN): Canvas-Tutorial, Canvas-API
W3Schools: Canvas-Intro, Canvas-Reference
PHP: GD-Intro, Bildbearbeitung mit GD

Farb-Rauschen


Mit derartigen Bildern und einem Grafik-Programm kann man einige Experimente ausführen.
Die Programmierung ist geringfügig schwieriger als das vorige Beispiel ↑ Pixel-Quadrat.


Diese Pixel-Grafik wurde Live von einem Programm in der Programmiersprache → Javascript mit Canvas-Grafik-Funktionen erzeugt.
Mit Klick in die Grafik wird ein neues Bild erzeugt.
Die Technologie mit Javascript + Canvas arbeitet besonders schnell und ist daher gut geeignet, um Pixel-Grafik nach interaktiven Anweisungen Live zu erzeugen. Sie wird bei allen Pixel-Grafik Beispielen dieses Webs bevorzugt.


Diese Pixel-Grafik wurde Live mit einem Programm in der Programmiersprache → PHP mit GD-Grafik-Funktionen erzeugt.
Die Technologie mit PHP + GD ist schon lange etabliert, heute jedoch veraltet. Sie wird weitgehend durch Javascript + Canvas ersetzt.
Für Web-EntwicklerInnen sind Kenntnisse dieser Technologie allerdings nach wie vor unentbehrlich.


Dieses statische 'Bild' zeigt jene graue Farbe, welche genau dem Mittelwert der 3 in der Informatik verwendeten 'Grundfarben' → Rot, Grün und Blau (RGB) entspricht. Aus großer Entfernung betrachtet erscheinen alle 3 Bilder dieses Kapitels in der gleicher Farbe rgb(128,128,128)
Auch die bunten Kiesel einer Schotterbank erscheinen aus der Ferne in (allerdings meist hellerem) Grau.

Details dieser Beispiele mit Vergleich beider Entwicklungs-Methoden.



Man kann verschiedene 'Filter' auf die Bilder anwenden und das Ergebnis untersuchen. → Filter sind Programme, welche eine Pixel-Grafik lesen, nach bestimmten Regeln (Algorithmen) verändern und danach anzeigen.

Man kann die beiden hier gezeigten (und andere) Methoden zur Erzeugung dynamischer Pixel-Grafik vergleichen. (Programmier-Aufwand, Zeit bis zur Anzeige am Arbeits-PC).

Man kann den Quelltext (nächster ↓ Absatz) in Text-Dateien am eigenen PC speichern und die Verwendbarkeit in Abhängigkeit von Betriebssystem und Programmen untersuchen.



Mit diesem Link wird die mit ↗ PHP+GD programmierte Grafik in einem eigenen Browser-Fenster angezeigt. Der Quelltext ist gut geschützt und normalerweise nicht zugänglich. Er wird hier ausnahmsweise mit diesem ↗ Link angezeigt. Man kann ihn in einer Text-Datei *.php am eigenen Arbeits-PC speichern, jedoch nur auf einem Webserver-PC ausführen.
Das Programm ist im Vergleich zu Javascript+Canvas angenehm schlank.

Eine ähnliche Aufgabe stellt etwas höhere Anforderungen, vergleicht jedoch eine größere Auswahl an Methoden: → Rechteck.

Spektralfarben


Zur Lösung der Aufgabe wird ein Algorithmus verwendet, der die komplizierten Verhältnisse empirisch beschreibt. Bei der Programmierung muss man diesen (oder einen gleichwertigen) Algorithmus zur Erzeugung der Pixel-Grafik anwenden.

Der Algorithmus ist nicht physikalisch abgeleitet, sondern wurde empirisch an Bilder von Regenbögen und Prismen angepasst. Er berechnet die Werte der 3 Farb-Variablen r,g,b in Abhängigkeit von der Wellenlänge (400...λ...700) in [nm]
r1 = 256 * exp(-(((λ-605)/100)2))
r2 = 110 * exp(-(((λ-440)/50)2))
r = r1 + r2
g = 220 * exp(-(((λ-540)/100)2))
b1 = 175 * exp(-(((λ-470)/100)2))
b2 = 60 * exp(-(((λ-670)/70)2))
b = b1 + b2
Begrenze die Werte auf (0...r,g,b...255)



Die fertig programmierte Grafik wird in einer statischen Datei *.jpg oder *.png gespeichert. Man kann sie mit jedem Browser oder Grafik-Programm anzeigen.

Man kann die gleiche (!) Grafik-Datei mit → CSS-Eigenschaften in jeder beliebigen Größe und Orientierung verwenden. Fortgeschrittene Web-EntwicklerInnen können versuchen, die angezeigte Größe mit einem → Schieberegler interaktiv zu steuern.



Mit diesem Link wird der ↗ Quelltext eines PHP+GD-Programms zum gleichen Zweck angezeigt. Man kann den Text in einer Text-Datei *.php am eigenen Arbeits-PC speichern, jedoch nur auf einem Webserver-PC ausführen.

Details zur → Programmierung dieses Beispiels
Weitere Beispiele, die eine Pixel-Grafik nach mehr oder weniger komplexen Algorithmen herstellen: → Archimedische Spirale, → Monte-Carlo-Methode, → HSB-Kreis-Diagramm, → Mandelbrot-Fraktal

Änderung einer Grafik


Diese Aufgabe erfordert nur eine relativ einfache Änderung (Übermalung) der Grafik. Man kann sich daher bei wenig Entwicklungs-Aufwand auf die Besonderheiten der jeweiligen Technologie konzentrieren.


Links wird die Original-Grafik angezeigt, die in dieser Aufgabe verändert werden soll.

Als Quelle der Pixel-Grafik kann man (wie hier) eine Grafik-Datei oder eine Live aus dem Internet geladene Grafik (z.B. einer WebCam) verwenden oder eine (mit Canvas oder GD) programmierte Grafik.


Beide Bilder wurden Live von Programmen in der Programmiersprache → Javascript mit Canvas-Grafik-Funktionen erzeugt.
In der einfachen Version (links) wird die aktuelle Zeit 1mal in das Bild gemalt. In der animierten Version (rechts) wird das Bild periodisch neu gemalt.
Die Technologie mit Javascript + Canvas arbeitet besonders schnell und ist daher sogar für einfache Animationen geeignet.
Eine ähnliche Aufgabe ist das 'Malen' von → Text in beliebigen (auch exotischen) Schrift-Familien.


Diese Pixel-Grafik wurde Live mit einem Programm in der Programmiersprache → PHP mit GD‑Grafik-Funktionen erzeugt. Eine Animation wäre technisch möglich, kommt jedoch wegen der Belastung des Servers nicht in Frage.
Die Technologie mit PHP + GD ist heute veraltet und wird weitgehend durch ↑ Javascript + Canvas ersetzt.
Der PHP-Quelltext ist allerdings - im Gegensatz zu Javascript - relativ gut gegen unbefugten Zugriff geschützt. Die Methode eignet sich daher auch für heikle Anwendungen.
Details zu diesem Beispiel


Dieses Bild ist eine Mini-Webseite, welche nur eine → SVG-Objekt-Grafik enthält. Die Original Grafik wurde als Pixel-Objekt eingefügt, in einer darüber liegenden Schicht die Zeit als Text-Objekt. Die Datei enthält außerdem ein kleines Javascript-Programm, welches laufend die aktuelle Zeit einträgt.
Diese Technologie löst die Aufgabe besonders elegant und bietet die meisten Möglichkeiten zur Gestaltung. Sie ist schnell und sparsam und wird daher auch für mobile Geräte (SmartPhones) bevorzugt.



Die mit PHP+GD programmierte Grafik verhält sich für AnwenderInnen genauso wie eine statische Grafik-Datei. Man kann sie so wie die Original-Grafik mit RechtsKlick am eigenen PC speichern und verwenden.

Die SVG Objekt-Grafik wird zwar von jedem modernen Browser-Programm angezeigt, mit RechtsKlick kann man jedoch nur den Quelltext (das SVG- und das Javascript-Programm) ansehen. Die Original-Grafik selbst ist darin nicht enthalten, sondern lediglich ihr Datei-Name (Pfad, Adresse, URL).

Die beiden Canvas-Lösungen und die SVG-Lösung sind auf jeden PC portabel, wenn man zusätzlich die Original-Grafik portiert, die von diesen Technologien als externe Datei gebraucht wird.
Das PHP-Programm ist gut geschützt und für normale AnwenderInnen nicht zugänglich.


Mit diesem Link wird die mit ↗ PHP+GD programmierte Grafik in einem eigenen Browser-Fenster angezeigt. Der PHP-Quelltext ist normalerweise nicht zugänglich. Er wird hier ausnahmsweise mit Klick auf diesen ↗ Link angezeigt. Man kann das Programm in einer Text-Datei *.php speichern, jedoch nur auf einem Webserver verwenden. Außerdem muss sich die Original-Grafik campanula.jpg im gleichen Verzeichnis (Ordner) befinden wie die PHP-Datei.
Das PHP-Programm besteht aus nur 8 Zeilen !

Mit diesem Link wird die mit ↗ SVG programmierte Objekt-Grafik in einem eigenen Browser-Fenster angezeigt. Den SVG+Javascript-Quelltext kann man mit RechtsKlick oder mit diesem ↗ Link anzeigen. Man kann das Programm in einer Text-Datei *.svg speichern und mit jedem Browser anzeigen.Allerdings muss sich die Original-Grafik campanula.jpg im gleichen Verzeichnis (Ordner) befinden wie die SVG-Datei.

Details zur → Programmierung dieses Beispiels
Weitere Beispiele, die eine vorgegebene Pixel-Grafik nach verschiedenen Algorithmen ändern: → Canvas-Filter

Animation einer Analog-Uhr


Diese Vorgabe erlaubt praktisch nur Javascript als Programmiersprache für eine Animation. Man kann allerdings zwischen Pixel-Grafik (mit Canvas) und Objekt-Grafik (mit SVG) wählen.

Die beiden Lösungen zeigen eine animierte Grafik als Pixel- und als Objekt-Grafik. Beide Versionen arbeiten sehr schnell, weil alle gängigen Browser sowohl Canvas als auch SVG gut optimieren.


Das Beispiel zeigt eine animierte Pixel-Grafik, die mit → Javascript + Canvas programmiert wurde.
Alle 120x120=14400 Pixel der Grafik werden 1mal pro Sekunde neu berechnet und angezeigt.
Die ↗ Mini-Webseite (HTML-Datei) wird nur 1mal geladen, danach wird das darin enthaltene Javascript-Programm an ihrem Arbeits-PC periodisch ausgeführt.


Diese Objekt-Grafik einer Analog-Uhr ist mit → Javascript + SVG programmiert. Sie besteht aus nur wenigen Objekten (2 Kreise, 15 Linien).
Das Animations-Programm muss lediglich die Richtungs-Winkel der Zeiger-Linien nach der aktuellen Zeit einstellen. Das Javascript-Programm ist im Quelltest der Mini-Webseite (HTML-Datei) enthalten. Auch in diesem Fall muss der Prozessor periodisch alle Pixel der Grafik neu berechnen. Dazu braucht man jedoch keinen Programm-Befehl, der SVG-Engine des Browsers erledigt das automatisch.
Auch diese ↗ Mini-Webseite (HTML-Datei) wird nur 1mal geladen, danach wird das darin enthaltene Javascript-Programm an ihrem Arbeits-PC periodisch ausgeführt.



Erklären sie, warum man nur die Canvas-Lösung als Grafik-Datei am eigenen Arbeits-PC speichern kann, nicht jedoch die SVG-Lösung.

Könnte man die beiden Lösungen mit einem ScreenShot (Bildschirm-Foto) als Bild speichern ?   Wenn ja, geben sie dazu eine kurze Anleitung.

Erklären und begründen sie, ob man eine Lösung mit → PHP+GD ebenfalls herunterladen und am eigenen PC verwenden könnte.

Kann man eine Canvas- oder SVG-Lösung auch mit PHP programmieren ?   Welche Vor- und Nachteile hätte das ?

Die Canvas-Lösung enthält fast ausschließlich Javascript-Code, die SVG-Lösung nur ca. zur Hälfte. Fortgeschrittene EntwicklerInnen können das begründen.



Mit diesem Link wird die mit ↗ SVG programmierte Objekt-Grafik in einem eigenen Browser-Fenster angezeigt. Den SVG+Javascript-Quelltext kann man mit RechtsKlick oder mit diesem ↗ Link anzeigen. Man kann das Programm in einer Text-Datei *.svg speichern und mit jedem Browser anzeigen.Allerdings muss sich die Original-Grafik campanula.jpg im gleichen Verzeichnis (Ordner) befinden wie die SVG-Datei.