Sie sind hier: Magische Bilder

Magische Bilder

Freitag 16. November 2007 von
Simon Praetorius
Ein magisches BildEin magisches Bild
Wer kennt sie nicht, die magischen 3D-Bilder. Es gibt schon ganze Bücher voll damit. Für die Unwissenden unter euch: Das sind Bilder, die aus einem Muster oder einer Struktur bestehen und auf den ersten Blick ganz wirr aussehen. Wenn man allerdings mit der richtigen Technik auf diese Bilder schaut, erheben sich (magisch) 3-dimensionale Objekte aus der Bildmitte. Der Reiz besteht darin, diese Objekte richtig zu erkennen.

Doch, wie funktioniert das denn? Wie kann bei "unscharfem" hinschauen was anderes sichtbar werden, als bei "scharfem"? Unser Auge kann 3-dimensional sehen, da die betrachteten Objekte aus zwei leicht versetzen Perspektiven gesehen werden. Deswegen haben wir auch 2 Augen :) . Wenn man nun einen Punkt fixiert, stellen sich beide Augen auf diesen Punkt ein. Vereinfacht ausgedrückt, treffen sich an diesem Punkt die Sehstrahlen der Augen. Behält man nun diese Augeneinstellung bei und bewegt das Objekt näher zu den Augen hin, werden von den Augen zwei dicht bei einander liegende Punkte fixiert, aber nicht mehr der selbe Punkt. Dies nutzt man bei den magischen Bildern aus und verzerrt das Muster, wenn eine 3-dimensionale Wirkung entstehen soll, entsprechend.

Ich habe dazu mal ein kleines Programm geschrieben, was solche Bilder erzeugt. Einige erzeugte Bilder könnt ihr euch hier anschauen:

Bild
Bild
Bild
Bild
Bild
Bild
Bild
Bild


Jetzt seid ihr gefragt. Was ist auf den Bildern zu sehen. Manche sind wirklich schwer. Schreibt die Lösung einfach in die Kommentare!

Nochmal die Anleitung, wie man die 3D-Objekte sehen kann: Haltet euch das Bild relativ nahe vor die Augen, versucht nun die Aktuelle Augeneinstellung beizubehalten und bewegt das Bild ganz langsam nach vorne/hinten. Wenn ihr das Gefühlt habe, dass da was erscheinen könnte, dann bleibt bei der Stelle und bewegt das Bild nur sehr leicht.
Ein anderes Vorgehen ist, einen Punkt im Raum zu fixieren und sich da die ganze Zeit drauf zu konzentrieren. Dann das Bild langsam in den Blickbereich schieben, ohne dabei die Augeneinstellung zu verändern. Dann wieder das Bild nach vorne oder hinten bewegen, bis das 3D-Objekt erscheint.

Das Programm zum Erzeugen der Bilder habe ich ganz plump in PHP geschrieben, ohne viele Fehlerkontrollen oder Sonstiges - Hauptsache es funktioniert und erfüllt seinen Dienst Smily (wink) Zwei Varianten stehen zur Verfügung. Die erste ist nach dem einfachsten Verfahren konzipiert: Je nach "Höhenunterschied" im Reliefbild (das entspricht dem Helligkeitsgrad) wird das Muster etwas "zusammengedrückt" oder normal dargestellt. Der Algorithmus zeichnet dann von links beginnend die einzelnen Pixel mit dem berechneten Farbwert.
php Code
  • <?
  • $muster = @ImageCreateFromJPEG ("muster.jpg");
  • $relief = @ImageCreateFromJPEG ("relief.jpg");
  •  
  • // Breite und Höhe von Quellbild und Muster auslesenn
  • list($w,$h) = getImageSize("muster.jpg");
  • list($breit,$hoehe) = getImageSize("relief.jpg");
  •  
  • if ($muster && $relief) {
  • $img = imageCreateTrueColor ($breite, $hoehe);
  •  
  • $weiss = ImageColorAllocate ($relief, 255, 255, 255);
  • $schwarz = ImageColorAllocate ($relief, 0, 0, 0);
  •  
  • // Pixel für Pixel das 3D-Bild erzeugenn
  • for($z=0; $z<$hoehe; $z++) {
  • for($s=0; $s<$breite; $s++) {
  • if($s/$w<1)
  • $newColorindex = imageColorAt($muster,$s,$z%$h);
  • else {
  • $colorindex = imageColorAt($relief,$s,$z);
  • $p = $colorindex / $weiss;
  • $pos = $s - (1 - 0.25*$p)*$w;
  •  
  • $newColorindex = imageColorAt($img,$pos,$z);
  • }
  •  
  • imageSetPixel($img,$s,$z,$newColorindex);
  • }
  • }
  •  
  • if(imageJpeg($img,"resultat.jpg"))
  • echo 'Bild wurde erstellt.';
  • }
  • ?>

