Reference rotate()

rotate()

Rotates the coordinate system.

By default, the positive x-axis points to the right and the positive y-axis points downward. The rotate() function changes this orientation by rotating the coordinate system about the origin. Everything drawn after rotate() is called will appear to be rotated.

The first parameter, angle, is the amount to rotate. For example, calling rotate(1) rotates the coordinate system clockwise 1 radian which is nearly 57˚. rotate() interprets angle values using the current angleMode().

The second parameter, axis, is optional. It's used to orient 3D rotations in WebGL mode. If a p5.Vector is passed, as in rotate(QUARTER_PI, myVector), then the coordinate system will rotate QUARTER_PI radians about myVector. If an array of vector components is passed, as in rotate(QUARTER_PI, [1, 0, 0]), then the coordinate system will rotate QUARTER_PI radians about a vector with the components [1, 0, 0].

By default, transformations accumulate. For example, calling rotate(1) twice has the same effect as calling rotate(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 rotate(1) inside the draw() function won't cause shapes to spin.

Examples

Syntax

rotate(angle, [axis])

Parameters

angle

angle of rotation in the current angleMode().

axis

axis to rotate about in 3D.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/transform.js and open a pull request!

Related References