Programmierung von Spektral-Farben

Programmierung von Spektral-Farben mit Canvas


In diesem Fall sind auch für die Anwendung des erzeugten Produkts mehrere Methoden möglich, die ebenfalls verglichen werden.
Der oben gezeigte Farb-Balken wurde mit PHP programmiert und als statische → Grafik-Datei gespeichert.

Spektral-Farben mit Canvas

◀  Diese Grafik wurde von einem Programm in der Programmiersprache → Javascript berechnet und in ein Canvas-Element gezeichnet.

Das Javascript-Programm wird Live an ihrem Arbeits-PC ausgeführt.
Zum Nachweis kann man Breite und Höhe interaktiv einstellen.
Seit Version HTML-5 kann man auch → SchiebeRegler zur Steuerung verwenden.

Das Programm muss für jede gewünschte Breite (mindestens) die Pixel einer Zeile neu berechnen und in jedem Fall die Grafik neu malen.


Für diese Demonstration wurde das Beispiel in eine Mini-Webseite eingebettet: Die Analog-Uhr lässt sich dann mehrfach verwenden und man kann den Quelltext ohne den störenden Overhead dieser Webseite anzeigen:

Mit diesem Link wird die ↗ Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen. Die Javascript Programme sind im Quelltext enthalten. Aus diesem Text kann jeder Browser die Grafik hergestellen.

Vergleich der programmierten Grafik mit echten Regen- und Eisbögen.

Canvas-Element in HTML-5



Das <canvas>-Element sollte alle 3 hier angegebenen Attribute enthalten:

Das id-Attribut muss eindeutig sein und dient zur Identifikation des Elerments mit Javascript.

Die Größe in Bildpunkten (Pixeln) sollte mit den Attributen width und height programmiert werden.

Javascript


Canvas-Grafik wird Live gezeichnet, d.h. in jedem Fall erst nach dem Laden einer Webseite. Die Methode eignet sich daher gut zur wiederholten Ausführung nach interaktiven Anweisungen.


HTML + Javascript-Quelltext

 Aus diesem Quelltext hat ihr Browser die Canvas-Grafik hergestellt (und berechnet sie weiterhin jede Sekunde neu).
Das Canvas-Element ist nicht in dieser Webseite enthalten, sondern in einer eigenen Mini-Webseite: So lässt sich der Text ohne störenden Overhead analysieren.

Mit diesem Link wird die ↗ Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der ↗ Quelltext der Mini-Webseite angezeigt: Aus diesem Text hat ihr Browser die Grafik hergestellt.

Der winzige HTML <body>-Teil (am Ende des Quelltextes) enthält nur das <canvas>-Element.

Die Javascript-Programme nehmen fast den gesamten Quelltext ein. Davon dient allerdings nur das 17 Zeilen kurze Programm paint() zum Malen der Grafik.

Man kann den Quelltext in einer Datei *.html am eigenen PC speichern (Zeilen-Nummern vorher mit Klick abschalten): Die Datei lässt sich mit jedem Browser öffnen und zeigt die Grafik.


Javascript Hilfs-Funktionen

Funktion set_size() dient zur Einstellung von Breite und Höhe der Grafik. Sie wird von dieser (übergeordneten) Webseite zur Fernsteuerung verwendet, wenn einer der Schieberegler verändert wird. Am Ende dieser Funktion wird die Grafik mit Funktion paint() neu gezeichnet.

Funktion do_onload() wird unmittelbar nach dem Laden der (Mini)-Webseite automatisch ausgeführt. Sie prüft, ob (→ GET)-Argumente angegeben wurden, stellt Breite und Höhe der Grafik ein und zeichnet sie.

Funktion get_arguments() untersucht die zur Anforderung verwendete Web-Adresse (URL). Wenn darin GET-Argumente enthalten sind, dann werden sie decodiert und zur Einstellung von Breite und Höhe der Grafik verwendet.



Alle Pixel der 2dimensionalen Grafik werden in 2 verschachtelten for-Schleifen durchlaufen.
Der Index ix bezeichnet die Spalte von links nach rechts, der Index iy die Zeile von oben nach unten.

Diese spezielle Aufgabe enthält eine wesentliche Einschränkung: Die Farbe alle Pixel einer Spalte ist gleich. Daher wird sie in der Variablen rgb nur 1mal pro Spalte (ix) berechnet und auf alle darin enthaltenen Pixel (0..iy..h) angewendet.

Nach Berechnung aller Pixel wird die Grafik mit Methode putImageData() in das Canvas-Element gemalt.

Spektral-Farben mit PHP

◀  Alle Versionen der links eingebetteten Grafik wurden mit der gleichen Grafik-Datei wavelength_500x1.jpg hergestellt.

CSS: Mit den CSS-Eigenschaften width,height wird die jeweilige Größe eingestellt, mit opacity die Transparenz und mit transform die Drehung um 180°.

