HSB-Farbkreis mit Canvas

HSB-Farbkreis mit Canvas


HSB-Farbkreis

Rot   Grün   Blau
Sättigung   Hintergrund
 Helligkeit
Rechenzeit:  0 Sekunden = 0 µs / Pixel

Jeder einzelne Bildpunkt dieser Pixel-Grafik wurde Live berechnet.
Sie zeigt die Beschreibung einer Farbe im HSB-(HSV)-System:
Der Farbton (Hue) wird als Winkel 0°...H...360° angegeben.
Die Sättigung (Saturation) nimmt vom Zentrum zum Rand zu 0%...S...100%
Die Helligkeit (Brightness) wird mit dem SchiebeRegler eingestellt 0%...B...100%

Mit den Schaltern (CheckBoxen) kann man die Darstellung einzelner → RGB‑Farben ein- oder ausschalten.
Bei abgeschalteter Sättigung wird jedes Pixel mit S=100% berechnet.
Das Hintergrund-Kästchen schaltet die Sichtbarkeit des schwarzen Hintergrunds ein oder aus.


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.

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

▶ Mit RechtsKlick in die Grafik kann man sie als Datei *.png am eigenen Arbeits-PC speichern.

HTML


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.


Formatierung mit CSS

Man kann Canvas-Elemente mit → CSS formatieren, z.B. mit den Eigenschaften border, float, margin, etc.

Die Angabe des Hintergrunds ist möglich, aber nicht sinnvoll: Er wird besser mit Canvas-Anweisungen programmiert.

Die Angabe von Breite und Höhe (width, height) ist möglich, derzeit jedoch nicht zuverlässig: Verwenden sie dazu die gleichnamigen Attribute, so wie im Beispiel gezeigt.


Als kleines ↗  Icon (z.B. 32x32) wäre eine statische Grafik-Datei (2.1kiB) kleiner als das Programm .

Jede größere Grafik braucht als Datei (viel) mehr Platz und Transport-Zeit als das Canvas-Programm, z.B. bei ↗ 500x500 Pixel Größe 415 kiB (53mal so viel) .



Man kann prinzipiell jede mit Canvas erzeugte Grafik mit RechtsKlick als Datei canvas.png herunterladen. Das funktioniert unabhängig davon, ob sie direkt in einer Webseite enthalten ist oder (so wie hier) als eigenständiges Objekt eingebettet.

Die hier verwendete Mini-Webseite bietet zusätzlich die Möglichkeit, auch die Elemente zur Steuerung und die Javascript-Programme herunterzuladen:
Laden sie den ↗ Quelltext, schalten sie die Zeilen-Nummern mit Mausklick ab und speichern sie den Quelltext in einer Text-Datei *.html am eigenen Arbeits-PC.
Diese Datei lässt sich mit jedem Browser öffnen. Ohne weitere Angaben wird die Grafik in der Größe 400x400 und mit Buttons zur Steuerung angezeigt.

Canvas-Programmierung mit Javascript


Eine statische (gleichbleibende) Grafik wird meistens als Datei verwaltet, z.B. als hsb.jpg oder hsb.png (→ Grafik-Datei-Formate). Die HSB-Grafik wird in jedem Fall berechnet:
Man könnte sie mit jeder modernen Programmiersprache berechnen und in einer Datei speichern. Diese Datei hätte im Format des ↑ Live-Beispiels (275x275) eine Größe von ca. 143 kiB. Außerdem müsste man für jede weitere verwendete Größe eine weitere Datei erzeugen.

Das Canvas+Javascript Programm zur Live-Herstellung der Grafik braucht mit 8.6kiB nur ca. 6% von Speicherplatz und Transport-Zeit einer Pixelgrafik-Datei.
Zusätzlich bietet das Programm einige Möglichkeiten zur interaktiven Steuerung.


HTML + Javascript-Quelltext

 Aus diesem Quelltext hat ihr Browser die Canvas-Grafik hergestellt.. Das Canvas-Element ist allerdings nicht in dieser umfangreichen 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 + Animation hergestellt.

Das HTML <body>-Element (am Ende des Quelltextes) enthält nur das <canvas>-Element und die <button>-Elemente zur Steuerung.

Zum Malen der Grafik dient die Javascript Funktion paint()

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 + Steuerung an.



In diesem Kapitel wird gezeigt, wie man jedem einzelnen Bildpunkt einer Pixel-Grafik eine individuelle Farbe zuweisen kann. Dieser allgemeine Programm-Teil ist für alle ähnlichen Aufgaben verwendbar.
Die spezielle Programmierung der HSB-Scheibe wird kaum kommentiert. Fortgeschrittene EntwicklerInnen können sie aus dem Quelltext entnehmen.



