Motivation
Sich wiederholende Bildschirmhintergründe sind üblicherweise rechteckig angeordnet.
Manchmal wollen wir aber als Bildschirmhintergrund ein Wabenmuster erhalten. Dies ist technisch mit dem folgenden Trick möglich.
Wie wird eine 6-Eck-Wabe erzeugt
Da in HTML ein Hintergrundbild nur rechteckig sein kann, ist es nötig,
ein Seitenverhältnis des Rechtecks zu finden, das eine 6-Eck-Struktur
enthalten kann, um ein Bienenwabenmuster als Bildschirmhintergrund zu konfigurieren.
Dieses Verhältnis hat mit der Breite und Höhe eines 6-Ecks zu tun.
Da ein 6-Eck aus 6 gleichseitigen Dreiecken besteht und sich im
gleichseitigen Dreieck die halbe Grundseite zur Höhe wie 1 zu Wurzel aus 3
verhält, müssen sich auch die Rechtecksseiten wie 1 zu Wurzel aus 3
verhalten.
Wurzel aus 3
Die Wurzel aus 3 hat folgende Kettenbruchentwicklung:
sqrt(3) = [1; 1, 2]
Also ergeben sich folgende möglichen Rechtecks-Seitenverhältnisse (pk und qk), um
eine Wabe darin zu zeichnen.
| k | ak | pk |
qk
| % |
| 0 | 1 | 1 | 1 | 42.26 |
| 1 | 1 | 2 | 1 | 15.47 |
| 2 | 2 | 5 | 3 | 3.775 |
| 3 | 1 | 7 | 4 | 1.036 |
| 4 | 2 | 19 | 11 | 0.2759 |
| 5 | 1 | 26 | 15 | 0.07405 |
| 6 | 2 | 71 | 41 | 0.01983 |
| 7 | 1 | 97 | 56 | 0.005314 |
| 8 | 2 | 265 | 153 | 0.001424 |
Dabei ist
p0 = a0
p1 = a0·a1 + 1
pk = pk-1·ak + pk-2
q0 = 1
q1 = a1
qk = qk-1·ak + qk-2
% der relative Fehler in Prozenten
Dieser Hintergrund verwendet das Verhältnis 265 : 153.
Die Bodenfliesen von Barcelona
Dieser Hintergrund stammt von Barcelona. In unseren Ferien im
September 1998 haben wir auf einem Stadtrundgang in der Katalanischen
Hauptstadt sechseckige Bodenfliesen gesehen. Das war der Ansporn
zu diesem Hintergrundbild. Die Bilder
Barcelona2.jpg und
Barcelona3.jpg sind mit dem Programm
HexPaint.java und GIMP (Gnu Image Manipulating Project) generiert.
HexPaint.java kann von hier heruntergeladen werden (oder mit SHIFT-Klick).
Im GIMP habe ich folgende Filter ausgeführt:
- Image/Color/RGB (damit sind Farbfilter erst möglich)
- Image/Color/Curves So eingestellt, dass ein Schwarzweißbild
entsteht.
- Image/Scale by "value" Der Wert ist so zu wählen, dass a) ein
Seitenverhältnis von 1 zu Wurzel aus 3 entsteht und b) sich der
gewählte Ausschnitt genau parkettieren lässt.
- Filters/Dissort/Emboss mit den Werten 45°, 45° und Tiefe
1.
- Image/Color/Brightness/Contrast Für das helle Bild mit den
Werten 127, 0 und für das dunkle Bild mit den Werten 21, -80.
- Image/Resize auf 153, 265 (oder analoges Verhältnis aus
obiger Kettenbruchentwicklung von Wurzel aus 3)
- Image/Indexed/-> www-optimized damit das Bild im
Internet (Zwischennetz) gut aussieht.
