Open In App

p5.js Typography shearX() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 17 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads