 GFG App
Open App Browser
Continue

# p5.js | Typography | shearX() Function

The shearX() function in p5.js is used to shear a shape or object around the x-axis. The object is sheared by the amount specified by the angle parameter. For proper functioning of angles should be specified in the current angleMode. The objects are always sheared around their relative position to the origin and in a clockwise direction.

Syntax:

`shearX(angle)`

Parameters: This function accepts single parameter angle which stores the value of angle.

Below programs illustrate the shearX() function in p5.js:

Example 1: This example uses shearX() function to shear the object on x-axis.

 `function` `setup() { ` ` `  `    ``// Create Canvas of given size ` `    ``createCanvas(780, 650); ` `} ` ` `  `function` `draw() { ` `     `  `    ``// Set the background color ` `    ``background(220); ` `     `  `    ``// Set fill color ` `    ``fill(``'lightgreen'``); ` `     `  `    ``// Set stroke width ` `    ``strokeWeight(5); ` `     `  `    ``// Set shearX function ` `    ``shearX(PI/6); ` `     `  `    ``// Finally Draw the sheared rectangle ` `    ``rect(30, 30, 400, 300); ` `} `

Output: Example 2: This example uses shearX() function to shear the object on x-axis.

 `function` `setup() { ` `     `  `    ``// Create Canvas of given size ` `    ``createCanvas(780, 650); ` `} ` ` `  `function` `draw() { ` `     `  `    ``// Set the background color ` `    ``background(220); ` `     `  `    ``// Set fill color ` `    ``fill(``'green'``); ` ` `  `    ``// Set stroke width ` `    ``strokeWeight(5); ` `     `  `    ``// Set shearX function ` `    ``shearX(PI/20); ` `     `  `    ``// Finally Draw the sheared ` `    ``// circle of radius 80  ` `    ``circle(height/2, width/2, 80); ` `} `

Output: Reference: https://p5js.org/reference/#/p5/shearX

My Personal Notes arrow_drop_up