Move to lookHover to focusScroll to dollyInspect ten planes, far to nearMove to orbitTap a tag to focus it

Parallax: depth as a design material

Chapter seven. A painted landscape in nine planes at nine measured distances, with a lens you can move, a camera that dollies as you scroll, depth of field that follows your pointer, and a layer inspector.

01Depth

Depth is a distance, and a distance is a fact you can check.

A flat picture can fake depth in about nine ways: scale, blur, shadow, haze, a gradient, a darker band along the horizon. Each one is a picture of a cue, not the cue. What separates the two is arithmetic. In a real projection the size and the shift of a thing are set by one number, how far it is from the eye, and nobody gets to choose them separately.

The scene behind this text is 9 painted planes and one HTML title, each at a stated distance d behind the glass, seen through one perspective of f pixels. We did not author a parallax multiplier anywhere. Open the Depth lab and read the distances off the table.

–the perspective distance f in CSS pixels, set from the window size. Every depth in the table is a multiple of it.

02Vanishing point

Every plane is aimed at one point, and the point belongs to the lens.

Parallel lines in the room meet at the vanishing point, and the vanishing point is not a place in the room. It is where the lens is pointing. Here it is the perspective origin, and it starts on the horizon. Move the pointer, tilt the phone or drag the Lens slider and the origin slides. The planes swing around the title, which is the anchor, because it is the plane we chose to hold still.

Switch on the Maths overlay in the Depth lab. The cross is the origin read back from the browser instead of remembered, and each numbered tick is a plane's centre at its measured position.

–vanishing point in screen pixels, live. It moves when the lens does.

03Occlusion

The near thing wins, and it wins in one bit.

The sun is behind the far ridge: not dimmed, not faded, simply not painted where the ridge is. The ferns at the bottom of the frame do the same to the forest, and the forest to the haze. Size, blur and haze are all continuous, and each can be applied in the wrong order and still look nearly right. Occlusion cannot. A near surface covers a far one or it does not.

That is why this chapter is made of planes with real gaps in them, not one picture with a filter on it. Switch on Inspect layers and pull the scene apart: every silhouette you see is a hole in one plane through which the next one shows.

04Rates

Two things at different distances move at different speeds, and the speeds are not yours.

Give the background a rate of 0.3 and the foreground 1.0, call the difference depth, and you have a room drawn on a card. In a projection the rate falls out of the distance. A plane at depth d follows a lens shift Δ by Δ·(d − d_a)/(1 + d − z), where d_a is the anchor and z the dolly. At rest the foreground moves 2.6 lens shifts one way, the sky 0.64 the other, and the title, which is the anchor, does not move at all.

The Shift column in the lab is read back from the browser's own projection with getBoundingClientRect. The Formula column is computed from the line above. They are two separate measurements of one thing, printed side by side so you can see whether they agree.

–foreground shift over sky shift, both measured against the anchor, under the current lens. Near 1 would mean a stack of pictures.

05Focus

Blur is distance too, and focus is a choice.

A lens draws one distance sharply. Everything else spreads into discs, in proportion to how far its inverse distance sits from the focus: σ = K·|1/z − 1/z_f|. We apply that to each plane as a Gaussian blur, and the focus follows the plane under your pointer, or under your finger. The aperture slider is K.

It is an approximation and we say so: each plane is blurred as one image, so a plane has no depth of its own. A row of trees at a single depth cannot have sharp near trees and soft far ones. That is the price of painting in planes.

–the focused plane and the blur it puts on the foreground, live.

06Still

A still version is a different drawing, not a lesser one.

If your system asks for less motion, the scene opens at rest: no push-in at the start, no idle sway, the fog and the motes hold still, and scrolling moves the text only. Nothing is cut. Every plane is still there at its distance and the Maths overlay still reads true.

The pointer, the tilt button, the arrow keys and the Depth lab sliders still move the lens, because they are direct manipulation and you asked for them. What you will not get is a camera creeping toward you while you read.