Die zweite Variante ist etwas verbessert, da die Ergebnisbilder nicht zu sehr verzerrt werden. Der Algorithmus fängt in der Mitte des Bildes an und setzt dann nach dem selben Verfahren, wie oben, nach rechts und links fort.
php Code
  • <?
  • $musterFileName = "muster.jpg";
  • $reliefFileName = "relief.jpg";
  •  
  • $muster = @ImageCreateFromJPEG ($musterFileName);
  • $relief = @ImageCreateFromJPEG ($reliefFileName);
  •  
  • list($musterBreite,$musterHoehe) = getimagesize($musterFileName);
  • list($reliefBreite,$reliefHoehe) = getimagesize($reliefFileName);
  •  
  • if ($muster && $relief) {
  • $img = imagecreatetruecolor ($reliefBreite, $reliefHoehe);
  •  
  • $weiss = ImageColorAllocate ($relief, 255, 255, 255);
  • $schwarz = ImageColorAllocate ($relief, 0, 0, 0);
  •  
  • $faktor = 0.2;
  •  
  • // mittleren Muster-Streifen zeichnen
  • $mitte = (int)( $reliefBreite/2 );
  •  
  • echo "Reliefbreite: ".$reliefBreite."<br />";
  • echo "Reliefhoeh: ".$reliefHoehe."<br />";
  • echo "Musterbreite: ".$musterBreite."<br />";
  •  
  • for($z=0;$z<$reliefHoehe;$z++) {
  • for($s=0;$s<$mitte;$s++) {
  • // Nach links Muster fortsetzen
  • $colorindexLinks = imagecolorat($relief,$mitte-$s-1,$z);
  • $pLinks = $colorindexLinks / $weiss;
  • $posLinks = (int)( (1 - $faktor*$pLinks)*$musterBreite );
  • if(2*$s<$posLinks)
  • $newColorindexLinks = imagecolorat($muster,(-$s-1+$posLinks+$musterBreite)%$musterBreite,$z%$musterHoehe);
  • else
  • $newColorindexLinks = imagecolorat($img,$mitte-$s-1+$posLinks,$z);
  • imagesetpixel($img,$mitte-$s-1,$z,$newColorindexLinks);
  •  
  • // Nach Rechts Muster fortsetzen
  • $colorindexRechts = imagecolorat($relief,$mitte+$s,$z);
  • $pRechts = $colorindexRechts / $weiss;
  • $posRechts = (int)( (1 - $faktor*$pRechts)*$musterBreite );
  • if(2*$s<$posRechts)
  • $newColorindexRechts = imagecolorat($muster,($s-$posRechts+$musterBreite)%$musterBreite,$z%$musterHoehe);
  • else
  • $newColorindexRechts = imagecolorat($img,$mitte+$s-$posRechts,$z);
  • imagesetpixel($img,$mitte+$s,$z,$newColorindexRechts);
  • }
  • //eventuell zusätzlichen rechten Streifen einfügenen
  • if(($reliefBreite-$musterBreite)%2==1) {
  • $colorindexRechts = imagecolorat($relief,$reliefBreite-1,$z);
  • $pRechts = $colorindexRechts / $weiss;
  • $posRechts = $reliefBreite-1 - (1 - $faktor*$pRechts)*$musterBreite;
  • $newColorindexRechts = imagecolorat($img,$posRechts,$z);
  • imagesetpixel($img,$reliefBreite-1,$z,$newColorindexRechts);
  • }
  • }
  •  
  • if(imagejpeg($img,"resultat.jpg"))
  • echo 'Bild wurde erstellt.';
  • }
  • ?>