Browser-Cache: Die Datei wird nur 1mal vom Server angefprdert und danach beliebig oft aus dem Cache-Speicher des Browsers verwendet.

PHP: Die Datei wurde 1malig von einem Programm in der Programmiersprache → PHP berechnet und als statische (gleichbleibende) Grafik-Datei gespeichert. Es wäre möglich, aber nicht sinnvoll, jede der hier gezeigten Versionen der Datei einzeln mit dem ↓ PHP-Programm zu erzeugen.

PHP-Quelltext

  Dies ist der Quelltext eines PHP-Programms, welches die gleiche Grafik erzeugt wie oben mit Canvas + Javascript vorgestellt. PHP-Programme werden am Server-PC ausgeführt.

Das Programm kann Live arbeiten, für jeden einzelnen Client-Auftrag einen 'Datenstrom' der Grafik herstellen und zum Browser senden. Die Wirkung ist so wie im Kapitel ↑ Spektralfarben mit Canvas gezeigt, die Geschwindigkeit jedoch wesentlich geringer: PHP arbeitet zwar ähnlich schnell wie Javascript, das Programm wird jedoch (je nach Server-Konfiguration) jedesmal neu geladen und das Produkt über das Netzwerk zum Client transportiert.

Mit diesem Link wird die ↗ PHP-Grafik in einem eigenen Browser-Tab geladen. Man kann Breite und Höhe mit den GET-Argumenten w,h (am Ende der Browser-Adresszeile) wählen.

Mit diesem Link wird der PHP-Quelltext in einem eigenen Browser-Tab angezeigt.
Man kann den Text in einer Datei *.php speichern (vorher die Zeilen-Nummern mit Mausklick abschalten). Das Programm braucht zur Ausführung ein (kostenfreies) PHP-Interpreter-Programm: Dieses ist an jedem Standard-Server installiert, nicht jedoch an einem typischen Arbeits-PC.

Wenn man die beiden Zeilen am Ende des Programms (Send image... / Save file...) austauscht, dann erzeugt das Programm nicht einen Datenstrom (zum Browser) sondern eine Grafik-Datei *.jpg oder *.png, die man am Server-PC speichern kann. Damit wurde die hier verwendete Grafik-Datei erzeugt. Man kann sie - wie im Kapitel ↑ Spektralfarben mit PHP vorgestellt - anfordern und in Webseiten anzeigen.


Im Abschnitt 'Pixel-Image' wird die Grafik hergestellt:
Mit Funktion imagecreatetruecolor() wird das Grafik-Objekt hergestellt und an eine Variable (hier $img) zugewiesen.
Diese Variable dient als 'Handle' für alle folgenden Grafik-Funktionen.

Mit Funktion imagecolorallocate() wird eine Farbe definiert. Die erste definierte Farbe ($colbg) bestimmt den Hintergrund.

In 2 verschachtelten for-Schleifen werden alle Pixel der Grafik durchlaufen. Für jede Spalte $ix wird die Farbe berechnet und an die Variable $colpx zugewiesen. Diese Farbe wird mit Funktion imagesetpixel() an alle Pixel der gleichen Spalte zugewiesen.

Mit Funktion imagejpeg() wird die fertige Grafik als Datenstrom an den Browser gesendet oder als Datei gespeichert. Danach wird das Grafik-Objekt $img gelöscht.

Vergleich der Entwicklungs-Methoden

