GeeksforGeeks App
Open App
Browser
Continue

# p5.js | rotateZ() function

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

My Personal Notes arrow_drop_up
Related Tutorials