Das Zikaden-Prinzip – The Cicada Principle und warum es Webdesigner etwas angeht

3D CSS Box Model Diagramm von Jon Hicks.

Dieser Artikel stammt von Alex Walker. Ich habe ihn nur übersetzt. Hier geht es zum englischsprachigen Original. Alle Abbildungen sind dem Original-Artikel entnommen.

Heute hole ich etwas weiter aus — aber lest bis zum Ende. Ich habe wirklich meine Gründe.

Vor einigen Jahren las ich etwas interessantes über Zikaden.Im Allgemeinen sieht man nicht viel von diesen Kerlchen, weil sie die meiste Zeit ihres Lebens unter der Erde verbringen, Tunnel bauen und an Wurzeln knabbern.

Aber abhängig von der Art, schlüpfen sie alle 7, 13 oder 17 Jahre in Massen, verwandeln sich in laute, fliegende Wesen, finden einen Geschlechtspartner und sterben kurz darauf.

Auch wenn dieses Ende was von Rock’n Roll hat, wirft es doch eine naheligende Frage auf: ist es Zufall, dass sie einen 7-, 11- oder 13jährigen Lebenszyklus haben, oder sind diese Zahlen etwas besonderes?

Klar, diese Zahlen haben etwas gemeinsam: Es sind alles Prim-Zahlen – Zahlen also, die sich nur durch 1 und durch sich selber teilen lassen (1, 2, 3, 5, 7, 11, 13, 17, 19, 23, und so weiter).

Warum ist das wichtig?

Die Forschung hat herausgefunden, dass die Fressfeinde der Zikaden — typischerweise Vögel, Spinnen, Wespen, Fische und Schlangen – nicht länger als sechs Jahre leben.

Also wenn die Zikaden alle, sagen wir, 12 Jahre schlüpfen würden, könnten sich die Fressfeinde insofern anpassen, dass zu dem entsprechenden Zeitpunkt die eigene Population besonders groß wäre. Tatsächlich würden Sie vermutlich einen Feiertag einrichten: Zikadentag!

Das ist nicht sehr lustig, wenn man eine Zikade ist.

Falls die Brut einer 17-Jahr-Zikaden-Generation so unglücklich wäre, genau die starken Jahrgänge einer 3-Jahres Wespenpopulation zu erwischen, dauerte es 51 Jahre bis sich dieses Ereignis wiederholt. In den Jahren dazwischen können die Zikaden fröhlich weiterschlüpfen — zu zehntausenden, die Population der Räuber regelrecht überschwemmen und zum größten Teil in Frieden leben.

Erfinderische Kerlchen, oder?

Das ist super. Aber was hat es mit Webdesign zu tun?

Vor ein paar Wochen haben wir (auf designfestival.com Anmerkung des Übersetzers) die Herstellung übergangsloser Kacheln betrachtet. So supernützlich übergangslose Kacheln auch sind, kann es doch sehr schwer sein, die richtige Balance hinzubekommen. Einerseits möchte man die Dateigrößen so klein wie möglich halten, um den größtmöglichen Nutzen aus der Kachelung zu ziehen. Wenn man aber ein erkennbares Motiv findet — zum Beispiel ein Astloch in einer Holzstruktur — das in regelmäßigen Abständen auftaucht, wird die Illusion einer organischen Struktur zerstört.

Vielleicht sollten wir uns von den Zikaden eine Idee borgen?

Organische Strukturen mit CSS erzeugen

Beispiel 1:

Genug gequatscht: Hier kommt ein schneller Beweis dafür, dass das Konzept funktioniert. Es wird kein optischer Leckerbissen sein, eignet sich aber prima dafür, zu zeigen worum es geht. Mit dem “Zikaden-Prinzip” im Hinterkopf habe ich drei teiltransparente quadratische PNGs erstellt, mit 23, 37 und 53 Pixeln Kantenlänge und habe diese dann als multiple Hintergründe auf meiner Webseite eingebunden.

29x29px29-a.png (2.0kb) 37x37px37-a.png (1.7kb)53x53px53-a.png (2.5kb)

html {
background-image: url(29-a.png),url(37-a.png), url(53-a.png);
padding:0;
margin:0;
height: 100%;
}

Hier ist das Ergebnis.

Wie man sieht überlappen sich die Bilder und bilden zusammen neue Muster und Farben. Und weil wir die magischen Primzahlen verwenden, wiederholt sich dieses Muster nicht — für eine sehr, sehr lange Zeit.

