Share:

The iOS 7 Parallax Effect Explained

Share:

parallax-large

Alongside with a redesign, Apple has gone the extra mile to improve the overall user experience with iOS 7. The parallax effect is one of the outstanding features the new mobile OS that will charm its users. How did they achieve this effect? Macworld shares the details.

It is clever programming of course, but the result is truly amazing. Your iPhone’s screen turns into a pane of glass behind which a three-dimensional world opens up and shifts and tilts as you move the device.

As Macworld points out, the key to Apple’s magic is related to the way the human eye perceives size. Parallax is simply the apparent motion that objects take when you move around them.

Because the eye works by forcing light through a single point, the brain has learned to measure the size of objects based on the apparent angle between their extremities, as measured from our pupils. As a result, objects that are nearer tend to appear larger, while things that are farther away seem smaller.

This is the basis for our perception of perspective, and parallax is simply the apparent motion that objects take when you move around them. For example, when you travel on a fast car or train, objects that are closer to you appear to move much more quickly than those that are farther away, even though it stands to reason that, in reality, everything is changing place at the same speed.

Alongside a few additional physical tricks, perspective and parallax play a very important role in the way that we understand the world around us, making it possible for us to sort out and make sense of the various visual cues that our eyes register (as well as providing photographers with the opportunity for endless fun).

acceleration_axes-large

The second (secret) key to the parallax effect is a tiny component that is incorporated into Apple’s iDevices starting with the iPhone 4, and is called a gyroscope. The hardware measures the speed and direction in which the phone or tablet is being rotated, and with the help of other sensors such as an accelerometer, the tiny accessory (the gyroscope) can determine the changes in its position with high accuracy.

Using this data, iOS can determine the angle between the surface of the screen and our visual plane.

From then on things get fairly straightforward: to create the magic, Apple did its math correctly to provide an illusion of depth. The result was shown during the WWDC keynote and can be seen on your iPhone if you are running iOS 7 beta: the icons appear as if they are above the background.

Share:

  • Jason

    What?

  • “the key to Apple’s magic is related to the way the human eye perceives size”
    Sorry, what? Are you trying to say that iOS 7 is the first OS to have icons that are a different size than the background they’re sitting on? Nothing about object sizes in the iOS main screen gives you a sense of depth. All of the icons sit on the same plane and the background takes up the whole screen behind it.

    “The second (secret) key to the parallax effect is a tiny component that is incorporated into Apple’s iDevices starting with the iPhone 4, and is called a gyroscope.”
    Nope, this is THE key. Not the second key. The only key.

    “From then on things get fairly straightforward: to create the magic, Apple did its math correctly to provide an illusion of depth.”
    Actually, I would argue that that’s where things get complex. The math. The concept is straightforward, but programming the animation for the math to make it look realistic is the difficult part.

  • Tekknow

    The size isn’t theentire secret, it’s the speed of objects at a distance(Or at least that’s how I understood it), second is the gyroscope to detect the viewing angle. Apple uses a combination of visual tricks first and foremost then it uses viewing angle to accentuate those tricks. This is a really informative article. Just because you don’t UNDERSTAND it doesn’t give you reason to try and pick it apart. But yea the math and programming were hard because of the challenging nature of the logic behind the layered effect.

  • Joseph

    giving way too much credit to Apple and their apparent ingenious and divine flawless engineering. This was developed by a Cydia developer, ages ago, under the name “Parallax”. Surprising isn’t it. Is it possible NOT to worship Apple any BS they develop?

  • WatDah

    Nope, not surprising at all.

    What’s really surprising, is the fact that you failed to realize what site you’re on.

  • “DeepEnd” and “Paralax” are Cydia tweaks that accomplish this. Released years ago. Apple is just catching up. 😉

  • Joseph

    yeah i’ll give ya that.

  • Okay, I was a little harsh on the article, and for that I’m sorry. But it’s BECAUSE I understand the concept that I’m frustrated with the article. It doesn’t present it properly in my opinion.

    Our eyes detect DEPTH, not SIZE by a number of factors:

    Primarily, our stereoscopic vision compares the differences in the images coming from our two eyes, and using that information, determines where each object sits on a 3D plane. This is how 3D movies work, they use glasses with polarizing filters to feed our eyes two different images and it gives the movie an illusion of depth. This is not how the new iOS works, however, so they need to achieve the effect differently.

    When looking at a 2D image (such as an iPhone screen), our eyes don’t see true depth, but they can make out what appears to be depth using different methods. For still images, the two biggest factors are relative size and perspective. Relative size, however, only works if you know how big the objects in the images are supposed to be relative to one another. If I see an image where on person is half the size of another person, my mind will assume that the smaller person is farther away. When I see a screen filled with images that have no relative size in the real world (like a screen full of icons in front of a background image that can be anything), there is no way for me to know what the relative size is supposed to be, nor is there any perspective in the layout, so it doesn’t really look 3D.

    Other ways to give the feeling of 3D with objects that don’t have relative size are drop shadows and depth-of-field. Apple uses drop shadows a little bit in their current operating systems, which gives the interface a bit of a feeling of depth, but we see those effects so often that it doesn’t feel magical in any way.

    Now, when you have a moving 2D image, there is another effect that creates a strong illusion of depth. This is the Parallax Effect, which was explained well in this line of the article: “For example, when you travel on a fast car or train, objects that are closer to you appear to move much more quickly than those that are farther away.” This effect is often used heavily in movies to help give the viewer a sense of depth in the scene. The dolly shot is the most common use of this effect, where the camera is drifting slowly sideways where you notice objects at different distances from the camera moving sideways at different speeds, giving you clues to how far away everything is without the need for 3D glasses.

    Apple has chosen to simulate this effect by using the gyroscope in the iPhone, detecting when you rotate your phone and then moving elements that it has determined in software as being on a closer plane at different speeds than elements it has determined to be on a farther plane. This creates an almost magical effect because it’s something most people have never seen before, aside from perhaps the choppy low-resolution images one finds in lenticular drawings, some of which use a similar effect.

    What bugged me is that the article started by focusing on size, which really doesn’t apply in an iOS scenario because we don’t know what the relative sizes are. It indicated that the gyroscope was a secondary key to achieving the effect, when it’s actually the primary key to the effect. I thought those two aspects were fairly misleading, and I thought the article could have been clearer at describing how depth is perceived by our eyes.

Deals