Show HN: MagicEye.js – Generate Magic Eye in Your Browser(peeinears.github.io)
peeinears.github.io
Show HN: MagicEye.js – Generate Magic Eye in Your Browser
http://peeinears.github.io/MagicEye.js/
48 comments
Put two dots above the (smallest increment of the) repeating part of the pattern. Work on getting those two dots to overlay (forming three dots with the one in the center bright and those on the outside lighter.)
Once you can do that it's as easy as moving your eyes down while maintaining your eye position (and if that really doesn't work you can try drawing two dark black lines down the image.)
Enjoy! Unless you can't get those dots to overlay in which case you at least then know why you were never able to do it :)
Once you can do that it's as easy as moving your eyes down while maintaining your eye position (and if that really doesn't work you can try drawing two dark black lines down the image.)
Enjoy! Unless you can't get those dots to overlay in which case you at least then know why you were never able to do it :)
So I learnt how to do it as a kid.
Basically, what I do is, imagine you are looking through the image and past it, like if you were looking through a tiled window and wanted to focus on the on something outside small. Then after refocusing your eyes (you can't blink or else it'll reset your eyes) keep doing it, it can take you ages, what you'll see are the tiles.
Also what helped me, is focusing on a single point and moving back and forth.
Good luck!
Basically, what I do is, imagine you are looking through the image and past it, like if you were looking through a tiled window and wanted to focus on the on something outside small. Then after refocusing your eyes (you can't blink or else it'll reset your eyes) keep doing it, it can take you ages, what you'll see are the tiles.
Also what helped me, is focusing on a single point and moving back and forth.
Good luck!
To be honest, I actually think it is something (medical) to do with my eyesight. I have poor eyesight in one eye, and a bit better on the other. I also have astigmatism in both eyes.
I find parallel viewing difficult but cross-eyed quite easy. If you can raise a finger and squint and consistently manage to see two fingers, you should manage:
Do it again with two fingers in front of you, you should be able to see four fingers. Adapt how much you squint in order to see "three" fingers (i.e. two of them overlap). (Practice to perfectly control how much you squint: you should start at zero squinting and increase slightly until you achieve the overlapping.)
Once you can do that easily, replace your fingers by the SIRDS generated on that website. Instead of two fingers, you use two features on that image that you see are repeating. You choose two of them that are next to each other. You do exactly as with your finger: turn those two features in "three". Now I think this is the harder part: as you do that, you have to relax and let your view adapat so as the image becomes perfectly neat (not blurry at all).
Do it again with two fingers in front of you, you should be able to see four fingers. Adapt how much you squint in order to see "three" fingers (i.e. two of them overlap). (Practice to perfectly control how much you squint: you should start at zero squinting and increase slightly until you achieve the overlapping.)
Once you can do that easily, replace your fingers by the SIRDS generated on that website. Instead of two fingers, you use two features on that image that you see are repeating. You choose two of them that are next to each other. You do exactly as with your finger: turn those two features in "three". Now I think this is the harder part: as you do that, you have to relax and let your view adapat so as the image becomes perfectly neat (not blurry at all).
Does squinting work? (for someone else, that is, not the guy I'm replying too where it obviously doesn't). It's just a matter of focusing your eye behind the screen. The moment I found the ease of it was when I was pretty close and had my hand behind the screen (laptop) for some "distance" to focus on. Now I seem to get everyone, at least once. Then I can't get it again very easy for some reason..
EDIT: As a cue from another response, focusing on your own reflection works really well (even if the reflection is not super visible it works for me, although a smidge harder).
EDIT: As a cue from another response, focusing on your own reflection works really well (even if the reflection is not super visible it works for me, although a smidge harder).
I always found it diffult to focus behind. However it's much easier to focus before, but it makes the depth inverted.
As a kid I always did it this way and was frustated because it makes it very hard to recognize the subject.
You're probably pretty familiar with how things appear when you intentionally cross your eyes. When you intentionally focus farther away the appearance of close items is "different"... sort of like cross eyed focus but not really. Normally this is a strong signal to your vision system to change to a closer focus and this is pretty close to an autonomous response... but with practice and control you can control it.
It might help to practice explicitly changing your focus from far to close and back to far (the back to far part is what you should pay attention to and practice). Do this practice with your monitor's edge (or the text at the very top of the monitor) and the paper. Get used to how the monitor looks when you're focused well behind it (your brain/eyes "naturally" want to shift to a close focus... this is likely a survivability trait... things close to your head are important/possibly dangerous... so overriding this takes careful practice/effort/concentration).
Try positioning the image at the top of your monitor (if you have a narrow bezel) and make sure the image is only about two thirds or one half visible (i.e. scrolled up a bit). Behind your monitor, a foot or two away, have something easy to look at (eg. blank piece of white paper). Pay attention to your peripheral vision... but don't change where you're looking... just be aware of what's in your peripheral vision, especially the weird color pattern. It should appear "weird" because it doesn't match your memory of the actual pattern... if you know what I mean. Still focusing on the paper, and paying attention to your peripheral vision, move your head up/down a little bit, try not to move your eyes... i.e. where you're focused should move up/down the same amount. You should notice the weirdness (in your peripheral vision) of the image increase/change. Now... if the paper is far enough behind your monitor... when you move your head down farther you should start to see "something". By focusing farther away the "something" should become much clearer. Gradual move your attention to the "something" (keep moving your head) and your focus should naturally move out and the items become clear (especially if you're moving your head... the background will move behind the items in the foreground).
Note for the image from the article the items are just a few narrow triangles, some close, some farther away, some overlapped.
Also... make sure your eyes are level with the image. Rotate your head a few degrees (10... maybe 15 or 20) and the image cannot be seen.
The first time you see one of these images you might be disappointed. They are just 3d shapes wrapped in a strange color pattern (the same pattern in the background and on all objects).
It might help to practice explicitly changing your focus from far to close and back to far (the back to far part is what you should pay attention to and practice). Do this practice with your monitor's edge (or the text at the very top of the monitor) and the paper. Get used to how the monitor looks when you're focused well behind it (your brain/eyes "naturally" want to shift to a close focus... this is likely a survivability trait... things close to your head are important/possibly dangerous... so overriding this takes careful practice/effort/concentration).
Try positioning the image at the top of your monitor (if you have a narrow bezel) and make sure the image is only about two thirds or one half visible (i.e. scrolled up a bit). Behind your monitor, a foot or two away, have something easy to look at (eg. blank piece of white paper). Pay attention to your peripheral vision... but don't change where you're looking... just be aware of what's in your peripheral vision, especially the weird color pattern. It should appear "weird" because it doesn't match your memory of the actual pattern... if you know what I mean. Still focusing on the paper, and paying attention to your peripheral vision, move your head up/down a little bit, try not to move your eyes... i.e. where you're focused should move up/down the same amount. You should notice the weirdness (in your peripheral vision) of the image increase/change. Now... if the paper is far enough behind your monitor... when you move your head down farther you should start to see "something". By focusing farther away the "something" should become much clearer. Gradual move your attention to the "something" (keep moving your head) and your focus should naturally move out and the items become clear (especially if you're moving your head... the background will move behind the items in the foreground).
Note for the image from the article the items are just a few narrow triangles, some close, some farther away, some overlapped.
Also... make sure your eyes are level with the image. Rotate your head a few degrees (10... maybe 15 or 20) and the image cannot be seen.
The first time you see one of these images you might be disappointed. They are just 3d shapes wrapped in a strange color pattern (the same pattern in the background and on all objects).
It would have been better if the demo image was not a random generated shape thing. I spent a few minutes trying to figure out what the hell I was looking at in there.
Is it a wave? A recursive wave? wtf, X
Is it a wave? A recursive wave? wtf, X
That's my opinion too. I love 3D. I've made lots of 3D images, classic LR pairs, and SIS, but I'm not enamored of RSIS. One thing about the random stereograms commonly produced, including the demos here, is that having too many horizontal repeats makes the image harder to fuse at usual viewing range.
I'd suggest limiting vertical panels to 7 or so, which would make it easier to see in 3D on a small screen. That goes for any SIS, whether random or bitmap slice "surface". To my sensibilities, the random dot type, as opposed to a normal bitmap image slice used as the vertical panel, is much less visually interesting and gives the viewing eyes much less to grab onto.
IMO a carefully chosen bitmap thematically or visually coordinated with an elegant carefully drawn depth map creates a work of art that can be appreciated for its interesting shape and color even by viewers who can't grok the 3D effect.
Besides, looking at something beautiful can motivate people to keep trying to see the 3D part come into focus, and eventually some do succeed. When that happens it really is like "magic".
I'd suggest limiting vertical panels to 7 or so, which would make it easier to see in 3D on a small screen. That goes for any SIS, whether random or bitmap slice "surface". To my sensibilities, the random dot type, as opposed to a normal bitmap image slice used as the vertical panel, is much less visually interesting and gives the viewing eyes much less to grab onto.
IMO a carefully chosen bitmap thematically or visually coordinated with an elegant carefully drawn depth map creates a work of art that can be appreciated for its interesting shape and color even by viewers who can't grok the 3D effect.
Besides, looking at something beautiful can motivate people to keep trying to see the 3D part come into focus, and eventually some do succeed. When that happens it really is like "magic".
[deleted]
To this day the thing I think about when someone mentions a stereogram is this version of tetris.
http://3dimka.deviantart.com/art/3D-Stereogram-Tetris-367952...
http://3dimka.deviantart.com/art/3D-Stereogram-Tetris-367952...
When Lord? When the hell do I get to see the goddamn sailboat?
Relax your eyes!
I've never been able to see one of these things on a screen until now. Now that I have, I really want too see an animated one.
The coolest thing so far is that you can click "redraw" and you'll cut to the next one and your eyes will already be focused for it.
I've never been able to see one of these things on a screen until now. Now that I have, I really want too see an animated one.
The coolest thing so far is that you can click "redraw" and you'll cut to the next one and your eyes will already be focused for it.
Look, it's a schooner! ;)
There's pretty recent music video that's all autostereogram: https://www.youtube.com/watch?v=2AKtp3XHn38 The dots at the beginning are helpful.
I don't think MagicEye.js is fast enough to do a bunch of frames on the fly for some real-time animation, unfort. But if you already have the frames rendered you could stitch them together into a gif.
There's pretty recent music video that's all autostereogram: https://www.youtube.com/watch?v=2AKtp3XHn38 The dots at the beginning are helpful.
I don't think MagicEye.js is fast enough to do a bunch of frames on the fly for some real-time animation, unfort. But if you already have the frames rendered you could stitch them together into a gif.
I did an animated 3d plasma for js1k some time ago. It's not fast but it's animated: http://js1k.com/2013-spring/demo/1412
h key toggles the height map.
It uses a simplified version of the MagicEye.js algorithm which generates horizontally repeating patterns for hard height changes in the source image. That's why I went with a plasma in the end.
Source is available here: https://github.com/philippstucki/sird-plasma/blob/master/3dp...
h key toggles the height map.
It uses a simplified version of the MagicEye.js algorithm which generates horizontally repeating patterns for hard height changes in the source image. That's why I went with a plasma in the end.
Source is available here: https://github.com/philippstucki/sird-plasma/blob/master/3dp...
Really cool! I've wanted to see a dynamic animated MagicEye in action ever since I saw an Oculus Rift demo video with side by side left/right views and was able to get a 3D effect in the middle by focusing on it like a magic eye. It was hard to do because of the distance and looked pretty ugly because the separate L/R views were still visible. I tried to make my own but quickly gave up. If snappier animation is possible, there's definitely some fun to be had in game form. Recreations of the old vector based arcade games would be really fun. I wounder if there would be any effect, bad or good, on your eyes staring at one for too long.
Sick!
[deleted]
Here's how I do it: you'll notice that there's a repeating pattern, cross your eyes until you get two of the repititions to be on top of each other. Once you've done this you should find that the shapes pop out.
This is how I do it. The problem is that this inverts the depth map, because your right eye sees the left eye image and vice-versa.
To properly view them, you need to go wall-eyed, by focusing on something behind the screen. This is something that I have not been able to do yet.
To properly view them, you need to go wall-eyed, by focusing on something behind the screen. This is something that I have not been able to do yet.
The other problem with the cross-eyed technique is that it can be hard to maintain a sharp focus on the 3D shapes. And it will really hurt after a while.
It's a good technique if the repeating strips are really wide. On my screen at least, the strips here are pretty narrow, so it should be relatively easy to converge your eyes correctly.
Having said that, I don't know if this script is resolution independent, so it's possible that on some monitors the strips are a lot wider than they should be and that could be giving people more trouble.
It's a good technique if the repeating strips are really wide. On my screen at least, the strips here are pretty narrow, so it should be relatively easy to converge your eyes correctly.
Having said that, I don't know if this script is resolution independent, so it's possible that on some monitors the strips are a lot wider than they should be and that could be giving people more trouble.
[deleted]
If you don't quite have the knack for relaxing your eyes to see these, here's "one weird trick".
Position yourself with something behind you (such as a window) that you can see reflected on the screen. Focus on the reflection so you are looking "through" the screen. Now re-focus on the screen, but not immediately! Hold your focus and let it "slip" as slowly as possible. At some point your eyes will converge at the right depth and you'll catch a glimpse of the shapes behind the screen. When you see the pattern starting to come into focus, lock your eyes onto it. The first few times you'll probably catch a glimpse but fail to lock on. Repeat until you get the hang of it.
Position yourself with something behind you (such as a window) that you can see reflected on the screen. Focus on the reflection so you are looking "through" the screen. Now re-focus on the screen, but not immediately! Hold your focus and let it "slip" as slowly as possible. At some point your eyes will converge at the right depth and you'll catch a glimpse of the shapes behind the screen. When you see the pattern starting to come into focus, lock your eyes onto it. The first few times you'll probably catch a glimpse but fail to lock on. Repeat until you get the hang of it.
Nope. Doesn't work. Everyone's advice fails to work for me. I tend to think this is just a mass conspiracy or giant elaborate joke. I'm going to use this JS script to generate tests to see if I can get people who can do this to tell what the number is behind this "magic eye". Call everyone on their bullshit.
Here's how I (accidentally) learned to do it: hold up a forefinger from each hand, pointed at each other, with a very small gap in between. Now look at something in the distance through the gap: you should see a magic "hot dog finger" floating in the air between them.
Once you can see this, alternate between looking at your fingers and looking at the distance. Once you've got the mechanic down, you can start intentionally unfocusing without anything in the distance to look at, which is what it takes to see a magic eye.
Once you can see this, alternate between looking at your fingers and looking at the distance. Once you've got the mechanic down, you can start intentionally unfocusing without anything in the distance to look at, which is what it takes to see a magic eye.
A small number of people will never be able to see them, but AFAIK if you have normal stereo vision (no lazy eyes etc.) then you should be able, with practise. Since these particular stereograms use coloured random dots, the colourblind might have some extra trouble with them.
I messed around with SIRDS quite a lot in the 90s. I found it hard to see them at first, but the reflection technique initially worked for me and after a while, I had no problem seeing them and even started seeing them by accident in wallpaper patterns and the like.
Another thing that makes a difference is the width of the strips used in the stereogram compared to your IPD. Depending on the width of these, it might be easier to sit closer to, or further away from the screen. Once you get the basic technique you can tolerate a wider range of widths, but at first it can be tricky. It might help to start really close to the screen and slowly move your head backwards as you try to focus.
I messed around with SIRDS quite a lot in the 90s. I found it hard to see them at first, but the reflection technique initially worked for me and after a while, I had no problem seeing them and even started seeing them by accident in wallpaper patterns and the like.
Another thing that makes a difference is the width of the strips used in the stereogram compared to your IPD. Depending on the width of these, it might be easier to sit closer to, or further away from the screen. Once you get the basic technique you can tolerate a wider range of widths, but at first it can be tricky. It might help to start really close to the screen and slowly move your head backwards as you try to focus.
If you cross your eyes, can you get a reverse (inset, concave) image? I don't understand why magic eyes are always implemented in the way that requires people to do something almost impossible (ignore an object in front of them and try to focus on something further away) when almost everyone can cross their eyes and those that can't can probably force their eyes to do it with a piece of string or a pencil or something. I still have never managed to see a magic eye correctly (outset, convex), but can at least decode what other people are seeing in reverse by crossing my eyes :(.
I bounce my eyes in and out of this many times a day. Whenever I see two like things next to each other i'll line them up. Eyes, light switches, books. I've been able to do this at will since I was a young child.
never in my life i managed to see this things. even back then when they were in fashion. no matter how hard i tried. I'm starting to get worried something is wrong with me.
I wonder if we could use Magic eye as a replacement for captcha.
No, God, please no!
they don't work on a significant portion of the population.
edit: like myself.
edit: like myself.
I would really like to participate in "What are you working on this week" thread such as in Lobste.rs but I couldn't since they require invites only, which I don't know anyone who has accounts already. The purpose of their invites-only was to avoid spam. If that's what they really want, then Magic Eye will make spammers bleed their eye, and the potential users who really want to join will have to take time learning Magic Eye, which I think pays the trade off.
Yes, let's cut off all user with visibility problems from our websites!
I think it works better if the 3D object isn't allowed too near to the edge of the image. I had trouble keeping it in focus as my eyes went to the right side.
It's actually quite hard to see the 3D images. I remember giving my mom a book full of this 3D stereoscopic images as a present some years ago. She still hasn't been able to see any of the 3D images, even after hours of viewing.
Some explanation of what this is supposed to be would be helpful I think. Just looks like a strange grainy image to me.
Would be nice to make animations with this. And with textures that aren't dots.
Nicely done. I just wonder where to embed these...
What a fantastic idea! Just drew my name, love it.
Wait, did it get your name right? It's kinda buggy for me, it draws every letter twice for me (twice in 3D, of course it has to draw it twice in 2D).
Nevermind, I managed to squint enough to get the letters to combine into a perfect image. It should not be possible to get more than 1 correct 3D image, the period of the background should be increased.
Wow, this is awesome! Have an upvote.
As a child I became convinced that everyone was taking the piss out of me. Aged nearly forty, I stand by that!
I still can't see the damn things ;-)