Eine ReliefgrundlageEine Reliefgrundlage
Im Program habe ich auf zwei Bilder verwiesen (relief.jpg und muster.jpg). Diese sollten sich im selben Verzeichnis wie die PHP-Datei befinden, damit sie gefunden werden. Das Relief ist eine Grafik, die die selben Ausmaße wie das Endbild haben muss. Der Hintergrund wird schwarz gefärbt und um so weißer das Bild wird, um so höher erscheint das Objekt im 3D-Bild. Oftmals habe ich die Bilder nur aus 2 Farbe erstellt, damit die Kanten im 3D-Bild deutlicher zu sehen sind und es somit einfacher wird die Objekte zu erkennen. Auf den von mir erstellten Bildern sind unter Anderem dieses Fahrrad, eine Ente, ein Apfel, Hund oder Schmetterling zu sehen.

Eine MusterbildEine Musterbild
Das zugrunde liegende Muster ist so zwischen 50 und 75 Pixel groß und sollte im 3D-Bild nicht breiter sein, als der Abstand der Augen, d.h. etwa 2-3cm. Musterdateien findet man z.B. über Google.
Besucher: 133894 | Permalink | Kategorie: Nicht eingeordnet
Tags: ,

12 Kommentare

  1. Freitag 02.05.2008 01:23 von
    Seleya

    kann das jeder?!

  2. Freitag 02.05.2008 14:26 von
    Simon

    Es kann fast jeder! Die Schwierigkeit besteht darin, die Augen die Bilder nicht automatisch scharf stellen zu lassen, sondern das bewusst zu unterdrücken. Es gibt ein paar Tricks, wie oben beschrieben, aber das kann dann trotzdem noch nicht jeder. Es ist sicher einfacher, wenn man sich die Bilder ausdruckt, als am Bildschirm zu machen. Da geht das zwar auch, ist aber viel anstrengender, als auf Blatt Papier.

  3. Sonntag 01.06.2008 01:30 von
    celebro

    ist nicht schlecht
    aber kein richtiger kontrast man erkent die sachen zb. den apfel nicht richtig die pyramide dagegen ist sehr gut

  4. Sonntag 08.06.2008 13:37 von
    Simon

    @celebro Wenn du dich ein wenig mit dem Verfahren auskennst, würde ich mich über einen Tipp freuen, wie ich mein kleiner Programm noch verbessern kann. Ich z.B. fand die Pyramide recht schwierig, andere Bilder dafür einfach.
    Leider sehen die Resultate noch nicht so gut aus, wie in den diversen Heften und Büchern, aber das Prinzip funktioniert schon.

  5. Freitag 31.07.2009 17:10 von
    pati

    das dritte von links ist ein schmetterling^^

  6. Mittwoch 30.06.2010 18:59 von
    schachi

    komplett geil!! ^^

  7. Mittwoch 21.07.2010 21:30 von
    B

    müll

  8. Dienstag 03.08.2010 23:42 von
    Yusuf

    ich würd sagen:

    1. Altes Fahrad
    2. Schmetterling
    3. Schmetterling
    4. Schmetterling
    5. Apfel
    6. Tier (Hund oder Katze, könnter auch panter sein ist halt am sitzen)
    7. glaube Pyramide von oben
    8. Apfel
    aber ist echt geil, nicht jeder ist dazu fähig und geben schnell auf. :D

  9. Sonntag 08.08.2010 20:43 von
    jule

    1)hochrad
    2)Schmetterling
    3)Apfel
    4)Foxterrier
    5)Pyranide Luftanlicht
    6)Apfel

    meine mutter sieht auf einem auge sehr schlecht
    die hat keine chance
    aber ich find total super
    hab gehört da gibts ganze bücher!

  10. Dienstag 04.10.2011 03:52 von
    Heiko

    Imho sind die meisten berechneten Bilder aber nicht "sauber", bei dem sitzenden Tier sehe ich teilweise ein faches etwas (was aus der ebene steht) und dem Streifen nach oben und unten wachsen. Teilweise 2 flache etwase übereinander.

    Am einfachsten geht das noch wenn in der Mitte des Bildes sich zwei schwarze Punkte befinden, die man übereinander schielen muß. Ich kenn aber viele, die es nicht gebacken bekommen.

  11. Montag 14.01.2013 22:59 von
    David

    coole sache
    wie kann ich solche bilder erstellen und mit welchem program hast du das gemacht?

  12. Donnerstag 06.03.2014 21:51 von
    Wiebke

    Ich finde den Hund toll und das Fahrrad die Schmetterlinge sind aber auch nicht schlecht...

Kommentar hinzufügen

Dieses Feld bitten nicht ausfüllen: