Shear functions skew a shape in a specific direction. The shape is sheared by the angle amount specified as the function’s argument. In p5.js, shapes are sheared in a clockwise direction. If the angle value is negative, the shape will shear in a counter-clockwise direction.
The image below shows a rectangle being sheared in both the x- and y-axis with angle values ranging from positive to negative.
shearX() function angles a shape around the x-axis by the amount given as its argument. The below code horizontally shears the rectangle by 0.5 radians.
shearX(0.5); rect(100, 100, 150, 200);
The image below shows a rectangle sheared along the x-axis.
shearY() function angles a shape around the y-axis by the amount specified as the argument. The below code vertically shears the rectangle by
shearY(QUARTER_PI); rect(100, 100, 150, 200);
The image below shows a rectangle sheared along the y-axis.
Note that the arguments of the
shearY() functions are interpreted in radians by default but can be changed calling the
angleMode() function before a shear function is called.
rectMode() function, specify the angle mode to be in
Above the first
for loop, horizontally shear the red rectangles by 15 degrees.
Above the second
for loop, horizontally shear the blue rectangles by -15 degrees.
Above the last
for loop, vertically shear the purple rectangles by a value of
frameCount / 25 degrees.