rotateX: X-Axis Vector Rotation Transform

Matrix-based rotation around the X-axis

The rotateX functions provide X-axis rotation transformations for 3D and 4D vectors using matrix operations. These functions generate rotation matrices that rotate vectors around the X-axis by a specified angle.

The mathematical foundation uses a 4D rotation matrix:

$$R_x(\theta) = \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos\theta & \sin\theta & 0 \\ 0 & -\sin\theta & \cos\theta & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

This matrix rotates points in the YZ-plane while preserving the X-coordinate. The rotation follows the right-hand rule, where positive angles rotate counterclockwise when viewed from the positive X-axis.

Available Functions

Function	Input Types	Description
rotateXVec3	vec3, float	Rotate 3D vector around X-axis
rotateXVec3Center	vec3, float, vec3	Rotate 3D vector around X-axis with custom center
rotateXVec4	vec4, float	Rotate 4D vector around X-axis
rotateXVec4Center	vec4, float, vec4	Rotate 4D vector around X-axis with custom center

ライブエディター

const fragment = () => {
      const angle = iTime.mul(2)
      const pos = vec3(uv.x, uv.y, 0).sub(0.5).mul(2)
      const rotated = rotateXVec3(pos, angle)
      const color = rotated.add(0.5).abs()
      return vec4(color, 1)
}