HTML Bienenwabenhintergrund

Gressly - Freimann - EU

 
 

HTML Bienenwabenhintergrund

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:

  1. Image/Color/RGB    (damit sind Farbfilter erst möglich)
  2. Image/Color/Curves    So eingestellt, dass ein Schwarzweißbild entsteht.
  3. 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.
  4. Filters/Dissort/Emboss    mit den Werten 45°, 45° und Tiefe 1.
  5. 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.
  6. Image/Resize    auf 153, 265 (oder analoges Verhältnis aus obiger Kettenbruchentwicklung von Wurzel aus 3)
  7. Image/Indexed/-> www-optimized    damit das Bild im Internet (Zwischennetz) gut aussieht.
Philipp Home > Philipp > HTML-Wabe