Sample Code

# Rotating a Cube by Transforming Its Vertices

Rotate a cube through a series of keyframes using quaternion interpolation to transition between them.

## Overview

Quaternions are fundamental to 3D drawing and animation. You can rotate a 3D object in space by applying unit quaternion actions to each of its vertices. You can interpolate between a series of rotational keyframes—defined by unit quaternions—with either the simd_slerp(_:_:_:) or the simd_spline(_:_:_:_:_:) functions.

This sample shows how you can define a cube using eight vertices and transform it through a series of rotations. It shows how transitioning between the keyframes with a series of discrete spherical interpolations (that is, a series of separate arcs between each keyframe) yields a different result than transitioning with a continuous spline (that is, a single, smooth path between each keyframe).

### Define a Cube by Its Vertices

Define a cube with eight simd_float3 structures: one for each corner:

The quaternions will act upon the vertex origins, mutating cubeVertices to rotate the cube:

This sample uses SceneKit to render the cube defined by the vertices in the cubeVertices array, but you can use the technique discussed to rotate geometry in other technologies like Metal. The following image shows the cube, defined by the vertices above, rendered in SceneKit:

### Define the Quaternion Rotation Keyframes

As discussed in Working with Quaternions, spline interpolation requires a quaternion before the current value and a quaternion after the next value to compute the interpolated value. To support this, define the series of rotations with additional values at the beginning and end. In this sample, the first and last elements are duplicated:

### Animate Between Keyframes with Spherical Interpolation

This sample uses a CADisplayLink instance to schedule updates to the cube’s vertices, calling the vertexRotationStep function every frame:

The following variables define the current index in vertexRotations and the time, between zero and one, for the current interpolation:

With each display link notification, inside the vertexRotationStep function, the vertex rotation time variable is incremented by a small amount. Changing the value of increment controls the speed of the animation:

The simd_slerp function returns a quaternion that is spherically interpolated between the current and next quaternion keyframe at the specified time:

The quaternion acts upon each of the cube’s original vertices, rotating the cube around its center:

If the vertex rotation time is greater than or equal to one, you need to progress to the next keyframe: Increment the index to the rotations array and reset the rotation time to zero. Furthermore, when the code has reached the last usable quaternion in the array of rotations, end the animation by invalidating the display link:

Over time, the cube animates through the series of keyframes. By tracing the path (shown as a thin line) of one of the vertices (marked by the dot), you can see the sharp change in direction as the cube rotates between the keyframes:

### Animate Between Keyframes with Spline Interpolation

Use the identical code to the spherical interpolation sample for spline interpolation, apart from one change: Rather than generating the quaternion that acts upon the vertices with simd_slerp, use simd_spline:

With spline interpolation, the transition between the quaternion keyframes is far smoother as shown in the image below:

### Vectors, Matrices, and Quaternions

Working with Vectors

Use vectors to calculate geometric values, calculate dot products and cross products, and interpolate between values.

Working with Matrices

Solve simultaneous equations and transform points in space.

Working with Quaternions

Rotate points around the surface of a sphere, and interpolate between them.

simd

Perform computations on small vectors and matrices.