Die Bewertung durch die AnwenderInnen (Clients ist normalerweise die wichtigste:
Die Technologie soll rasch und unkompliziert verfügbar sein.
Canvas + JavascriptPHP
Die Methode funktioniert mit allen modernen Browsern,
nicht jedoch mit alten Browser-Versionen.
Die Methode funktioniert mit allen Browsern.
Beide Methoden arbeiten ohne Installation zusätzlicher Software
Canvas ist sehr schnell.
Man kann jedes Programm sofort mit interaktiv geänderten Anforderungen wiederholen.

Auf guter Hardware laufen auch Animationen absolut ruckfrei.
PHP ist schnell.
Die Lade-Zeit ist im Intranet (mit eigenem Webserver) nicht bemerkbar.
Im Internet hängt die Geschwindigkeit von der Auslastung des Servers und des Netzwerks ab. Oftmalige Wiederholung mit geänderten Argumenten ist belastend und wenig erwünscht.
Eine Animation mit dieser Methode ist ausgeschlossen.
Die Grafik wird am eigenen Arbeits-PC (Client) hergestellt.
Das Javascript Programm bleibt geladen, solange die Webseite geöffnet ist und kann daher sehr schnell wiederholt werden.
Die Grafik-Daten werden nicht transportiert, daher wird dafür auch keine Zeit verbraucht.
Die Grafik wird am Server-PC hergestellt.
Das PHP Programm wird bei jeder Anforderung erneut geladen (hängt von der Konfiguration ab)
Die meiste Wartezeit entfällt nicht auf die Herstellung sondern auf den Transport der Grafik zum Browser des Clients.
Aus Sicht eines Web-Providers (im Intranet des IT-Administrators) soll der Server alle Aufträge mit maximaler Geschwindigkeit bearbeiten.
Ein strategisches Ziel ist die rechtzeitige Vorbereitung und sparsame Umsetzung neuer Technologien.
Canvas + JavascriptPHP
Die Belastung des Servers ist gering:
Javascript-Programme sind zwar meist etwas größer als vergleichbare PHP-Programme, jedoch fast immer kleiner als die damit produzierte Grafik.

Jeder Client fordert nur eine einzige Version (der Webseite + Canvas) an, unabhängig davon, wie oft das Programm danach verwendet wird. Die Datei bleibt sogar einige Zeit im Cache-Speicher jedes Browsers für eine allfällige neue Anfrage gespeichert.
Die Belastung des Servers ist in jedem Fall größer:
Server sind zwar meist mit guter Hardware ausgerüstet und verbrauchen keine Resourcen für Desktop, Maus oder Grafik, sie müssen ihre Leistung jedoch auf alle Clients aufteilen.

Die Belastung eines Servers durch ein PHP-Programm hängt von der Anzahl jener Clients ab, die ein bestimmtes Programm anfordern und von der Anzahl der von den Clients gewünschten Wiederholungen (mit anderen GET-Argumenten).
Javascript wird Zukunft wesentlich mehr Aufgaben übernehmen: → Canvas und → Ajax spielen dabei wichtige Rollen.

Bei neuen Grafik-Entwicklungen ist → Canvas und → SVG prinzipiell zu bevorzugen.
Bei vorhandenen Pixel-Grafik Produkten kann man die Server-Last ermitteln: Wenn eine mit PHP hergestellte Pixel-Grafik oft angefordert wird, dann bietet sich eine Portierung auf Canvas an.
Die Herstellung von Pixel-Grafik mit PHP ist überholt.

Man wird zwar bewährte Software nicht ohne Grund ersetzen, aber PHP nicht mehr zur Erzeugung neuer Pixel-Grafik Produkte verwenden.
Das Beispiel dieser Seite zeigt, dass die Programme mit minimalen Änderungen auf Javascript portierbar sind.
Mit Canvas kann man auch solche Daten gut verarbeiten, die nur am Server verfügbar sind, z.B. aus einer Datenbank:
Die Daten werden mit Javascript + Ajax angefordert und mit Javascript + Canvas grafisch dargestellt.
Eine Alternative zur Pixel-Grafik ist die Erzeugung von → SVG Objekt-Grafik:
Auch SVG-Programme werden am Client-PC ausgeführt und entlasten den Server.
In der Kombination mit → XML+XSL kann man die Arbeit des Servers auf die Lieferung roher Daten beschränken und die Erzeugung der Produkte ganz an die Clients delegieren.
Die Anforderungen der Software-Entwicklung spielen nicht nur bei der erstmaligen Programmierung eine Rolle,
sondern vor allem bei den zahlreichen heute üblichen Ergänzungen und Erweiterungen.
Canvas + JavascriptPHP
Die Resourcen zur Programmierung sind (abgesehen von einem guten Web-Editor-Programm) kostenfrei.

Entwicklung und Test sind an jedem PC möglich, unabhängig vom Betriebssystem.
Man braucht einen Webserver. Die Software ( Apache, NGIИX, lighttpd, ..., PHP) ist meistens kostenfrei.
Installation und Konfiguration erfordern fortgeschrittene Kenntnisse.
Am Server eines Web-Providers oder am Intranet-Server eines Unternehmens macht man besser keine Experimente.
Als eigener Entwicklungs-Server eignet sich auch ein → virtueller Server-PC (kostenfrei) oder ein µ-PC (z.B. Raspberry um ca. $50).
Kenntnisse von Javascript sind weit verbreitet.
Die Canvas ( WebGL) Technologie ist allerdings relativ neu. Wegen fehlender oder zu geringer Erfahrung ist die Entwicklung oft langwieriger und teurer als erwartet.
Gute PHP-Grafik-Programme kann man in Minuten...Stunden auf Javascript portieren, schlechte programmiert man besser komplett neu.
Kenntnisse von PHP sind weit verbreitet.
Die Technologie ( GD-Library) ist lange bekannt und bewährt.
Javascript Programme sind öffentlich zugänglich.
Ein Schutz des geistigen Eigentums ist technisch nicht möglich.
Eine Manipulation der Programme durch Clients wird zwar oft befürchtet, ist jedoch wenig wahrscheinlich: Damit kann sich jeder Client nur selbst schaden.
PHP Programme sind für normale Clients nicht zugänglich.
Das geistige Eigentum ist daher für normale Anforderungen zuverlässig geschützt. Dazu sind keine besonderen Maßnahmen nötig.