Open In App

p5.js rotateZ() function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The rotateZ() function in p5.js is used to rotate the shape or an object around the z-axis.
 

Syntax:  

rotateZ(angle)

Parameters: This function accepts single parameter angle which stores the angle by which rotation is to be done. 
Below programs illustrate the rotateZ() function in p5.js:
Example 1: This example uses rotateZ() function to rotate the an object around the z-axis.  

javascript




function setup() {
  
    // Create Canvas of given size
    createCanvas(580, 550, WEBGL);
}
  
function draw() {
    // Set the background color
    background(220);
      
    // Set stroke weight
    strokeWeight(12);
      
    // Rotation function
    rotate(PI / 7.0);
      
    // Call to rotateZ function
    rotateZ(millis() / 1000);
      
    // Draw Rectangle
    rect(3, 3, 200, 39);
      
    // Draw ellipse
    ellipse(160, 160, 40, 40);
}


Output: 
 

Example 2: This example uses rotateZ() function to rotate the an object around the z-axis.  

javascript




function setup() {
      
    // Create canvas of given size
    createCanvas(500, 500, WEBGL);
}
   
function draw() {
      
    // Set background color
    background(200);
    
    // Set property to rotate the
    // shape about the z-axis
    rotateZ(frameCount * 0.01);
      
    // Set stroke weight
    strokeWeight(2);
      
    // Set fill color
    fill("green");
      
    // Draw of height 100 and radius 50
    cylinder(50, 100);
}


Output: 
 

Reference: https://p5js.org/reference/#/p5/rotateZ 



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