About
Shear is a transform that rotates one axis so that the axes are no longer perpendicular. It means offsetting the coordinates along one or two axes based on the distance along the remaining axis.
Under shear, a rectangle becomes a parallelogram, and a circle becomes an ellipse.
Articles Related
Transformation
Matrix multiplication
You set up a matrix transformation and multiply it by each vertex (node) of your object
The functional form <MATH> x' = c.y \\ y' = b.x </MATH> becomes the following matrix. <MATH> \begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} 0 & c \\ b & 0 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix} </MATH>
Using the standard transformation matrix notation, it would become: <MATH> \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 0 & c & 0 \\ b & d & 0 \\ 0 & 0 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} </MATH>
Procedure
Example in 3D: displace vertices (nodes) in the XZ plane depending on the Y coordinate.
- Define a vector with only X and Z:
vector = new Vector(1.0, 0, 1.0);
- Loop through all the vertices, getting the Y coordinate, multiplying that by the shear value and then adding that offset back to the original vertex:-
for (i = 0; i < verts.Length; i++) {
verts[i] = verts[i] + shear * verts[i].y;
}
Example
In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(0 X Y 0 0 0).
Below:
- we draw a rectangle without skew
- we draw a rectangle with skew
Example:
- The CSS
circle {
fill:#ECDCC6;
}
- The Svg
<svg>
<circle cx="40" cy="50" r="30" />
<circle cx="40" cy="100" r="30" transform="matrix(0 1 2 0 0 0)" />
</svg>
- The output: