2b:null 2c:["$","title",null,{"children":"Supertoroid | sw1227 | Observable"}] 31:[] 2f:{"id":"68a82507188cde12","slug":"supertoroid","title":"Supertoroid","thumbnail":"fe11e3998568ca429e365ec5be983d0e42c0e6bb29318014c41b48272f55ab50","access_level":"public","create_time":"$D2019-08-06T13:58:25.377Z","update_time":"$D2019-10-17T12:33:35.517Z","view_time":null,"first_public_time":"$D2019-10-17T12:47:01.899Z","fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":423,"publish_version":423,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"f828b02efcb99767","slug":"math","title":"Math","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"Supertoroid","cells":[{"id":0,"value":"md`# Supertoroid\nHumans love doughnut-like shapes.\n\nIn [my previous notebook](https://observablehq.com/@sw1227/umbilic-torus), I've created a 3D visualization of parametrically defined doughnut-like shape, [Umbilic Torus](https://observablehq.com/@sw1227/umbilic-torus), which has single external face and single edge.\n\nHere I will implement another type of doughnut: [Supertoroid](https://en.wikipedia.org/wiki/Supertoroid). This shape has two parameters ${tex`(s, t)`}, each of which controls \"squareness\" in diferrent directions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`**Use sliders/dropdown to change the parameters/material**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"viewof s = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `s = ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof t = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `t = ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof material = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"materials = ({\n Normal: new THREE.MeshNormalMaterial({\n side: THREE.DoubleSide\n }),\n Wireframe: new THREE.MeshBasicMaterial({\n color: 0x22ff55,\n wireframe: true,\n transparent: true,\n depthWrite: false,\n side: THREE.DoubleSide,\n blending: THREE.AdditiveBlending\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`## Implementation\n[Supertoroid - Wikipedia](https://en.wikipedia.org/wiki/Supertoroid)\n\nSupertoroids are defined by the following parametric equations:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"tex.block`\n\\begin{cases}\nx = (a + C_u^s) C_v^t \\\\\ny = (b + C_u^s) S_v^t \\\\\nz = S_u^s\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`\nwhere\n${tex`C_{\\theta}^{\\epsilon} = \\operatorname{sgn}(\\operatorname{cos} \\theta) |\\operatorname{cos}|^{\\epsilon}, S_{\\theta}^{\\epsilon} = \\operatorname{sgn}(\\operatorname{sin} \\theta) |\\operatorname{sin}|^{\\epsilon}`}.\n\nParameters ${tex`u, v`} range in \n${tex`0 \\leq u \\leq 2\\pi, 0 \\leq v \\leq 2\\pi`}, and ${tex`a, b \\geq 1`} are the radii in the ${tex`x, y`} directions.\n\nLet's implement these equations first.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"position = (a, b, u, v) => {\n // Auxiliary functions C(), S()\n const C = (theta, eps) => (\n Math.sign(Math.cos(theta)) * Math.abs(Math.cos(theta))**eps\n );\n const S = (theta, eps) => (\n Math.sign(Math.sin(theta)) * Math.abs(Math.sin(theta))**eps\n );\n\n return new THREE.Vector3(\n (a + C(u, s)) * C(v, t),\n (b + C(u, s)) * S(v, t),\n S(u, s)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"md`\nIn the following cell, Three.js meshes for small triangles of a supertoroid are created by moving ${tex`(u, v)`} values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"supertoroid = function(s, t) {\n const meshes = [];\n\n // Use constant value 2 for a, b\n const a = 2;\n const b = 2;\n\n const du = Math.PI / 20;\n const dv = Math.PI / 20;\n d3.range(0, 2*Math.PI, du).forEach(u => {\n d3.range(0, 2*Math.PI, dv).forEach(v => {\n const param = [\n {u: u, v: v },\n {u: u+du, v: v },\n {u: u+du, v: v+dv},\n {u: u, v: v+dv}\n ];\n\n meshes.push(rect(\n ...param.map(p => position(a, b, p.u, p.v)),\n materials[material]\n ));\n });\n });\n\n return meshes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"// Make a Plane mesh with specified Material\nrect = (v1, v2, v3, v4, material) => {\n const planeGeometry = new THREE.Geometry();\n // add vertices\n [v1, v2, v3, v4].forEach(v => planeGeometry.vertices.push(v));\n // add faces\n planeGeometry.faces.push(new THREE.Face3(0, 1, 2));\n planeGeometry.faces.push(new THREE.Face3(2, 3, 0));\n planeGeometry.computeFaceNormals();\n // mesh\n const plane = new THREE.Mesh( planeGeometry, material );\n return plane;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x202020);\n supertoroid(s, t).forEach(m => scene.add(m));\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 0.1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(6, 4, 8)\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"