Wie lange genau dauert es, bis das Muster wieder auftaucht? 29 × 37 × 53 Pixel… oder 56.869 Pixel!

Das war für mich eine Art Offenbarung! Ich musste meine Berechnung dreimal wiederholen, aber das Ergebnis steht felsenfest. Nur zur Erinnerung: das sind winzige Bildchen, weniger als 7kb alle zusammen. Dennoch generieren sie eine Fläche mit einer Breite von fast 57.000 Pixeln.

Es ist leicht, sich vorzustellen, was passiert, wenn man eine vierte Ebene von Kacheln hinzufügt, sagen wir eine 43 Pixel breite Kachel. Oder villeicht ist es doch nicht so leicht, sich das vorzustellen, weil die Zahl ziemlich erschlagend wirkt, wenn man sie zu lange anstarrt.

Jedenfalls haben wir hier es mit Zahlen zu tun, die eher was mit Terraforming zu tun haben, als mit Webdesign.

OK, abstrakte, geometrische Streifen sind nett und alles, aber was kann man noch mit dieser Idee anstellen?

Beispiel 2

Nehmen wir ein mehr fotorealistisches Beispiel, das wohl jeder von uns irgendwann mal gesehen hat: den roten Samtvorhang eines Theaters. Ich habe ein nettes Bild von einem Vorhang gefunden, das ich als Ausgangspunkt verwenden konnte. Wenn man den Vorhnag betrachte, sieht man, dass man das Bild in ungefähr gleich große Abschnitte teilen kann. Für dieses Beispiel nenne ich diese Breite eine “Falteneinheit” und (im Gegensatz zum ersten Beispiel) ist dies hier wichtiger, als die genauen Pixel der Bilder, mit denen wir arbeiten.

Zunächst nehme ich eine der Falten und erstelle daraus eine übergangslose Kachel. Das erstellte JPEG hat nicht mehr als 8 kByte.

Benutzt man nur diese Grafik, so hat sie alles, was wir an gekachelten Hintergründen nicht mögen. Zwar gibt es keine sichtbaren Übergänge, aber das Ergebnis ist sehr künstlich und kann niemanden überzeugen.

Für die zweite Ebene benutzen wir die Primzahl drei. Ich nehme einen weiteren Bereich aus dem Bild mit den Vorhängen und packe es in ein transparentes PNG, das drei Falteneinheiten breit ist. Rechts und links habe ich einen weichen, teiltransparenten Übergang hinzugefügt. Das Ergebnis ist eine knapp 15kByte große Datei. Wenn wir das nun über unsere erste Ebene legen, erhalten wir auf jeden Fall eine Verbesserung.Es kommt immer noch zu einer unnatürlich häufigen Wiederholung des Musters kommt, aber der Effekt ist deutlich gemildert.

Die magische Nummer für unsere dritte Ebene ist sieben. Wir fertigen ein neues transparentes, sieben Falteneinheiten breites PNG an, und ich füge zwei neue Faltenbereiche an den Positionen 3 und 6 ein. Falls das etwas verwirrend ist, sollte die Darstellung hier die Dinge deutlicher machen. Wieder blende ich die Kanten dieses Bildes aus, um einen weicheren Übergang zu den anderen Ebenen zu gewährleisten.

Offensichtlich ist dieses Bild größer, sowohl was seine Abmessungen betrifft, als auch in Bezug auf die Größe der Datei, aber immer noch bleibt es bei etwa 32kByte – nicht gerade übermäßig.

Hier sieht man, was passiert, wenn wir diese Kachel über die bisherigen zwei legen. Ich bin sehr glücklich über das Ergebnis. Klar kann das Auge noch schmale Streifen finden, die sich zu wiederholen scheinen (weil sie es tun), aber die darunter liegenden Muster sind so komplex, dass das Auge nicht weiter nach Ähnlichkeiten sucht.

Um es auf eine andere Weise zu betrachten, behandeln wir jede Falte als eine Nummer und die Nummern, die das ergibt sind: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3,..

Es gibt da noch ein Muster, aber es ist sehr schwer zu entdecken.

In diesem Beispiel hat uns ein nahezu unendlicher Vorhang gerade einmal 53kByte gekostet und selbstverständlich ist es recht simpel eine vierte Ebene hinzuzufügen — vielleicht 11 Einheiten breit — wenn wir es wollten. Ich bin nicht davon überzeugt, dass wir das hier benötigen.

