Parallel Projection Visualizer @ QNLW — Help

How to use the visualizer, what each control does, and the mathematics behind it.

1. The idea

A flat shape (the figure) lies on a plane called the source plane. Every point of the figure is moved in the same fixed direction until it reaches a second plane, the target plane. The shape that appears there is the image. Because all points move in parallel, this is called a parallel projection.

A parallel projection keeps straight lines straight and parallel lines parallel. Lengths, angles and areas can change, though, and the image can even come out mirrored. The visualizer lets you tilt and turn the two planes and watch how the image changes.

2. The screen

Panel	What it shows
Top left	The 3D scene: both planes, the figure, its image and the projection rays.
Bottom left	The controls.
Top right	The figure drawn flat, in the source plane’s own coordinates.
Bottom right	The image drawn flat, in the target plane’s own coordinates.

3. Controls

The best way to understand the controls is to play with them. But here we give a brief summary.

Source plane column

Control	Purpose
origin	This is the location of the "origin point" of the source plane. Fixed at (0, −3, 0) in the 3D scence. The source plane always passes through this point.
normal `x`, `z`	The `x`- and `z`-components of the plane’s normal vector (range −5 to 5 on the slider). Changing them tilts the plane.
normal `y` switch	The `y`-component of the normal: switched left = −1, right = +1. It chooses which side of the plane is the front, which sets the plane’s orientation. The current normal is shown below, e.g. n = (0.60, −1, 0.40).
rotation θ	Turns the plane’s coordinate axes about the normal (−180° to 180°). The plane itself does not move; only its `u` and `v` axes, and the figure drawn on them, turn.
Figure	The shape on the source plane: circle, equilateral triangle, random triangle, trapezoid, rectangle or kite. For the random triangle, New random draws a new one.

Target plane column

Control	Purpose
origin `x`, `y`, `z`	The location of the "origin point" of the target plane (default (0, 3, 0), sliders −10 to 10). The rotation angle is measured with respect to it. Moving it shifts the image without changing its shape.
normal, `y` switch, rotation θ	The same as for the source plane.

Third column

Control	Purpose
Preset	Sets both planes to a ready-made example (see Things to try). Your figure and display settings are kept.
Show: rays	Dashed lines in the 3D view from points of the figure to the matching points of the image.
Show: frames	The u, v and `n` arrows drawn in a corner of each plane in the 3D view.
Show: grid	The ground grid in the 3D view and the coordinate grids in the 2D panels.
Show: 1:1 scale	Gives both 2D panels the same scale, so you can compare sizes directly. When it is off, each panel zooms to fit its own shape.
Reset	Returns everything to the starting settings.
Copy link	Copies a web address that contains all current settings. Opening it restores exactly this view, which is useful for sharing an example.
Readout box	The formula of the map from source to target coordinates. See The readout box.

4. The 3D view

World axes. In the 3D scene, the projection direction is always +y. The axes of the 3D world is shown for reference.

Mouse: drag to rotate, right-drag to pan, scroll to zoom.
Reset view returns to the starting camera.
Front view looks straight along −x, with y to the right and z up. A plane whose normal is close to ±y is then seen almost edge-on.
Frame all zooms so that everything fits, keeping the current viewing direction.
The source plane is blue and the target plane is orange. The front side of each plane (the side its normal points to) is shaded more strongly than the back.
The figure and its image are both purple.
The dotted teal line on each plane is explained in The line of unchanged length.

5. The 2D panels

Each panel shows its plane seen from the front, with the plane’s u axis to the right and v axis up. The open circle marks the plane’s origin O.

A dot marks the figure’s first vertex, and small arrowheads show the direction in which the edges are traced.
On the source plane every figure is traced counterclockwise. If the image is traced clockwise, the projection has mirrored it.
The dotted teal line appears here too, when it exists.

6. The mathematics

Describing a plane

Each plane is given by an origin O, a normal vector n = (a, s, b) with s = ±1, and a rotation angle θ. Because the y-component of the normal is never zero, neither plane can contain the projection direction. So every point of the source plane has exactly one image on the target plane.

The plane’s own axes

Each plane gets two perpendicular unit vectors u and v lying in it. First,

u_{0} = \frac{\hat{z} \times n}{‖ \hat{z} \times n ‖}, v_{0} = \hat{n} \times u_{0}

