Von „http://www.julian-fietkau.de/blog/spielerei_mit_streifenbildern“

Spielerei mit Streifenbildern

2010-10-10 15:57:43

Stichwörter: Absonderliches, Computergrafik, Psychologie

Heute gibt's mal wieder etwas völlig anderes. Ich möchte euch eine Idee zeigen, mit der ich vor einiger Zeit mal herumexperimentiert habe, die mit der Wahrnehmung von teilweise verdeckten Bildern zu tun hat. Die Idee stammt aus einem Video, das ich vor langer Zeit mal gesehen habe. Dort hat jemand diesen Effekt mit schwarzen Silhouetten erzeugt. An dieser Stelle bin ich mutig und versuche es direkt mit einem Farbbild, allerdings einem einfachen. Hier ist eine Spirale:

Eine rot-weiße Spirale

Für dieses Experiment brauchen wir ein leicht erfassbares, nicht zu detailliertes Bild. Dafür ist diese Spirale gut geeignet. Wir brauchen allerdings auch eine Bewegung im Bild, deshalb lassen wir die Spirale außerdem um ihren Ursprung rotieren:

Die gleiche Spirale wie oben, sich gegen den Uhrzeigersinn drehend

Diese Animation besteht aus acht Einzelbildern, auf die wir weiter unten zurückkommen.

Nun hat das menschliche Gehirn über Millionen Jahre der Evolution die Fähigkeit entwickelt, auch teilweise verdeckte Formen und Objekte erkennen zu können. Wie das genau funktioniert ist nicht abschließend geklärt. Als Grund drängt sich die Vermutung auf, dass das Gehirn mit diesen internen Hilfen nicht den kompletten Input des Auges braucht und überlebenswichtige Erkennungsvorgänge auch z.B. im Dunkeln mit nur teilweise vorhandenen Bildinformationen funktionieren können. Der Effekt lässt sich auch gezielt hervorbringen um eine Form vorzutäuschen, die so gar nicht existiert, wie bei der berühmten Dreiecksillusion. Selbst wenn wir 7/8 der (unbewegten) Spirale verdecken, glauben wir weiterhin, eine Spirale zu sehen.

Die gleiche Spirale wie oben, statisch und größtenteils mit schwarzen Streien überdeckt

Unser Gehirn "sieht" das Motiv weiterhin und verbindet die scheinbar verdeckten Kanten. Das funktioniert, obwohl der Informationsgehalt des Bildes (d.h. die Anzahl der zum Bild beitragenden Pixel) um 87,5% reduziert wurde!

Natürlich klappt das nicht mit jedem Motiv - im Gegenteil, bei den meisten aller möglichen Bilder funktioniert es zu schlecht, um vorzeigbar zu sein. Die "Komprimierung" kommt dadurch zustande, dass der Betrachter die Lücken im Bild mit Informationen befüllen muss, die er bereits vorher besitzt. (Jeder weiß, wie eine Spirale aussieht, und tut dies unbewusst.) Bei unbekannten Bildern oder solchen mit vielen kleinen Details schlägt das Prinzip fehl.

Allerdings können wir mit unserer Spirale Folgendes tun: Wir können die Maske auf ein leeres, weißes Bild legen und nur durch die dünnen Lücken der Maske einige Streifen unseres Spiralbilds auftragen. Dann können wir die Maske um eine Spaltbreite nach links oder rechts verschieben, so dass die gerade platzierten Streifen gerade so verdeckt sind. Dann können wir durch die Lücken in der Maske auf die (nun wieder weißen) Streifen ein weiteres Bild auftragen. In diesem Beispiel beschränken wir uns darauf, dort die jeweils passenden Streifen des nächsten Einzelbilds der Animation einzufügen. Das Prinzip können wir dann munter fortführen und weitere sechs Teilbilder einfügen, bis wir wieder (um einen "Balken" der Maske verschoben) beim Originalbild angekommen sind.

Wenn wir fertig sind, dann sieht das Bild unter der Maske ziemlich genau so aus:

Komposition, die aus Segmenten der Spirale von oben in verschiedenen Drehwinkeln zusammengesetzt ist

Und jetzt der Clou: Wenn wir jetzt die Maske langsam nach links oder rechts bewegen, dann sieht es so aus als würde sich die Spirale drehen, obwohl nur ein einzelnes starres Bild unter der Maske liegt.

Das gleiche Bild wie eben, über dass sich zusätzlich schwarze Streien von rechts nach links bewegen. Es entsteht der Eindruck einer rotierenden Spirale.

Es gibt keine Tricks oder doppelte Böden - das einzige, was sich in der obigen Animation bewegt, ist die Maske. Das darunterliegende Bild, das aus den Einzelbildern der Spiral-Animation zusammengesetzt ist, ist dabei völlig starr.

Wer mir das anhand der vorgefertigten Animation noch nicht glaubt, der darf auch gerne selbst mal damit herumspielen. Es folgt ein bisschen HTML/CSS-Code, die die Maske über das zusammengesetzte Bild legt, so dass sie per Scrollbalken bewegbar ist.

Hoppla, anscheinend kann dein Browser oder Feedreader dies nicht anzeigen. Wenn du das Ergebnis sehen möchtest, besuche doch bitte diesen Blogeintrag auf meiner Webseite mit einem modernen, CSS-fähigen Browser.

Was kann man mit dieser Idee anfangen? Ich hatte noch keine bahnbrechende Idee für Einsatzmöglichkeiten. Es klappt allerdings immerhin auch prima in ausgedruckter Form auf Papier, anders als GIF-Animationen. Vielleicht gibt es solche Motive irgendwann als Postkarten... Wie gesagt, es ist eine nette kleine Spielerei, finde ich.

Kommentare

Bitte geben Sie in die folgenden drei Textfelder nichts ein, sie dienen dem Schutz vor unerwünschten automatischen Eingaben. Wenn hier etwas eingetragen wird, wird der Kommentar nicht gespeichert!




Ende der Falle - ab hier bitte das Formular ausfüllen.

Textformatierung in Kommentaren erfolgt per Markdown.

Hervorhebung *Hervorhebung* oder _Hervorhebung_ (innerhalb einer Zeile)
Starke Hervorhebung **Starke Hervorhebung** oder __Starke Hervorhebung__ (innerhalb einer Zeile)
Neuer Absatz eine Leerzeile einfügen

Zitat

> Zitat
  • ungeordnete
  • Liste
* ungeordnete
* Liste
  1. geordnete
  2. Liste
1. geordnete
2. Liste
Weblink [Weblink](http://www.julian-fietkau.de)
Hinweis: Nur per OpenID authentifizierte Benutzer können Weblinks setzen.
Ausführliche Beispiele gibt es bei Daring Fireball.
Anton Brand
Anton Brand
2013-01-20 19:58:01

In unserem Wahrnehmungsmuseum www.villa-sinnenreich.at habe ich diesen Effekt an der Wand erzeugt durch ein schwarzes Holzgitter,das vor einem leicht schrägen Streifenraster an der Wand hin und her schwingt. Das erzeugt dann inn der Wahrnehmung dicke schräg verlaufende Balken. Dein Muster wäre schön in einer Tisch-Box, bei der man eine Streifenfolie rundherum über Walzen langsam weiter dreht. - wichtig ist immer, das selber langsam zu machen.