Um es noch mal klar zu machen: dieses Beispiel benutzt den einfachsten möglichen Satz an Primzahlen — 1, 3 und 7. Verwendet man dagegen, sagen wir, 11, 13 und 17, erhält man wesentlich komplexere Variation für eine vorgegebene Distanz. Es kommt nur darauf an, die Abmessungen des Vorhangs gegen die breite der Monitore abzuwägen.

Beispiel 3

Mein letztes Beispiel verfolgte weniger einen praktischen Zweck, als dass es Spaß bereiten sollte im Umgang mit Primzahlen. Dieses Mal werde ich die Theorie nicht mehr erläutern, da das Prinzip dasselbe ist, wie bei den zwei ersten Beispielen, aber ich lade herzlich dazu ein, es mit Firebug zu zerlegen und zu untersuchen.

Vor 2.200 Jahren hat der Kaiser Qin Shihuangdis eine 8.000 Mann starke Armee aus Terracotta erbauen lassen, um sein Grab zu bewachen. Jeder Soldat, jeder Streitwagen, jede Waffe ist eine  einzigartige, handgearbeitete Schöpfung.

Mittels CSS, Primzahlen und einer handvoll Bildern, heben wir unsere eigene gewaltige Armee aus. Was ihr an körperlicher Größe fehlt, machen wir mit schierer Masse wett.

Ich gebe Euch… meine gewaltige Lego-Armee!

Die Legion setzt sich aus acht Bildern zusammen, die sich vermischen und miteinander verbinden um tausende von Variationen zu bilden. Benutzt werden:

  • 2 Bilder für den Hintergrund
  • 2 Bilder für die Beine
  • 2 Bilder für die Rümpfe
  • 2 Bilder für die Köpfe

Zusammnfassung

Während ich mit dieser Idee herumgespielt habe, bin ich auf drei Prinzipien gekommen, die zu funktionieren scheinen. Erstens scheint es sinnvoll zu sein, die Ebenen wie eine auf den Kopf gestellte Pyramide übereinander zu stapeln. Die unterste Ebene kann aus einem kleinen Bild erstellt werden, das sich oft wiederholt, weil es zum größten Teil später von anderen Bildern überlagert wird. tatsächlich ist es wahrscheinlich, dass nur 20% bis 40% davon sichtbar bleiben.

Andererseits sollte die oberste Schicht von einem großen Bild bedeckt werden, dass am dünnsten mit Bildelementen besetzt ist (und ansonsten transparent ist, Anmerkung des Übersetzers), weil diese Schicht nicht mehr von weiteren Ebenen verdeckt wird und somit komplett sichbar ist. Daher ist es ratsam, in der obersten Ebene keine auffälligen Details zu verwenden, die die Aufmerksamkeit auf sich ziehen. Füllen Sie diese Lage knapp und allgemein.

Dennoch ist probieren und experimentieren fast immer notwendig.

Browser Support

Ich habe das Markup einfach gehalten, indem ich multiple Hintergründe für ein Element verwendet habe. Das wird von allen wichtigen Browsern in der aktuellen Version unterstützt (Firefox 4, Chrome 10, IE9, Opera 11, Safari 5), aber nicht von älteren Browsern. Falls ältere Browser unterstützt werden sollen, kann es eine mögliche Option sein, html, body und eventuell ein div zu benutzen. Obwohl dieses Container-Element semantisch nicht nötig ist, stellt es viele weitere Möglichkeiten für die gesamte Site zur Verfügung und bedeutet nur ein kleines Zugeständnis. Das muss jeder für sich entscheiden.

Diese drei Beispiele sind die ersten Ideen, die mir überhaupt in den Kopf gekommen sind, aber ich bin mir sicher, es gibt einige sehr viel bessere Verwendungen für diese Idee. Vielleicht:

  • eine endlose Stadtansicht
  • sich nicht wiederholende Holzmaserung
  • Sternenhimmel
  • dichter Dschungel
  • Wolkenformationen

Wenn Sie für diese Technik eine gelungene Anwendung haben, würde ich diese gerne sehen.

Das war der Artikel von Alex Walker. Mehr Beispiele gibt es auf der Cicada-Project-Seite. Dort können auch eigene Ideen eingereicht werden. Und der Clou: die beste Idee gewinnt ein iPad2!

Übersetzung: Marc Haunschild

1 thought on “Das Zikaden-Prinzip – The Cicada Principle und warum es Webdesigner etwas angeht

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert