Perspective Distortion

Perspective distortion allows to transform images in such way that some part of image become looking closer and the other part looking closer. In perspective distortion straight lines remains straight, but parallel lines may not remain parallel.

Use cases

The use cases of perspective distortion are e.g.

Theory

Perspective distortion is defined by following equations:

X_{d} = \frac{s_{x} \cdot X_{s} + r_{y} \cdot Y_{s} + t_{x}}{p_{x} \cdot X_{s} + p_{y} \cdot Y_{s} + 1}

Y_{d} = \frac{r_{x} \cdot X_{s} + s_{y} \cdot Y_{s} + t_{y}}{p_{x} \cdot X_{s} + p_{y} \cdot Y_{s} + 1}

where $X_{d}$ , $Y_{d}$ are destination image coords, $X_{s}$ , $Y_{s}$ are source image coords and $s_{x}, r_{y}, t_{x}, r_{x}, s_{y}, t_{y}, p_{x}, p_{y}, 1$ are coefficients of equations that can be written in matrix form:

(\begin{matrix} s_{x} & r_{y} & t_{x} \\ r_{x} & s_{y} & t_{y} \\ p_{x} & p_{y} & 1 \end{matrix})

The first 6 values of matrix is in fact the same coefficients to that of the affine matrix, though they are slightly reordered to be more logical (in 'matrix math' terms, the first 6 elements have been diagonally transposed).

The extra two arguments $p_{x}, p_{y}$ form a scaling divisor to the whole distortion which causes the image to look smaller in the specific direction according to the values given, and thus giving the distorted image the perspective 'distance' effect. If these two values are set to zero, perspective distortion becomes equivalent to affine distortion.

Best-fit viewport

Perspective Distortion supports best-fit output image virtual viewport calculation to contain whole distorted image:

const result = await distort(image, "Perspective", args, {
  viewport: "bestFit", // or true
});

Usage

Perspective distortion comes in two forms of usage:

Using control points

const result = await distort(image, "Perspective", controlPoints);

where controlPoints is flat array of control points mappings.

INFO

Control points mapping is 4 numbers: U, V, X, Y, where U and V are corresponding x and y coordinates of source image point, and X and Y are corresponding x and y coordinates of that point in result image.

Perspective distortion requires at least 4 sets of control points (16 values).

If more than 4 sets of control points are given, Least Squares method will be used to determine most accurate fitting for distortion.

Using forward mapping perspective matrix

You can pass array of Perspective matrix coefficients as distortion arguments for "PerspectiveProjection" distortion.

These coefficient are (from equations above): [sx, ry, tx, rx, sy, ty, px, py]. You don't need to pass 9th coefficient, as it is constant 1.

const matrix = [sx, ry, tx, rx, sy, ty, px, py];
const result = await distort(image, "PerspectiveProjection", matrix);

Internally, this forward matrix will be inverted to get reverse pixel mapping perspective matrix.

Viewing distant horizons

TIP

See Viewing Distant Horizons at ImageMagick distortions guide for examples.

If you adjust control points or forward matrix to produce vanishing point inside image bounds, a 'horizon' will appear, which is the line on one side of which lies image plane — image pixels itself and virtual pixels; and on the other side lies 'sky' — pixels which coords maps to infinity in the source image.

The 'sky' will only appear in perspective distorted images when the resulting image is highly foreshortened by the distortion.

These invalid pixels are transparent by default in Lens. You can change their color by specifying custom color at matteColor option:

const result = await distort(image, "Perspective", args, {
  matteColor: "#f00", // Red
});

Perspective Distortion ​

Theory ​

Best-fit viewport ​

Usage ​

Using control points ​

Using forward mapping perspective matrix ​

Viewing distant horizons ​

Links ​