3D Rotations in Processing (Vectors, Matrices, Quaternions)

Jeremy Behreandt
Feb 5, 2018 · 19 min read
A 3D shape easing between rotations.

Review of 2D Vectors

Vector notation may use letter or number subscript.
Rotation in 2D with vectors
The magnitude of v equals the square root of the sum of its components squared.
The intermediate step, magSq, merits recognition due to the cost of sqrt.
A unit vector is created through normalization, by dividing its components by its magnitude.
Setting a vector’s magnitude by a negative value will reverse its direction.
The orthonormal basis is i < 1, 0, 0 >, j < 0, 1, 0 >, k < 0, 0, 1 >.
Given any two axes of the basis, the third can be found from the cross product. Crossing two unit vectors does not necessarily yield a unit vector.
a cross b = < a.y * b.z — b.y * a.z, a.z * b.x — b.z * a.x, a.x * b.y — b.x * a.y >
The dot product of vectors a and b is the sum of the product of their components.
The dot product of two vectors is cosine the angle between them multiplied by their magnitudes.
The angle between unit vectors a and b is arccosine of the dot product of the normalized vectors.
The local space of a rotating point compared to global space at the origin.
The local space of a rotating point compared to global space at the origin.
Processing’s chirality, viewed in an orthographic camera from <1, 1, 1>.
Linear interpolation from a to b by a step is a multiplied by the complementary step plus b multiplied by the step.
c (purple) is interpolated linearly from a (orange) to b (teal). the magnitude of a and b are equal. d (magenta) is interpolated from the angle of a to the angle of b.

Creating A Vector from Azimuth and Inclination

A sphere constructed with fromAngle.
v = < sine inclination cosine azimuth, sine inclination sine azimuth, cosine inclination >
A directional light calculated from azimuth and inclination.

Rotations of a Vector on X, Y and Z Axes

Rotation of a point <50, 50, 50> around i (red), j (green) and k (blue).
The 3 axes i (right), j (up) and k (forward) represented as a matrix.
rotateX, about the i, the x axis.
rotateY, about j, the y axis.
rotateZ, about k, the z axis.
A transformation is the dot product of a matrix m and homogeneous coordinate v, the sum of the products of v’s components with the corresponding component in m’s columns.
The transformed point v equals the x, y and z components of homogeneous coordinate c divided by w. the w, now equal to the identity 1, is discarded.

Rotations of a Vector by Axis and Angle

Rotation about an arbitrary axis.

Project The Point Onto The Axis

The projection of point v equals the dot product of v and axis a multiplied by a.

Find the Elevation

The elevation of point v equals v minus its projection onto axis a.

Find the Plane of Rotation

The plane of rotation r equals cosine theta multiplied by the elevation plus sine theta multiplied by the axis a crossed with projection p.

Extend a Rotated Point to the Original’s Plane

The rotation of v around axis a equals the rotation r plus the elevation.

4 x 4 Matrices

Matrix row-column notation, used in Processing.
For comparison, the previous notation with basis vectors.
The identity matrix.

Looking Toward A Point

Orienting a model to look at a target point.


A complex number is a real part, a, added to an imaginary part, b.
Hamilton’s discovery.
A quaternion can be described with four components, x, y, z and w; or as an imaginary vector v and a real part w.

Converting from Axis-Angles, Applying To Points

A quaternion’s imaginary parts are the normalized axis a multiplied by sine half theta. Its real part is cosine half theta.
A unit quaternion is normalized by dividing the quaternion by its magnitude, or the square-root of its dot product with itself.


Linear interpolation, normalized linear interpolation and spherical interpolation.

Converting To and From Matrices

Conversion from a quaternion to a matrix.
A quaternion rotation applied to an immediate shape (star), retained shape (blue Suzanne), tested against a control shape (purple Suzanne).


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade