GeeksforGeeks App
Open App
Browser
Continue

# p5.js | rotateX() function

The rotateX() function in p5.js is used to rotate the shape or an object around the x-axis.
Syntax:

`rotateX(angle)`

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

## javascript

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

Output:

Example 2: This example uses rotateX() function to rotate an object around the x-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 x-axis``    ``rotateX(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/rotateX

My Personal Notes arrow_drop_up
Related Tutorials