Earlier, we wrote a program that lets you define a linear operator and apply this operator to a unit cube to visualize its effect. In fact, we can assign this operator to any node in a scene graph to transform the node and its children accordingly. Here we write a program that animates our band sphere in a transformed coordinate system. As in our earlier program, we define the transformation by writing coordinates into the basis1, basis2, and basis3 text fields. Recall, these values indicate the vector each of the three basis vectors get mapped to.

Transformed band sphere

The following function gets called whenever the user presses the Go button to apply the current linear operator:

function updateMap() {
    let M = getMatrix([controls.basis1, controls.basis2, controls.basis3]);
    if (M.determinant() == 0.0) {
        // restore identity matrix if M is singular
        M = new THREE.Matrix4();
        controls.basis1 = '1,0,0';
        controls.basis2 = '0,1,0';
        controls.basis3 = '0,0,1';
    }
    bandSphere.matrix.copy(M);
    bandSphere.matrixAutoUpdate = false;
}

The call to getMatrix in line 2 uses the three basis fields to construct a matrix representing the linear operator. If the matrix is singular, the operator’s range has fewer than three dimensions, which would unflatteringly flattening the sphere into only zero, one, or two dimensions. In this case we override the user’s input and restore the identity operator. Otherwise the operator as defined retains the sphere’s full three-dimensionality and we stick with the matrix returned by getMatrix.

Variable bandSphere references the scene graph node whose children are the animated bands. We define the node’s local coordinate system by assigning matrix M to it on line 10. By default, a node’s matrix is recomposed on every update based on the state of its position, scale, and rotation vectors. We override this default behavior on line 11, specifying that matrix M should be used directly as is. Since the bands are children of the transformed bandSphere node, they are transformed accordingly.