2c:null 2d:["$","title",null,{"children":"Clif4d: A Track-Torus | Scott Vorthmann | Observable"}] 32:T5bb,md`# Clif4d: A Track-Torus The rendering below is a [Clifford torus][1], a figure that lives in four dimensions, on the 3-sphere (in fact, cutting it into two equal halves). You can rotate the torus using a mouse drag in several ways: * With no key modifiers, do a normal 3D "trackball" rotation. * With the shift key held down, rotate in 4D, turning the torus inside-out. * With the alt/option key held down, rotate around a line perpendicular to the screen when dragging left and right, or rotate through that axis when dragging up and down, or both together. * With both shift and alt/option keys held down, rotate the torus around its poles. You can rotate around the red pole dragging up and down, and around the green pole dragging left and right, or around both at once. Since the Clifford torus is a 4D figure, we have to project to 3D to experience it (and again to 2D for your screen). Here we are using a [Stereographic projection][2], which maps the 3-sphere into normal 3D space plus a single point "at infinity". If you use the shift-drag, you can get a sense of this when you turn the torus inside out. See if you can find the exact halfway point, where the torus becomes a symmetric infinite sheet with a combined bridge+tunnel at the origin. Can you see how it divides space (and thus the 3-sphere) into two equal halves? [1]: https://en.wikipedia.org/wiki/Clifford_torus [2]: https://en.wikipedia.org/wiki/Stereographic_projection `33:T403,md` ## History and Plans This rendering was first developed by myself and Roice Nelson several years ago. [The original version][2] is still available, and it offers more mouse controls: 3D and 4D zoom using the scroll wheel with and without the shift key, respectively. In this notebook, we have ported the code to [three.js][3], and we have done some refactoring to spread it over several notebook cells. Our original intention for Clif4d was to support 4D rotation in different applications. The Clifford torus is a perfect "trackball control" for 4D rotations. The idea is to perform 4D rotations of some native 4D object such as the 120-cell, by first aligning the torus to get the rotation axes you want, then "rolling" it to rotate the object. Hopefully we'll have a demonstration of this usage soon! For now, the cell below displays the general 4D rotation matrix in use by the torus view above; do some shift-option rotations, and watch the values change. [2]: http://vzome.com/clif4d [3]: https://threejs.org/ `34:Te15,s3Renderer = function( geometry, canvasWidth, aspect=8/5 ) { const scene = new THREE.Scene(); scene.background = new THREE.Color( 0x888888 ); const fov = 20; const near = 1; const far = 5000; const camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); camera.position.z = 12; scene.add(camera); var torusRotation = new THREE.Matrix4() var generalRotation = new THREE.Matrix4() const uniforms = { torusRotation: { value: torusRotation.elements }, generalRotation: { value: generalRotation.elements }, cameraDist: { value: 1.0 } }; const material = new THREE.RawShaderMaterial( { uniforms, vertexShader: vertexShaderText, fragmentShader: fragmentShaderText } ); const mesh = new THREE.LineSegments( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); const renderWidth = canvasWidth || width; renderer.setSize(renderWidth, renderWidth/aspect); renderer.setPixelRatio(devicePixelRatio); const element = renderer .domElement var mouseDown = false var lastMouseX = null var lastMouseY = null function handleMouseDown(event) { mouseDown = true lastMouseX = event.clientX lastMouseY = event.clientY } function handleMouseUp(event) { mouseDown = false } function handleMouseMove(event) { if (!mouseDown) { return } const newX = event.clientX const newY = event.clientY const sensitivity = 0.012 const spinMatrix = new THREE.Matrix4() var deltaX = -( newX - lastMouseX ) var deltaY = -( newY - lastMouseY ) deltaX *= sensitivity deltaY *= sensitivity if( event.shiftKey && event.altKey ) { deltaX *= 0.1 deltaY *= 0.1 addXyWzSpin( deltaX, deltaY, spinMatrix ) generalRotation = applySpin( spinMatrix, generalRotation ) element .value = generalRotation.clone() element .dispatchEvent(new CustomEvent("input")); } else if( event.shiftKey ) { addXwYwSpin( deltaX, deltaY, spinMatrix ) torusRotation = applySpin( spinMatrix, torusRotation ) } else if( event.altKey ) { addXyWzSpin( deltaX, deltaY, spinMatrix ) torusRotation = applySpin( spinMatrix, torusRotation ) } else { addXzYzSpin( deltaX, deltaY, spinMatrix ) torusRotation = applySpin( spinMatrix, torusRotation ) } lastMouseX = newX lastMouseY = newY; } // element .addEventListener( 'keydown', handleKeyDown, false ); // element .addEventListener( 'keyup', handleKeyUp, false ); element .onmousedown = handleMouseDown; element .onmouseup = handleMouseUp; element .onmousemove = handleMouseMove; invalidation.then(() => ( renderer.dispose())); function animate() { requestAnimationFrame( animate ); // controls .update(); // Since all of our rotation code works in row-major order, but three.js Matrix4.elements // is in column-major order, we do a last-minute transpose here. We also // do a clone first, so our rotation matrices remain untouched. material.uniforms.torusRotation.value = torusRotation.clone().transpose().elements material.uniforms.generalRotation.value = generalRotation.clone().transpose().elements material.uniforms.cameraDist.value = 1.0 renderer .render( scene, camera ); } animate(); renderer .render( scene, camera ); // support viewof, to let this control another S3 rendering renderer .domElement .value = generalRotation.clone() return renderer.domElement; }35:Ta53,cliffordTorus = { const points = []; const indices = []; const colors = []; var n1 = 50; // use 300 to try the curvier lines bug, and uncomment the "% 6" lines below var n2 = 50; // 300 here, too var r = 1.0; var r1 = 0.5; var r2 = r - r1; if (r2 < 0) r2 = 0; r1 *= Math.sqrt(2); r2 *= Math.sqrt(2); var angleInc1 = 2 * Math.PI / n1; var angleInc2 = 2 * Math.PI / n2; var angle1 = 0; for (var i = 0; i < n1; i++) { var angle2 = 0; for (var j = 0; j < n2; j++) { points.push( r1 * Math.cos(angle1), r1 * Math.sin(angle1), r2 * Math.cos(angle2), r2 * Math.sin(angle2) ); colors.push( 0.8, 0.8, 0, 1 ); { if (i > 0) indices.push( (i - 1) * n1 + j, i * n1 + j ); else indices.push( j, (n2 - 1) * n1 + j ); } angle2 = angle2 + angleInc2; } angle1 = angle1 + angleInc1; } var current = points.length / 4; angle1 = 0; for (var i = 0; i < n1; i++) { var angle2 = 0; for (var j = 0; j < n2; j++) { points.push( r1 * Math.cos(angle1), r1 * Math.sin(angle1), r2 * Math.cos(angle2), r2 * Math.sin(angle2) ); colors.push( 0, 0.7, 1, 1 ); { if (j > 0) indices.push( current + i * n1 + j - 1, current + i * n1 + j ); else indices.push( current + i * n1, current + i * n1 + n2 - 1 ); } angle2 = angle2 + angleInc2; } angle1 = angle1 + angleInc1; } // // Add in the control lines. // We will do this as a separate shape (when the capability is added in). // r1 = r2 = 1; n1 = n2 = 500; angleInc1 = 2 * Math.PI / n1; angleInc2 = 2 * Math.PI / n2; current = points.length / 4; angle1 = 0; for( var i=0; i