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.
The 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.
The shearY()
function angles a shape around the y-axis by the amount specified as the argument. The below code vertically shears the rectangle by QUARTER_PI
radians.
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 shearX()
and shearY()
functions are interpreted in radians by default but can be changed calling the angleMode()
function before a shear function is called.
Instructions
Below the rectMode()
function, specify the angle mode to be in DEGREES
.
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.