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.
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.
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.