# Rationale

For any non-null complex number $$z$$, it is possible to create an other complex number of modulus one:

$$\frac{z^2}{z\bar{z}}$$

In the particular case $$z = 1 + ti$$, an algebraic parametrization of the circle appears:

$$M(t) = (\frac{1 - t^2}{1 + t^2}, \frac{2t}{1+t^2})$$

Norman Wildberger suggests such transformation can and should be used to perform rotations in the plane, instead of using trigonometric functions (wikipedia article).

Can it also be done in 3D space? That is, for any two non-colinear vectors $$\mathbf{u}$$ and $$\mathbf{v}$$, how can we algebraically parametrize rotations in the $$(\mathbf{u},\mathbf{v})$$ plane?

We first write:

$$\mathbf{uv} = \mathbf{u}\cdot\mathbf{v} + \mathbf{u}\wedge\mathbf{v}$$

It is known, notably as pointed out by David Hestenes, that $$\mathbf{uv}$$ behaves as a complex number, with $$\mathbf{u}\cdot\mathbf{v}$$ being the real part and $$\mathbf{u}\wedge\mathbf{v}$$ the imaginary one.

Thus we can verify that:

$$R = \frac{(\mathbf{uv})^2}{\mathbf{uvvu}}$$

is of modulus one.

Therefore we can rotate any vector $$\mathbf{x}$$ with a sandwich product:

$$\mathcal{R}(\mathbf{x}) = \tilde{R}\mathbf{x}R$$

If we do it for three vectors of an orthonormal basis, we get the coefficients of the orthogonal matrix representation.

# Example

Say we are visualizing an object through a computer graphics interface such as WebGL. We want to write some code for rotating the object with the mouse. The mouse will move on the screen and we want to interpret this two-dimensional motion as a rotation.

For simplicity, we shall reason in the Normalized Device Coordinates (see for instance this) with $$(\mathbf{i},\mathbf{j},\mathbf{k})$$ as the orthonormal basis.

The motion of the mouse is thus:

$$\mathbf{m} = x \mathbf{i} + y \mathbf{j}$$

We want to parametrize rotations that occur in the plane

$$(\mathbf{k}, \mathbf{m})$$

If we want to obtain a similar expression as above, we should rather use the following basis:

$$(\mathbf{u},\mathbf{v}) = (-\mathbf{k}, -\mathbf{k} + \mathbf{m})$$

Then we have:

$$\mathbf{uv} = 1 + \mathbf{m}\wedge\mathbf{k} = 1 + x\mathbf{i}\wedge\mathbf{k} + y\mathbf{j}\wedge\mathbf{k}$$ $$(\mathbf{uv})^2 = 1 - x^2 - y^2 + 2 x\mathbf{i}\wedge\mathbf{k} + 2 y\mathbf{j}\wedge\mathbf{k}$$ $$\mathbf{uvvu} = 1 + x^2 + y^2$$

Let's note:

$$q = 1 + x^2 + y^2$$

and

$$s = 1 - x^2 - y^2$$

Then

$$R = \frac{s + 2 x\mathbf{i}\wedge\mathbf{k} + 2 y\mathbf{j}\wedge\mathbf{k}}{q}$$ \begin{align*} q^2\tilde{R}\mathbf{i}R & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})\mathbf{i}(s + 2 x\mathbf{i}\wedge\mathbf{k} + 2 y\mathbf{j}\wedge\mathbf{k})\\ & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})(s\mathbf{i} + 2 x\mathbf{k} + 2 y\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k})\\ & = s^2\mathbf{i} + 2s x\mathbf{k} + 2s y\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} + 2s x\mathbf{k} - 4 x^2\mathbf{i} - 4 xy\mathbf{j} - 2s y\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} - 4xy\mathbf{j} + 4y^2\mathbf{i}\\ & = (s^2 - 4 (x^2 - y^2))\mathbf{i} - 8 xy\mathbf{j} + 4s x\mathbf{k} \end{align*} \begin{align*} q^2\tilde{R}\mathbf{j}R & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})\mathbf{j}(s + 2 x\mathbf{i}\wedge\mathbf{k} + 2 y\mathbf{j}\wedge\mathbf{k})\\ & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})(s\mathbf{j} - 2x\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} + 2y\mathbf{k})\\ & = s^2\mathbf{j} - 2sx\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} + 2sy\mathbf{k} +2sx\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} +4x^2\mathbf{j} -4xy\mathbf{i} +2sy\mathbf{k} - 4xy\mathbf{i} - 4y^2\mathbf{j}\\ & =-8xy\mathbf{i} + (s^2 + 4(x^2 - y^2))\mathbf{j} + 4sy\mathbf{k} \end{align*} \begin{align*} q^2\tilde{R}\mathbf{k}R & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})\mathbf{k}(s + 2 x\mathbf{i}\wedge\mathbf{k} + 2 y\mathbf{j}\wedge\mathbf{k})\\ & = (s - 2 x\mathbf{i}\wedge\mathbf{k} - 2 y\mathbf{j}\wedge\mathbf{k})(s\mathbf{k} - 2 x\mathbf{i} - 2 y\mathbf{j})\\ & = s^2\mathbf{k} - 2sx\mathbf{i} - 2sy\mathbf{j} -2sx\mathbf{i} -4x^2\mathbf{k} - 4xy\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} -2sy\mathbf{j}+4xy\mathbf{i}\wedge\mathbf{j}\wedge\mathbf{k} - 4y^2\mathbf{k}\\ & = -4sx\mathbf{i} - 4sy\mathbf{j} + (s^2 - 4(x^2 + y^2))\mathbf{k} \end{align*}

Which gives the matrix:

$$\frac{1}{q^2}\begin{pmatrix} s^2 + 4(y^2 - x^2) & -8xy & -4sx\\ -8xy & s^2 + 4(x^2 - y^2) & -4sy\\ 4sx & 4sy & s^2 - 4(x^2 + y^2) \end{pmatrix}$$

# WebGL implementation

Below is a colored cube. It's the same that can be found on this WebGL tutorial.

You should be able to rotate it with your mouse.

Apparently your browser does not support HTML5 canvas.
Euler-like

In this code there is no trigonometric function (no Math.cos nor Math.sin) and no Math.sqrt call whatsoever.