so u₀ is always horizontal. Then both are turned by θ about the normal: u = cos θ u₀ + sin θ v₀, v = −sin θ u₀ + cos θ v₀. A point with plane coordinates (x, y) sits at O + x u + y v in space.

The projection

A point P moves along +y to the point Q on the target plane:

Q = P + t \hat{y}, t = \frac{(O_{t} - P) \cdot n_{t}}{\hat{y} \cdot n_{t}}

In words: x and z stay the same, and only y changes. A negative t means the target lies on the −y side of the source.

7. The readout box

Measure the figure in source-plane coordinates (x, y) and the image in target-plane coordinates (x′, y′). The projection then becomes a simple formula, an affine map:

(\begin{matrix} x^{'} \\ y^{'} \end{matrix}) = M (\begin{matrix} x \\ y \end{matrix}) + (\begin{matrix} e \\ f \end{matrix}), M = [\begin{matrix} m_{11} & m_{12} \\ m_{21} & m_{22} \end{matrix}]

Readout	Meaning
Matrix `M`	The linear part of the map: how directions and lengths change. Its first column is where the source’s unit step along u_s lands, written in target coordinates. Its second column is the same for v_s. If `M` is the identity matrix, the image is an exact copy of the figure.
Vector (`e`, `f`)	The shift part of the map: the target-plane coordinates of the image of the source origin `O`_s. It is (0, 0) exactly when the source origin projects onto the target origin. Moving the target origin changes (`e`, `f`) but not `M`.
det `M`	The determinant, `m`₁₁`m`₂₂ − `m`₁₂`m`₂₁. Its size is the area factor: the image’s area divided by the figure’s area. A negative determinant means the image is mirrored, and the mirrored badge appears.

For this projection the determinant has a simple closed form:

det M = s_{s} s_{t} \frac{‖ n_{t} ‖}{‖ n_{s} ‖}

Here s_s, s_t are the two y-signs and ‖n‖ = √(a² + 1 + b²). It is never zero, so the image never collapses to a line. Its sign depends only on the two y switches. The rotations θ and the origins do not affect it.

8. The line of unchanged length

When the two planes are not parallel, they meet along a line. Its direction is

w = n_{s} \times n_{t}

which is perpendicular to both normals and therefore lies in both planes. The visualizer draws a dotted teal line through each plane’s origin in this direction, both in the 3D view and in the 2D panels.

Lengths along this line do not change. A segment on the source plane that points along w already lies in a direction of the target plane, so moving it along +y lands it on the target as an exact copy: same direction, same length. Every other direction may be stretched or shrunk. In terms of the readout, M takes the unit vector along w in source coordinates to the unit vector along w in target coordinates. So the source line projects onto a line parallel to the target’s dotted line, with lengths preserved.

If the two normals are equal, or exactly opposite, the planes are parallel and w = 0. There is no such line, and none is drawn. In that case the map preserves all lengths: the image is the figure rotated (by the difference of the θ angles) and, for opposite normals, mirrored.

9. Things to try

Preset	What to look for
Parallel planes (identity)	`M` is the identity, det `M` = 1, and there is no dotted line.
Parallel, target rotated 45°	A pure rotation: the image is an exact turned copy (det `M` = 1).
Stretch (target tilted about x)	The image is stretched in one direction only (det `M` ≈ 1.80).
Tilted target	The starting example: a general stretch and shear.
Both planes tilted	Edges of the figure that run parallel to the dotted line keep their length in the image; other edges change.
Mirrored (opposite y-signs)	The badge appears and the image’s arrows run clockwise.
Target behind source	The target is on the −`y` side; the rays run backwards.

Also try the circle: its image is always an ellipse. With 1:1 scale on, compare the circle’s diameter parallel to the dotted line with the ellipse’s chord through its centre parallel to the dotted line. They are equal.

10. AI disclosure

This visualizer was "vibe coded" using Anthropic Claude. The human partner provided initial description of the goals of the project and the desired user interface, and over the course of 90 minutes (and about 7 dollars worth of tokens) refined the product using natural language interaction with Claude. Throughout the human partner did not write a single line of JavaScript / HTML / CSS code. Some polishing of this current help page carried out by the human partner after the fact, prior to publication. So: Give Claude the credit, and blame Claude for any bugs.

Access to Anthropic Claude is provided by the "Agentic AI" Hot Topic Course hosted by the AI and Data enabled predictive Multiscale Modeling across STEM NRT. And so this visualizer was created with the support of the National Science Foundation, under grant # DGE-2152014.

← Back to the visualizer