Farb-Rauschen

 

Maximale Unordnung

◀   Die ganz links gezeigte Pixel-Grafik wird mit Mausklick neu erzeugt.
  • Jeder Bildpunkt enthält eine zufällige Farbe ('Farb-Rauschen). Das Bild zeigt daher die maximal mögliche 'Unordnung'.
  • Der Mittelwert aller Farb-Werte beträgt 256/2 = 128 = 0x80
    Das rechte Bild zeigt zum Vergleich die monochrome Farbe #808080 - aus großer Entfernung sieht es gleich aus.
  • Das Beispiel demonstriert die Erzeugung von Grafik nach Formeln oder Algorithmen.
  • Das genaue Gegenteil ist ein 'maximal geordnetes' Bild in einer einzigen Farbe (→ Beispiel)



Programmierung mit Canvas + Javascript

◀   Diese Grafik wurde mit → Canvas programmiert. Die Technologie ist seit Version → HTML-5 verfügbar und wird von allen gängigen Browsern unterstützt.
Canvas ist die modernste Methode zur → Erzeugung von dynamischer (programmierter) Pixel-Grafik.
Man kann die Grafik interaktiv steuern (hier: ihre Größe ändern),
ohne sie vom Server erneut anzufordern.
Jede Bewegung des SchiebeReglers demonstriert die eindrucksvolle Geschwindigkeit von Canvas-Grafik.
Die Canvas-Grafik ist fast immer schneller verfügbar als eine am Server erzeugte Grafik.

Canvas funktioniert am eigenen Arbeits-PC auch ohne Server sowie ohne zusätzliche Installation oder Konfiguration.
Das (Javascript)-Programm wird mitgeliefert. Wenn man die → Datei am eigenen PC speichert, dann bleibt die Funktionalität (hier die interaktive Steuerung) erhalten.


Man kann die mit Canvas dynamisch erzeugte Grafik (mit RechtsKlick) herunterladen und als Datei am eigenen PC speichern. Sie verhält sich dann allerdings statisch (unveränderlich).


HTML + Javascript Quelltext

Die mit Canvas erzeugte Grafik ist in einer eigenen ↗ Mini-Webseite enthalten. Man kann sie daher mehrfach verwenden und in beliebige Webseiten (so wie hier) einbetten.
Außerdem kann man den Queltext ohne störenden Overhead studieren.

Die Mini-Webseite enthält nur ein einziges <canvas>-Element (am Ende des Quelltextes). Der gesamte übrige Text enthält die verwendeten Javascript-Programme.

Das <body>-Element erhält ein onload-Attribut. Damit wird die angegebene Funktion do_onload() nach dem Laden automatisch ausgeführt: Sie decodiert allfällige → GET-Argumente, stellt die Größe ein und zeichnet die Grafik.

Funktion get_arguments() untersucht die zur Anforderung verwendete Web-Adresse (URL). Wenn darin GET-Argumente enthalten sind, dann werden sie decodiert und zur Einstellung der Größe verwendet.

Funktion set_size() ändert Live die Größe des <canvas>-Elements und zeichnet die komplette Grafik neu. Diese Funktion wird mit dem oben ↑ eingesetzten SchiebeRegler gesteuert.

Funktion paint() zeichnet die Grafik: Jeder Bildpunkt erhält eine zufällige Farbe. Nur diese Funktion verwendet Canvas-Anweisungen.



Die Pixel-Daten werden im Array imga.data[] verwaltet. Alle Elemente des Arrays werden in einer for-Schleife durchlaufen. Jedes Pixel wird durch 4 Elemente beschrieben (Rot, Grün, Blau, α-Kanal=Deckkraft), daher wird der Index k bei jedem Durchlauf um +4 erhöht.

Innerhalb der Schleife wird für jede → RGB-Farbe eine mit Zufallsgenerator erzeugte ganze Zahl 0..255 zugewiesen und der α-Kanal auf den Wert 255 gesetzt.

Zuletzt werden die Daten des Arrays mit Methode putImageData() zum Zeichnen der Grafik verwendet.



Eine Canvas-Grafik ist nur zusammen mit jener Webseite portabel, in welcher sie erzeugt wurde. Daher werden die meisten Canvas-Grafiken in diesem Web in eigene Mini‑Webseiten eingebettet, die keine anderen sichtbaren HTML-Elemente enthalten.

Auch das hier vorgestellte Beispiel ist als portable Mini-Webseite programmiert. Man kann daher mit RechtsKlick sowohl das Bild als binäre Pixel-Grafik herunterladen, als auch den Quelltext der Mini-Webseite anzeigen.

Mit einem HTML <iframe>-Element kann man die Mini-Webseite an jeder beliebigen Stelle einbetten, z.B.
<iframe src="noise.html"></iframe>
In der Praxis sollte man das <iframe>-Element mit → CSS formatieren, d.h. mindestens Breite und Höhe angeben.

Alternative Programmierung mit PHP


Zur Herstellung einer dynamischen Pixel-Grafik eignet sich jede moderne Programmiersprache:

Javascript wird am eigenen Client-PC von jedem Browser ausgeführt, arbeitet schnell und braucht keine Installation. Die Technologie von → Canvas + javascript ist daher fast immer zu bevorzugen.

Java wird ebenfalls am eigenen PC ausgeführt, erfordert jedoch die Installation des  JRE und die umständliche Handhabung der Sicherheits-Mechanismen.

Alle anderen populären Programmiersprachen werden am Server ausgeführt, z.B. Java (als Server-Programm), Perl, PHP, Python etc.
In dieser Gruppe ist fast immer → PHP zu bevorzugen, weil diese Programmiersprache an jedem Standard-Server installiert ist und von den meisten Web-EntwicklerInnen gut beherrscht wird.

Mit der Programmiersprache → C/C++ kann man besonders schnelle Programme herstellen, die je nach Aufgabe am Client (App) oder am Server (CGI-Programm) laufen. Die Herstellung und Verwaltung ist allerdings wesentlich aufwändiger als für alle anderen genannten Sprachen.



Das GD-Modul ist in eigenen Versionen für alle modernen Programmiersprachen verfügbar. Man kann daher die meisten Pixel-Grafik-Programme problemlos in andere Programmiersprachen portieren.


PHP-Quelltext

◀   Das Beispiel zeigt den Inhalt der Text-Datei noise.php

• Das Programm beginnt mit der Funktion header()
Damit wird im → HTTP-Response-Header die MIME-Type der nachfolgenden (Grafik)-Daten angekündigt - in diesem Fall JPEG. Die Grafik kann daher 24 Bit/Pixel verwenden, das ergibt eine Auswahl aus 256*256*256 = 16777216 Farben.

• Das Programm kann die GET-Argumente w,h zur Einstellung von Breite und Höhe der Grafik verarbeiten.

• Mit Funktion imagecreatetruecolor() wird ein Grafik-Objekt der angegebenen Größe erzeugt.

• Das Programm verwendet ein einziges Farb-Objekt $f, dem mit Funktion imagecolorallocate() laufend neue → RGB-Werte zugewiesen werden.

• In 2 verschachtelten for-Schleifen wird jeder einzelne Bildpunkt mit den Koordinaten $x,$y adressiert. Dieser Programm-Teil ist für jede Bild-Verarbeitung typisch.

• Jedem Bildpunkt wird mit Funktion imagesetpixel() die gerade neu erzeugte Farbe aus Zufalls-Werten der 3 RGB-Farben $r,$g,$b zugewiesen.

• Zuletzt wird die fertige Grafik mit Funktion imagejpeg() an den HTTP-Client (Browser) gesendet.



◀   Das ist der (vereinfachte) HTML-Quelltext zur Einbettung der mit PHP Live erzeugten Grafik in eine Webseite.

Der Pfad zur PHP-Datei wird als src-Attribut eingetragen.
Nach dem Datei-Namen folgen optional die GET-Argumente, hier z.B. zur Vorgabe von Breite und Höhe der Grafik.


• Man kann die mit PHP dynamisch erzeugte Grafik mit RechtsKlick herunterladen und als Datei am eigenen PC speichern. Sie verhält sich dann allerdings statisch (unveränderlich).

HTTP-Daten

◀   In diesem Rahmen werden jene Daten angezeigt, die ihr Browser bei Anforderung einer Farb-Rauschen-Grafik erhalten hat. Im Falle einer Pixel-Grafik ist das eine Folge von binären und daher für Menschen nicht lesbaren Daten.

Alle Bytes, die nicht als → Zeichen darstellbar sind, werden hedadezimal in violetter Farbe angezeigt.
Zur Vereinfachung werden hier die Daten einer Grafik von nur 10x10=100 Bildpunkten (Pixeln) angezeigt.

Das → HTTP-Diagramm illustriert den Fluss der Daten in einer typischen Umgebung.
Das Beispiel → HTTP-Daten erlaubt Live-Experimente mit den zwischen Client und Server ausgetauschten Daten.

Vorteile und Nachteile der vorgestellten Methoden


Die ersten 3 Zeilen zeigen statische Grafik-Dateien. Der Platzbedarf hängt nur von der Bild-Größe ab und ist unabhängig von dem zur Herstellung verwendeten Programm.

Das auf dieser Seite demonstrierte Programm in ↑ Javascript+Canvas Technik ist ca. gleich groß wie eine statische Grafik-Datei der Bild-Größe 30x30, das ↑ PHP+GD Programm nur so groß wie eine winzige Grafik von 12x12 Pixeln.



Die Größe einer statischen Grafik-Datei ergibt sich aus dem Produkt von Breite × Höhe in Bildpunkten (Pixeln). Schon kleine Bilder brauchen daher mehr Platz als typische Programme. Die meisten → Grafik-Formate lassen sich zwar auf Kosten der Bild-Qualität komprimieren, aber genau das ist bei diesem Beispiel (Rauschen) ausgeschlossen.
Eine statische Grafik-Datei ist unflexibel: Weder Aussehen noch Bild-Größe lassen sich bei der Anwendung ändern. Man kann zwar die angezeigte Größe (mit → CSS-Eigenschaften) Live ändern, beim Vergrößern leidet jedoch die Qualität.



Javascript-Programme werden am eigenen Arbeits-PC ausgeführt. Daher wird der Webserver wesentlich weniger belastet als mit PHP+GD und sogar weniger als mit einer statischen Grafik-Datei.
Man kann die Ausführung von Javascript durch ein Browser-Programm untersagen. Das ist zwar wenig empfehlenswert, in solchen Fällen wird jedoch kein Bild erzeugt.



PHP arbeitet typisch mit einem Webserver zusammen und ist an einem normalen Arbeits-PC nicht ausführbar.
Weil PHP am Server-PC ausgeführt wird, belastet es diesen erheblich mehr als das bloße Absenden einer HTML+Javascript-Datei oder einer statischen Grafik-Datei. Dieser Nachteil wiegt besonders schwer, wenn eine Grafik mehrmals hintereinader interaktiv angefordert wird. Daher wird diese 'klassische' Technologie heute meist durch Javascript+Canvas ersetzt.