30:T6b8,md`# Clifford torus A [clifford torus](https://en.wikipedia.org/wiki/Clifford_torus) (named after [William Kingdon Clifford](https://en.wikipedia.org/wiki/William_Kingdon_Clifford)) is the cartesian product of two Circles (${tex`S_{a}^1 \times S_{b}^1`}). It resides in ${tex`\R^4`}, as opposed to in ${tex`\R^3`}. The visualization below shows a [stereographic projection](https://en.wikipedia.org/wiki/Stereographic_projection) of a rotating clifford torus on a canvas. Given a four dimensional vector ${tex`\vec v`}, and *assuming* that it is a [quaternion](https://en.wikipedia.org/wiki/Quaternion), we can rotate the vector ${tex`\vec v`} with a pair of unit quaternions ${tex`\boldsymbol q_1`} and ${tex`\boldsymbol q_2`}. ${ tex.block` f(\vec v) = \boldsymbol q_1 \vec v \boldsymbol q_2 = \begin{pmatrix} a_1 & -b_1 & -c_1 & -d_1 \\ b_1 & a_1 & -d_1 & c_1 \\ c_1 & d_1 & a_1 & -b_1 \\ d_1 & -c_1 & b_1 & a_1 \end{pmatrix} \begin{pmatrix} x \\ y \\ z \\ w \end{pmatrix} \begin{pmatrix} a_2 & -b_2 & -c_2 & -d_2 \\ b_2 & a_2 & d_2 & -c_2 \\ c_2 & -d_2 & a_2 & b_2 \\ d_2 & c_2 & -b_2 & a_2 \end{pmatrix} ` } A pair of unit quaternions can represent any [rotation in 4D space](https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation#Pairs_of_unit_quaternions_as_rotations_in_4D_space). Arbitrary four dimensional rotations have 6 degrees of freedom, each matrix represents 3 of those 6 degrees of freedom. Drag the mouse over the canvas to manually change the rotation! *See also these notebooks: [Clif4d: A Track-Torus](https://observablehq.com/@vorth/clif4d-a-track-torus) by Scott Vorthmann [Clifford Torus](https://observablehq.com/@timhau/clifford-torus) by Tim Hau* `31:T816,{ const context = DOM.context2d(width, height); let xy = 0, yz = 0, xz = 0; let xw = 0, yw = 0, zw = 0; let mouseDown = false; let lastX = null; let lastY = null; function handleMouseDown(event) { mouseDown = true; lastX = event.clientX; lastY = event.clientY; context.canvas.style.cursor = "grabbing"; } function handleMouseUp(event) { mouseDown = false; context.canvas.style.cursor = "grab"; } function handleMouseMove(event) { if (!mouseDown) { return } const newX = event.clientX const newY = event.clientY const sensitivity = 0.012 let deltaX = (newX - lastX) * sensitivity; let deltaY = -(newY - lastY) * sensitivity; xz += -deltaY; zw += deltaY; yz += deltaX; yw += deltaX; lastX = newX lastY = newY; } function drawCircle(index) { let [x, y] = torus.data[index[0]].project2D(); context.beginPath(); context.moveTo(x, y); for (let j = 1; j < torus._LOD; ++j) { [x, y] = torus.data[index[j]].project2D(); context.lineTo(x, y); } context.closePath(); context.stroke(); } context.translate(width / 2, height / 2); context.scale(scale, scale); context.lineWidth = 1 / scale; context.fillStyle = "white"; context.canvas.onmousedown = handleMouseDown; context.canvas.onmouseup = handleMouseUp; context.canvas.onmousemove = handleMouseMove; context.canvas.style.cursor = "grab"; while (true) { if (!mouseDown) { xy += 0.00; yz += 0.02; xz += 0.00; xw += 0.00; yw += 0.00; zw += 0.00; } torus.rotate(xy, yz, xz, xw, yw, zw); context.fillRect(-width / 2, -height / 2, width, height); for (let i = 0, start; i < torus._LOD; ++i) { context.strokeStyle = colors[i]; drawCircle(torus.indices[0][i]); } for (let i = 0; i < torus._LOD; ++i) { context.strokeStyle = colors[i]; drawCircle(torus.indices[1][i]); } yield context.canvas; } }32:T572,class CliffordTorus { constructor(radius1, radius2, LOD = 50) { this._r1 = radius1; this._r2 = radius2; this._LOD = LOD; this.rotor = new Rotor4(); this.data = new Array(this._LOD ** 2); this.indices = [ Array.from({ length: this._LOD }, () => new Uint16Array(this._LOD)), Array.from({ length: this._LOD }, () => new Uint16Array(this._LOD)) ]; this._createData(); this._createIndices(); } *[Symbol.iterator]() { for(let i = 0; i < this.data.length; ++i) { yield this.data[i]; } } _createData() { for (let i = 0; i < this.data.length; ++i) { let v = (i % this._LOD) * step, u = Math.floor(i / this._LOD) * step; this.data[i] = this.getPoint(u, v).setCache(); } } _createIndices() { for (let i = 0; i < this._LOD; ++i) { for (let j = 0; j < this._LOD; ++j) { this.indices[0][i][j] = i * this._LOD + j; this.indices[1][i][j] = j * this._LOD + i; } } } getPoint(u, v) { return new Point4().set( this._r1 * Math.cos(u) * rad, this._r1 * Math.sin(u) * rad, this._r2 * Math.cos(v) * rad, this._r2 * Math.sin(v) * rad ); } rotate(a, b, c, d, e, f) { this.rotor.angles(a, b, c, d, e, f); for (let i = 0; i < this.data.length; ++i) { this.data[i].rotate(this.rotor); } } }33:T538,class Point4 extends Vector4 { constructor(x, y, z, w) { super(); Object.defineProperty(this, "_cache", { value: Object.defineProperties({}, { data: { value: new Float64Array(4), writeable: true }, vec3: { value: new Float64Array(3), writeable: true }, vec2: { value: new Float64Array(2), writeable: true } }) }); } reset() { return this.set( this._cache.data[0], this._cache.data[1], this._cache.data[2], this._cache.data[3] ); } setCache() { this._cache.data[0] = this[0]; this._cache.data[1] = this[1]; this._cache.data[2] = this[2]; this._cache.data[3] = this[3]; return this; } rotate([m1, m2]) { return this.reset() .applyMatrix(m1) .applyMatrix(m2); } project3D(distance = 2) { let d = distance - this[3]; this._cache.vec3[0] = this[0] / d; this._cache.vec3[1] = this[1] / d; this._cache.vec3[2] = this[2] / d; return this._cache.vec3; } project2D(distance = 2) { let d1 = distance - this[3], d2 = distance - this[2] / d1; this._cache.vec2[0] = this[0] / d1 / d2; this._cache.vec2[1] = this[1] / d1 / d2; return this._cache.vec2; } }34:[] 2e:{"title":"Clifford torus","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"torus = new CliffordTorus(radius1, radius2, LOD)","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"step = tau / LOD","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"LOD = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"radius1 = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"radius2 = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"scale = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"height = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"rad = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"tau = Math.PI * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"// https://en.wikipedia.org/wiki/Conversion_between_quaternions_and_Euler_angles\nclass Quaternion extends Vector4 {\n \n angles(a, b, c) {\n \n a /= 2, b /= 2, c /= 2;\n\n const sa = Math.sin(a),\n ca = Math.cos(a),\n sb = Math.sin(b),\n cb = Math.cos(b),\n sc = Math.sin(c),\n cc = Math.cos(c);\n\n return this.set(\n ca * cb * cc + sa * sb * sc,\n sa * cb * cc - ca * sb * sc,\n ca * sb * cc + sa * cb * sc,\n ca * cb * sc - sa * sb * cc\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"// https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation\nclass Rotor4 {\n \n constructor() {\n this._q1 = new Quaternion();\n this._q2 = new Quaternion();\n this.m1 = new Matrix4();\n this.m2 = new Matrix4();\n }\n \n *[Symbol.iterator]() {\n yield this.m1;\n yield this.m2;\n }\n \n angles(a, b, c, d, e, f) {\n this.angles1(a, b, c);\n this.angles2(d, e, f);\n }\n \n angles1(a, b, c) {\n this._q1.angles(a, b, c);\n let q1 = this._q1;\n this.m1.set(\n q1[0], -q1[1], -q1[2], -q1[3],\n q1[1], q1[0], -q1[3], q1[2],\n q1[2], q1[3], q1[0], -q1[1],\n q1[3], -q1[2], q1[1], q1[0]\n );\n }\n\n angles2(a, b, c) {\n this._q2.angles(a, b, c);\n let q2 = this._q2;\n this.m2.set(\n q2[0], -q2[1], -q2[2], -q2[3],\n q2[1], q2[0], q2[3], -q2[2],\n q2[2], -q2[3], q2[0], q2[1],\n q2[3], q2[2], -q2[1], q2[0]\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"class Vector4 extends Float64Array {\n \n constructor() {\n super(4);\n }\n \n set(x, y, z, w) {\n this[0] = +x || 0;\n this[1] = +y || 0;\n this[2] = +z || 0;\n this[3] = +w || 0;\n return this;\n }\n \n applyMatrix(m) {\n let x = this[0], y = this[1], z = this[2], w = this[3];\n this[0] = x * m[0] + y * m[4] + z * m[8] + w * m[12];\n this[1] = x * m[1] + y * m[5] + z * m[9] + w * m[13];\n this[2] = x * m[2] + y * m[6] + z * m[10] + w * m[14];\n this[3] = x * m[3] + y * m[7] + z * m[11] + w * m[15];\n return this;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"class Matrix4 extends Float64Array {\n \n constructor() {\n super(16);\n }\n\n\tset(\n a, b, c, d,\n e, f, g, h,\n i, j, k, l,\n m, n, o, p\n ) {\n\t\tthis[ 0] = a; this[ 1] = b; this[ 2] = c; this[ 3] = d;\n\t\tthis[ 4] = e; this[ 5] = f; this[ 6] = g; this[ 7] = h;\n\t\tthis[ 8] = i; this[ 9] = j; this[10] = k; this[11] = l;\n\t\tthis[12] = m; this[13] = n; this[14] = o; this[15] = p;\n\t}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"colors = Array.from({ length: LOD }, (_, i) => d3.interpolateTurbo(i / LOD));","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"d3 = require(\"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}