Learn

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.

Shearing a Shape Horizontally and Vertically

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.

Shearing a Shape Horizontally

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.

Shearing a Shape Vertically

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

1.

Below the rectMode() function, specify the angle mode to be in DEGREES.

2.

Above the first for loop, horizontally shear the red rectangles by 15 degrees.

3.

Above the second for loop, horizontally shear the blue rectangles by -15 degrees.

4.

Above the last for loop, vertically shear the purple rectangles by a value of frameCount / 25 degrees.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?