Reference rotateX()

rotateX()

Rotates the coordinate system about the x-axis in WebGL mode.

The parameter, angle, is the amount to rotate. For example, calling rotateX(1) rotates the coordinate system about the x-axis by 1 radian. rotateX() interprets angle values using the current angleMode().

By default, transformations accumulate. For example, calling rotateX(1) twice has the same effect as calling rotateX(2) once. The push() and pop() functions can be used to isolate transformations within distinct drawing groups.

Note: Transformations are reset at the beginning of the draw loop. Calling rotateX(1) inside the draw() function won't cause shapes to spin.

rotateX() can also be used in shaders with p5.strands. Inside a shader callback, it takes a transform created with transform3D() as its first parameter, as in rotateX(myTransform, PI / 4). Instead of turning the coordinate system, it returns a new transform with the turn added on and leaves the one passed in untouched, so the result has to be assigned back. Angles are always in radians inside a shader. The finished transform is applied to a position with transformPoint(). See its reference for a more in-depth explanation of how that works. The following example uses rotateX() to roll a box about the x-axis.

Examples

Syntax

rotateX(angle)
rotateX(transform, angle)

Parameters

angle
Number: angle of rotation in the current angleMode().
transform
a transform created with transform3D(), inside a p5.strands shader callback.

Returns

a new transform with the turn applied.

Related References