45:["$","title",null,{"children":"Torus Circles and Fundamental Polygon | Lao | Observable"}] 4d:T457c,canvas = { // DRAG SENSITIVITY — adjust these to taste --------------- const moveSensitivity = 0.05; // middle-mouse drag → Move sliders const bendSensitivity = 0.003; // right-mouse drag → Bend sliders // SHARED STATE (replaces all mutable variables) -------- const state = { close: { x: 0.8, y: 0.8 }, move: { x: 0, y: 0 }, twist: { x: 0, y: 0 }, warp: 1, radius: 0, opacity: .75, shadows: true }; const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); if (isMobile) state.shadows = false; // SET UP ------------------------------------------------ const resolution = 100; const planeSize = 10; const pi = Math.PI; const aspect = 0.5; const height = width * aspect; const scene = new THREE.Scene(); // FUNCTIONS --------------------------------------------- function savePoints(mesh) { mesh.savedPoints = mesh.geometry.clone(); } let p, q, y0, z0, x1, z1; function f(x, y, z, settings) { x = x + y * settings[4]; y = y + x * settings[5]; x = x + settings[2]; y = y + settings[3]; y += (1 - settings[7]) * 0.85 * settings[0] * settings[1] * settings[6] * (Math.sin(pi / 5 * y + pi) + 0.15 * Math.sin(2 * pi / 5 * y)); x += settings[7] * 0.85 * settings[0] * settings[1] * settings[6] * (Math.sin(pi / 5 * x + pi) + 0.15 * Math.sin(2 * pi / 5 * x)); p = 1 / (0.999 * settings[0] + 0.001); q = 1 / (0.999 * settings[1] + 0.001); y0 = q * Math.sin(pi * y / (5 * q)); z0 = -q + q * Math.cos(pi * y / (5 * q)); x1 = -p + p * Math.cos(pi * x / (5 * p)); z1 = p * Math.sin(pi * x / (5 * p)); x = x * pi / 5; y = y * pi / 5; return [ (1 - settings[7]) * ((p - z0) * Math.sin((1 - z0 / p) * x / (p - z0))) + settings[7] * z1, (1 - settings[7]) * y0 + settings[7] * ((q - x1) * Math.sin((1 - x1 / q) * y / (q - x1))), (1 - settings[7]) * (-(p - z0) * Math.cos((1 - z0 / p) * x / (p - z0)) + p - settings[0] + settings[1] - settings[0] * settings[1]) + settings[7] * (-(q - x1) * Math.cos((1 - x1 / q) * y / (q - x1)) + q + settings[0] - settings[1] - settings[0] * settings[1]) ]; } function updateSurface(mesh, settings) { const count = mesh.geometry.vertices.length; let positions; for (let i = 0; i < count; i++) { positions = f(mesh.savedPoints.vertices[i].x, mesh.savedPoints.vertices[i].y, mesh.savedPoints.vertices[i].z, settings); mesh.geometry.vertices[i].x = positions[0]; mesh.geometry.vertices[i].y = positions[1]; mesh.geometry.vertices[i].z = positions[2]; } mesh.geometry.computeVertexNormals(); mesh.geometry.verticesNeedUpdate = true; } // CAMERA ------------------------------------------------ const camera = new THREE.PerspectiveCamera(40, width / height, 1, 10000); camera.position.set(0, 2.5, 11); camera.lookAt(0, 0, 0); // RENDERER ---------------------------------------------- const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor("#f6f6f6"); renderer.setSize(width, height); if (isMobile) { renderer.shadowMap.enabled = false; } else { renderer.shadowMap.enabled = true; } renderer.shadowMap.type = THREE.PCFSoftShadowMap; // BUILD UI WRAPPER -------------------------------------- const wrapper = html`

`; // OPTIONS 1 — above the scene const sliderWidth = Math.round(width / 5); const form1 = html``; // Twist coupling: moving one resets the other form1.xTwist.addEventListener('input', () => { form1.yTwist.value = 0; syncState(); }); form1.yTwist.addEventListener('input', () => { form1.xTwist.value = 0; syncState(); }); // Radius coupling: sum to 1 form1.xRadius.addEventListener('input', function () { form1.yRadius.value = 1 - this.valueAsNumber; syncState(); }); form1.yRadius.addEventListener('input', function () { form1.xRadius.value = 1 - this.valueAsNumber; syncState(); }); // OPTIONS 2 — below the scene const form2 = html``; // SYNC STATE from both forms ---------------------------- function syncState() { state.close.x = Math.max(form1.xClose.valueAsNumber, 0.000001); state.close.y = Math.max(form1.yClose.valueAsNumber, 0.000001); state.move.x = form1.xMove.valueAsNumber; state.move.y = form1.yMove.valueAsNumber; state.twist.x = form1.xTwist.valueAsNumber; state.twist.y = form1.yTwist.valueAsNumber; state.radius = form1.yRadius.valueAsNumber; state.warp = form2.warp.valueAsNumber; state.opacity = form2.opacity.valueAsNumber; state.shadows = form2.shadows.valueAsNumber === 1; } form1.oninput = syncState; form2.oninput = syncState; syncState(); // SANDWICH: options1 → scene → options2 wrapper.appendChild(form1); wrapper.appendChild(renderer.domElement); wrapper.appendChild(form2); yield wrapper; // CAMERA CONTROLS --------------------------------------- const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; controls.enableRotate = true; // MOUSE DRAG — middle = move, right = bend -------------- { let dragButton = -1; let dragStartX = 0; let dragStartY = 0; let startValX = 0; let startValY = 0; function clamp(val, min, max) { return Math.min(max, Math.max(min, val)); } renderer.domElement.addEventListener('pointerdown', (e) => { // 1 = middle, 2 = right if (e.button !== 1 && e.button !== 2) return; e.preventDefault(); dragButton = e.button; dragStartX = e.clientX; dragStartY = e.clientY; if (dragButton === 1) { // middle → Move startValX = form1.xMove.valueAsNumber; startValY = form1.yMove.valueAsNumber; } else { // right → Bend startValX = form1.xClose.valueAsNumber; startValY = form1.yClose.valueAsNumber; } // disable orbit while dragging controls.enableRotate = false; renderer.domElement.setPointerCapture(e.pointerId); }); renderer.domElement.addEventListener('pointermove', (e) => { if (dragButton === -1) return; let dx = e.clientX - dragStartX; let dy = e.clientY - dragStartY; // shift-snap: lock to the dominant axis if (e.shiftKey) { if (Math.abs(dx) >= Math.abs(dy)) { dy = 0; } else { dx = 0; } } if (dragButton === 1) { // middle → Move const minX = parseFloat(form1.xMove.min); const maxX = parseFloat(form1.xMove.max); const minY = parseFloat(form1.yMove.min); const maxY = parseFloat(form1.yMove.max); form1.xMove.value = clamp(startValX + dx * moveSensitivity, minX, maxX); form1.yMove.value = clamp(startValY - dy * moveSensitivity, minY, maxY); } else { // right → Bend const minX = parseFloat(form1.xClose.min); const maxX = parseFloat(form1.xClose.max); const minY = parseFloat(form1.yClose.min); const maxY = parseFloat(form1.yClose.max); form1.xClose.value = clamp(startValX + dx * bendSensitivity, minX, maxX); form1.yClose.value = clamp(startValY - dy * bendSensitivity, minY, maxY); } syncState(); }); function endDrag(e) { if (dragButton === -1) return; dragButton = -1; controls.enableRotate = true; renderer.domElement.releasePointerCapture(e.pointerId); } renderer.domElement.addEventListener('pointerup', endDrag); renderer.domElement.addEventListener('pointercancel', endDrag); // prevent right-click context menu on the canvas renderer.domElement.addEventListener('contextmenu', (e) => e.preventDefault()); } // MATERIALS --------------------------------------------- // Two-pass transparency: render back faces first, then front faces. // This avoids depth-sorting artifacts with DoubleSide transparent geometry. const matBack = new THREE.MeshStandardMaterial({ color: 'lightgrey', roughness: 0.2, metalness: 0, side: THREE.BackSide, depthWrite: false, transparent: true, opacity: 0.5 }); const matFront = new THREE.MeshStandardMaterial({ color: 'lightgrey', roughness: 0.2, metalness: 0, side: THREE.FrontSide, depthWrite: false, transparent: true, opacity: 0.5 }); const matDots = new THREE.MeshStandardMaterial({ color: 'lightgrey', roughness: 0.7, metalness: 0 }); const matLine = new THREE.LineBasicMaterial({ color: 0x000000 }); // HELPERS ----------------------------------------------- let updateList = []; let pointList = []; const root = new THREE.Group(); scene.add(root); // SHAPE ------------------------------------------------- const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize, resolution, resolution); // Back-face pass (renders first) const planeMeshBack = new THREE.Mesh(planeGeo, matBack); planeMeshBack.castShadow = true; planeMeshBack.receiveShadow = true; planeMeshBack.renderOrder = 0; savePoints(planeMeshBack); updateList.push(planeMeshBack); scene.add(planeMeshBack); // Front-face pass (renders second, on top) const planeMeshFront = new THREE.Mesh(planeGeo, matFront); planeMeshFront.castShadow = true; planeMeshFront.receiveShadow = true; planeMeshFront.renderOrder = 1; // shares the same geometry — no need for its own savedPoints or updateList entry scene.add(planeMeshFront); // LINES ------------------------------------------------- let start = [-5, 5, -5, -5, -5, -5, 5, -5, -5, 5, -5, -5]; let step = [0.1, 0, 0.1, 0, 0, 0.1, 0, 0.1, 0.1, -0.1, 0.1, 0.1]; let color = [0xD52D2B, 0xD52D2B, 0x416CFF, 0x416CFF, 0x000000, 0x000000]; let array = []; for (let i = 0; i < 6; i++) { array = []; for (let j = 0; j < resolution + 1; j++) { array.push(new THREE.Vector3(start[2 * i] + step[2 * i] * j, start[2 * i + 1] + step[2 * i + 1] * j, 0)); } let geoLine = new THREE.Geometry(); geoLine.vertices = array; const line = new THREE.Line(geoLine, matLine.clone()); line.material.color.setHex(color[i]); savePoints(line); updateList.push(line); root.add(line); } // POINTS ------------------------------------------------ for (let i = 0; i < 5; i++) { const geometry = new THREE.SphereGeometry(0.21, 12, 12); const sphere = new THREE.Mesh(geometry, matDots.clone()); if (i < 1) { sphere.material.color.setHex(0x101010); } else { sphere.material.color.setHex(0xB0B0B0); sphere.material.emissive.setHex(0x202020); } sphere.position.set(2 * i - 3, 2, 1); sphere.castShadow = false; sphere.receiveShadow = true; pointList.push(sphere); scene.add(sphere); } // ARROWS ------------------------------------------------ for (let i = 0; i < 4; i++) { const geometry = new THREE.ConeGeometry(0.3, 0.45, 16); const cone = new THREE.Mesh(geometry, matDots.clone()); if (i < 2) { cone.material.color.setHex(0xD52D2B); cone.material.emissive.setHex(0x400000); } else { cone.material.color.setHex(0x416CA8); cone.material.emissive.setHex(0x001010); } cone.position.set(2 * i - 3, 0, 1); cone.castShadow = false; cone.receiveShadow = true; pointList.push(cone); scene.add(cone); } // LIGHTS ------------------------------------------------ const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5); hemiLight.color.setHSL(0.6, 0.6, 0.6); hemiLight.groundColor.setHSL(0.095, 0.5, 0.75); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); const ambientLight = new THREE.AmbientLight(0x505050); scene.add(ambientLight); const dirLight = new THREE.DirectionalLight(0xffffbb, 0.75); dirLight.color.setHSL(0.1, 1, 0.95); dirLight.position.set(-50, 50, 50); dirLight.castShadow = true; scene.add(dirLight); dirLight.shadow.camera = new THREE.OrthographicCamera(-11, 11, 11, -11, 70, 130); dirLight.shadow.mapSize.width = 2160; dirLight.shadow.mapSize.height = 2160; dirLight.shadow.bias = -0.0025; dirLight.shadow.radius = 2; // RENDER LOOP ------------------------------------------- let setLast, setNow = []; let change, camPos; let quaternion = new THREE.Quaternion(); let v1 = new THREE.Vector3(0, 1, 0); let v2 = new THREE.Vector3(1, 0, 0); const render = function () { requestAnimationFrame(render); setLast = setNow; setNow = [ state.close.x, state.close.y, state.move.x, state.move.y, state.twist.x, state.twist.y, state.warp, state.radius ]; change = false; for (let i = 0; i < setNow.length; i++) { if (setNow[i] != setLast[i]) { change = true; } } // visual settings const op = state.opacity; matBack.opacity = op; matFront.opacity = op; if (op == 1) { matBack.transparent = false; matBack.depthWrite = true; matFront.transparent = false; matFront.depthWrite = true; } else { matBack.transparent = true; matBack.depthWrite = false; matFront.transparent = true; matFront.depthWrite = false; } renderer.shadowMap.enabled = state.shadows; dirLight.castShadow = state.shadows; // update torus surface, lines and points if change of inputs if (change) { for (let i = 0; i < updateList.length; i++) { updateSurface(updateList[i], setNow); } // center black point pointList[0].position.set(updateList[5].geometry.vertices[50].x, updateList[5].geometry.vertices[50].y, updateList[5].geometry.vertices[50].z); // corner white points pointList[1].position.set(updateList[1].geometry.vertices[0].x, updateList[1].geometry.vertices[0].y, updateList[1].geometry.vertices[0].z); pointList[2].position.set(updateList[1].geometry.vertices[100].x, updateList[1].geometry.vertices[100].y, updateList[1].geometry.vertices[100].z); pointList[3].position.set(updateList[2].geometry.vertices[0].x, updateList[2].geometry.vertices[0].y, updateList[2].geometry.vertices[0].z); pointList[4].position.set(updateList[2].geometry.vertices[100].x, updateList[2].geometry.vertices[100].y, updateList[2].geometry.vertices[100].z); // colored edge arrow position pointList[5].position.set(updateList[1].geometry.vertices[50].x, updateList[1].geometry.vertices[50].y, updateList[1].geometry.vertices[50].z); pointList[6].position.set(updateList[2].geometry.vertices[50].x, updateList[2].geometry.vertices[50].y, updateList[2].geometry.vertices[50].z); pointList[7].position.set(updateList[3].geometry.vertices[50].x, updateList[3].geometry.vertices[50].y, updateList[3].geometry.vertices[50].z); pointList[8].position.set(updateList[4].geometry.vertices[50].x, updateList[4].geometry.vertices[50].y, updateList[4].geometry.vertices[50].z); // colored edge arrow rotation for (let i = 0; i < 4; i++) { v2.set( updateList[1 + i].geometry.vertices[51].x - updateList[1 + i].geometry.vertices[49].x, updateList[1 + i].geometry.vertices[51].y - updateList[1 + i].geometry.vertices[49].y, updateList[1 + i].geometry.vertices[51].z - updateList[1 + i].geometry.vertices[49].z ).normalize(); pointList[5 + i].quaternion.copy(quaternion.setFromUnitVectors(v1, v2)); } } // offset lines so they look sharper camPos = camera.position.clone().normalize().multiplyScalar(0.03); root.position.set(camPos.x, camPos.y, camPos.z); renderer.render(scene, camera); }; render(); }4e:Tba1,## Settings ### Bend Bending transitions between the torus and polygon. I like to imagine the blue and red circles as bracelets with a clasp. Opening a bracelet and pulling it straight is like cutting the torus and flattening out the surface. Closing the bracelet is like gluing the cut edges back together. When the torus is opened, notice the pairs of arrows on the blue and red sides. These show how to line up the edges when gluing them back together. There are [four ways](https://en.wikipedia.org/wiki/Fundamental_polygon#Examples_of_Fundamental_Polygons_Generated_by_Parallelograms) to arrange the sides and arrows, and if they were arranged differently, then the polygon would glue together as either a sphere, Klein bottle, or the real projective plane. ### Move Moving translates the polygon when the torus is open, and rotates the torus when closed. I recommend playing with the movement when the torus is partly open and opening and closing the torus with the polygon at different positions. ### Twist Twisting shears the polygon into a rhombus and twists the torus along either major or minor circle. When fully twisted, one Villarceau circle exchanges places with one of the colored circles, and the other Villarceau circle is twisted into a (2,1) knot. ### Radius The size of the two radii can be adjusted to determine which colored circle is minor and which is major. By default, the red circle is major and the blue circle is minor, orienting the torus horizontally. These can be switched to orient the torus vertically. I opted for a simple transition, but if this torus is actually a hyper dimensional Clifford torus, there are some really cool ways to rotate the torus inside out, like shown in this [shadertoy](https://www.shadertoy.com/view/wsfGDS). ### Projection Warp When bending the fundamental polygon into a 3D torus, the surface must be stretched, and we need to decide how to warp the surface. Alternatively, if this is a 3D shadow of a 4D Clifford torus, we have to decide how the 4D torus is projected down to 3D. This is just like how world map makers have to choose how they want to stretch the 3D globe onto a 2D rectangle. The projection warp lets you decide between preserving circles or distance. By default, the two black Villarceau circles are preserved, but at the price of squishing opposite points along the minor circle closer together. The other option is to preserve the distance between opposite points along the minor circle, but at the price of warping the Villarceau circles into blobs. The difference is especially apparent when the surface is transparent. ### Surface Opacity The surface opacity controls how visible the torus surface is. The circles are easiest to see when the surface is totally transparent, but without the surface, some people mistake the two black circles as the cage of a sphere. ### Shadows This toggles shadows on and off. By default, they are on for computers and off for mobile devices.4f:[] 49:{"id":"488b3f372da53cb2","slug":"torus-polygon-and-circles","title":"Torus Circles and Fundamental Polygon","thumbnail":"1a392567c1082fce333bc18b0104837ba0f7b54fa0ce63eca1167bc40fe8014e","access_level":"public","create_time":"$D2022-01-05T20:25:30.456Z","update_time":"$D2026-04-06T19:10:00.993Z","view_time":null,"first_public_time":"$D2022-01-08T04:40:00.558Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false},"version":1613,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"7c6daec74743886b","reply_to_id":null,"content":"This is one of my favorite notebooks ever. Impressive work.","create_time":"$D2023-12-20T17:44:14.492Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null}},{"id":"61507ec5caef0630","reply_to_id":"7c6daec74743886b","content":"That means a lot, thanks <3","create_time":"$D2023-12-26T18:17:22.712Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Torus Circles and Fundamental Polygon","cells":[{"id":3,"value":"md` # Torus Circles and Fundamental Polygon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"This model demonstrates the [four circles](https://mathworld.wolfram.com/VillarceauCircles.html) and the [fundamental polygon](https://en.wikipedia.org/wiki/Fundamental_polygon) of a [torus](https://en.wikipedia.org/wiki/Torus). The red and blue lines are the major and minor radius, and the black lines are two [Villarceau circles](https://en.wikipedia.org/wiki/Villarceau_circles).\n\nIf we consider this as a regular torus, then bending between the cylindrical and torus states will stretch and warp the surface. However, you can also consider this a 3D shadow of a hyper-dimensional [Clifford torus](https://en.wikipedia.org/wiki/Clifford_torus), which does not stretch the surface at any point when bending. Because of this property, a Clifford torus is sometimes called a [flat torus](https://en.wikipedia.org/wiki/Torus#Flat_torus).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1433,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"mutable input = ({\n close: ({\n x: 0,\n y: 0\n }) ,\n move: ({\n x: 0,\n y: 0\n }),\n twist: ({\n x:0,\n y:0\n }),\n warp:0,\n radius:0,\n opacity:0,\n shadows:false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n //await require(\"three@0.96/examples/js/postprocessing/EffectComposer.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null