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

This tutorial introduces how to rotate objects in 3D beyond Euler angles; to do this, it looks at the basics of matrices and quaternions. What follows is math heavy, so a robust artistic imagination will be valuable once we dig in.

A 3D shape easing between rotations.
  • Processing version 3.3.6 was used for the example code. A warning for PC users: In the past, working in 3D with Processing caused significant lag.
  • For those who are looking for a library that has already implemented these concepts, a few are glMatrix (JavaScript), Physically Based Rendering (C++), Three (JavaScript), and Toxiclibs (Processing). They have served as references for the code that follows.

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

Suppose we’ve already got a vector, maybe constructed with Cartesian coordinates or retrieved from a PShape. There are no axis-specific rotations for 3D vectors. There are general rotateX and rotateY functions, which we typically place between pushMatrix and popMatrix (more on those later)… there are also PShape and PMatrix3D versions… there’s a rotate for 2D vectors… a rotation can be applied to a vector with PMatrix3D’s mult. If those suffice, this section can be skipped.

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.
  1. find the elevation of the point, the component perpendicular to the axis;
  2. find the plane of rotation about the axis;
  3. extend a point from the plane of rotation onto the plane containing the original point.

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

Two key interactions between vectors and matrices are multiplication (already in the PMatrix3D class) and the orientation of one shape to look at another. We’ll place these in the Vec3 class.

Orienting a model to look at a target point.

Quaternions

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

While the above gloss may keep us from misunderstanding quaternions, it doesn’t help us with how to use them. The formula to create a quaternion from an axis-angle,

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.

Easing

We can now synthesize what we learned from rotating by an amount in 3D with what we learned rotating from one angle to another in 2D.

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).

Conclusion

Now that some basics of rotation are taken care of, what’s available to us? This enables us to create Transforms which track rotation data for 3D objects in our sketch without need of pushMatrix and popMatrix. If we add Euler angle conversions to our code, we could import and interpret a BioVision Hierarchy (.bvh) file then pass it on to either matrices or quaternions. And even more opportunities open up should we choose to work more directly with OpenGL.

Creative coder from Wisconsin, USA.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store