Für jeden Bildpunkt (Pixel) wird 1 Satz von RGBA-Daten verwaltet, d.h. 4 Ganze Zahlen im Bereich 0.255 mit der Bedeutung Rot, Grün, Blau, α‑Kanal.
Die ersten 3 Zahlen geben die → RGB-Farb-Werte an, die 4. Zahl die Transparenz (α-Kanal).

Zum Malen schreibt man die RGBA-Daten der Pixel als ganzzahlige Werte 0...255 in die Array-Elemente.
Leider ist das Array (imga.data[]) nur 1-dimensional.
Man muss daher die Indices (die Nummern der gewünschten Array-Elemente) mit 'Adress-Arithmetik' berechnen: Für jedes Pixel werden 4 Array-Elemente verwaltet.


Es ist sinnvoll, in der äußeren for-Schleife (hier mit iy) alle Zeilen zu durchlaufen. Die 1.Zeile (iy=0) beginnt in der linken obenen Bild-Ecke. Alle weiteren Zeilen folgen nach unten.
Der Index des 1.Pixels der Zeile wird an die Variable ky zugewiesen.

In der inneren for-Schleife (hier mit ix) werden alle Pixel einer Zeile von links nach rechts durchlaufen. Der (Start)-Index des jeweiligen Pixels wird an die Variable k zugewiesen.

Danach schreibt man die RGBA-Daten des Pixels in die 4 folgenden Array-Elemente. Als Werte darf man nur ganze Zahlen im Bereich 0...255 verwenden.


Mit den Argumenten x,y wird der Startpunkt (linke obere Ecke) der Einfügung angegeben.



Richtung:
Die Farbe der HSB-Scheibe ändert sich mit dem Richtungs-Winkel. Die Standard ArcusTangens-Funktion von Javascript beschreibt nur einen halben Kreis, daher wird der Winkel mit der eigenen Funktion my_arctan2() für einen vollen Kreis berechnet.

RGB-Objekt:
Jede Farbe wird als Objekt mit den Eigenschaften r,g,b verwaltet. Das Objekt wird mit angle_to_hue() in der letzten Zeile dieser Funktion erzeugt und danach mit den Funktionen distance_to_saturation() und calc_brightness() verändert. Damit werden alle 3 Vorgaben von Hue (H), Saturation (S) und Brightness (B) einzeln und übersichtlich programmiert.


 

(Fern)-Steuerung mit Javascript


Wenn das Ziel lediglich in der Herstellung einer programmierten Pixel-Grafik besteht, dann kann man alle Steuerungs-Elemente weglassen und die Größe des Quelltextes stark reduzieren.

Im umgekehrten Fall werden hier für fortgeschrittene EntwicklerInnen einige Tricks zur (Fern)-Steuerung einer programmierten Grafik vorgestellt.



Das ↑ Live-Beispiel dieser Seite verwendet ein HTML-Formular zur Fernsteuerung der Mini-Webseite, die als externes Dokument eingebettet ist.

Wenn man die Grafik ↗ alleinstehend ladet und wenn sie groß genug ist, dann werden die darin enthaltenen Buttons zur manuellen Steuerung angezeigt.



Diese Methode ist bei → PHP-Programmen weit verbreitet. Man kann sie auch mit → Javascript problemlos verwenden. Die Funktion get_arguments_decode() dient allgemein zur Decodierung beliebiger GET-Argumente, die beiden Funktionen size_process() und controls_process() führen spezielle Arbeiten aus.


Feedback

Ein eingebettetes Dokument kann auch Funktionen seines parent-Dokuments ausführen. In diesem Beispiel wird die Zeit zur Herstellung der Grafik gemessen und an das parent-Dokument gemeldet.

Die Funktion parent_info() versucht, die gemessenen Daten an eine Funktion canvas_info() des parent-Dokuments weiterzugeben. Damit wird hier die Zeit zur Herstellung jeder Grafik Live angezeigt.

Wenn die parent-Funktion nicht existiert, dann wird kein weiterer Versuch gemacht, Feedback-Daten zu senden.



Man kann Sichtbarkeit der Buttons mit dem GET-Argument GET[controls] ausdrücklich anordnen. Als Werte sind viele Ausdrücke möglich, z.B. Null, 0, False, F, Nein, No bzw. 1, Ja, J, True, T, Yes, Y
Die zahlreichen möglichen Werte sind in der Funktion controls_process() in nur 2 Zeilen programmiert.

Jeder Button enthält ein onclick-Attribut, mit dem die auszuführende Funktion angegeben ist.



Jeder Button enthält ein onclick-Attribut, mit dem die auszuführende Funktion angegeben ist. Man kann jede dieser Funktionen (z.B. do_red() ) sowohl mit Fernsteuerung als auch mit lokaler Steuerung (Klick auf den Button) ausführen.

Jede der Event-Handler-Funktionen enthält am Ende die Anweisung paint(), mit welcher die Grafik neu gemalt wird.