We’ve had good luck using arithmetic progressions in animations such as our spinning ziggurat. Here we’ll use arithmetic progressions to animate the bands comprising a sphere of bands with two degrees of freedom: rotation around the x-axis and rotation around the z-axis. Where the 60 bands are labelled 0 through 59, the i‘th band is rotated around the x-axis at a rate of a + bi where a is given by the value of the rpsA control and b by that of the rpsB control. Rate of rotation around the z-axis is determined similarly by the rpsZA and rpsZB controls.

Spinning bands

Where bandSphere is an Object3D node whose sixty children are the bands, the animation is performed by attaching a sequence of two rotation behaviors to each band:

let rotationX = makeArithRotator(0, rpsA, rpsB);
let rotationZ = makeArithRotator(2, rpsZA, rpsZB, "rpsz");
moveChildren(bandSphere, rotationX, rotationZ);

Here the makeArithRotator function generalizes makeArithYRotator which we used to construct a function to spin the ziggurat blocks around the y-axis. Here, makeArithRotator constructs a function to spin an object around any of the principal axes. The indx parameter indicates which axis to rotate around (0, 1, or 2 for x, y, or z-axis), and rps names the property that stores the rotation rate in the spinning object.

function makeArithRotator(indx, rpsA, rpsB, rps="rps") {
    let spin = makeSpin(indx, rps);
    return function(child, i) {
        child[rps] = rpsA + rpsB * i;
        return spin;
    }
}