2d:null 2e:["$","title",null,{"children":"Torus = Circle * Circle | Steven De Keninck | Observable"}] 33:T1232,md`# Torus = Circle * Circle In Topology a torus is described as the product of two circles. Similarly one describes a cylinder as the product of a circle and a line segment. Degenerate circles (with zero radius) can be used to construct spheres and cones. In this notebook we'll explore an implementation using ganja.js that allows you to actually multiply two circles to generate a torus. The *trick*, if you want to call it that, consists out of constructing the two basic one dimensional shapes (circles and line segments) as the orbits of a motor variable. Motor variables in PGA are isomorph to dual quaternions and represent a specific location and orientation in space - similar to a 4x4 transformation matrix. So motor variables can be used to describe translations and rotations. A circle can now be seen as starting with the origin, moving it *radius* to the side and then rotating it ${tex`2\pi`} around. If we parametrize that rotation, creating a function of one parameter *x*, the path created by evaluating this function with *x* going from \`\`\`0\`\`\` to \`\`\`1\`\`\` will be a circle. The product of two such parametrized motors creates a function of two parameters, the result of which describes a manifold in space. Using ${tex`\bullet`} to represent the origin, ${tex`\curvearrowleft`} to denote a rotation and ${tex`\leftarrow`} to denote a translation, we can write our basic geometric objects (read from right-to-left, like matrix multiplication) : | figure | transformation | |--------|----------------| |${tex`\text{line}_x`}|${tex`\underset x \leftarrow \, \bullet`}| |${tex`\text{circle}_x`}|${tex`\underset x \curvearrowleft \,\, \underset r \leftarrow \, \bullet`}| |${tex`\text{plane}_{xy}`}|${tex`\underset x \leftarrow \,\, \underset y \leftarrow \, \bullet`}| |${tex`\text{cylinder}_{xy}`}|${tex`\underset x \curvearrowleft \,\, \underset y \leftarrow \,\, \underset r \leftarrow \, \bullet`}| |${tex`\text{sphere}_{xy}`}|${tex`\underset x \curvearrowleft \,\, \underset y \curvearrowleft \,\, \underset r \leftarrow \, \bullet`}| |${tex`\text{torus}_{xy}`}|${tex`\underset x \curvearrowleft \,\, \underset {r_1} \leftarrow \,\, \underset y \curvearrowleft \,\, \underset {r_2} \leftarrow \, \bullet`}| Note that this reveals how all the shapes above can be constructed from the torus .. We use the orbits of the motors of 3D PGA ${tex`\mathbb R^*_{3,0,1}`} to create circles, line segments, which we can then **multiply** to create the torus, sphere, cone, disk, cylinder, .. ## 1D Orbits We parametrize a motor ${tex`\mathbf M_t`} of a parameter ${tex`0 \leq t \leq 1`} and consider its path ${tex`\mathbf G_t`} as it transforms the origin ${tex`\bf o`} : ${tex`\mathbf G_t = \mathbf M_t \mathbf o \overline{\mathbf M_t}`}, where the overline denotes the Clifford conjugate. In this representation a circle ${tex`\mathbf C_t`} in the ${tex`e_{12}`} plane is written as the product : ${tex`\mathbf C_t = e^{t \pi e_{12}} e^{e_{01}}`}, here the first exponentiation is the rotation, parametrised by ${tex`t`}, and can be in any euclidean plane. The second exponentiation is the translation with (half of) the fixed radius (here 1), using an ideal bivector in the plane of rotation. similarly a line segment along the x-axis can be written : ${tex`\mathbf L_t = e^{\frac t 2 e_{01}}`} These objects represent 1D orbits through 3D space. (circles and line segments). ## 2D Orbits As these objects are motors, they can trivially be combined using the geometric product. In [ganja.js](https://github.com/enkimute/ganja.js), a 1D manifold is represented as an array of bivectors. The outer product of two vectors produces a matrix of bivectors. Such a matrix can then be rendered as a 2D manifold. In this notation, you can express 3D shapes as the products of circles and line segments as in the table above.
Such a formulation reminds of the topology approach and can be implemented verbatim in [ganja.js](https://github.com/enkimute/ganja.js), allowing for a very concise and coordinate free description of a wide variety of geometric objects. (see code below). As they are just vectors (1D) and matrices (2D) of bivectors, they can trivally be transformed as any other bivector by premultiplying with another motor. (and the same transformation rules as for all PGA elements apply) ## Free tangent space The motors that generate these orbits are the exact representations of the tangent space at that point, and generating normals is now a trivial task. ## Free blending Dual Quaternions can be linearly blended, or you could opt to blend before the exponential map. `34:T60a,PGA = Algebra(3,0,1,()=>{ // The orbit of a function that returns a motor. evaluates f at 0, 1/32, 2/32, ..., 1 var ORBIT = f=>[...Array(32)].map((x,i,a)=>f(i/(a.length))), // A circle as the product of a rotation and a translation. CIRCLE = (BV=1e12,r=.5)=>ORBIT(x=>Math.E**(Math.PI*x*BV)*(1+r*1e01)), // A segment is an ideal bivector. SEGMENT = (BV)=>ORBIT(x=>1+x*BV), // A plane is the product of two segments. PLANE = (a=1e01,b=1e03)=>SEGMENT(a)^SEGMENT(b), // A sphere as a product of a degenerate circle and a circle. SPHERE = (r=.5)=>CIRCLE(1e12,0)^CIRCLE(1e13,r), // A torus as the product of two circles TORUS = (r1=.5,r2=.25)=>CIRCLE(1e12,r1)^CIRCLE(1e13,r2), // A cylinder is the product of a segment and a circle CYLINDER = (r=.25,h=1)=>CIRCLE(1e12,r)^SEGMENT(h*1e03), // A disk is also the product of a segment and (degenerate) circle DISK = (r=.8)=>CIRCLE(1e13,0)^SEGMENT(1e01*r), // and so is a cone .. CONE = (r=.4,h=1)=>CIRCLE(1e12,0)^SEGMENT(1e01*r+1e03*h), // A circle where the radius is modified for extra funk. FUNK = (BV,r)=>ORBIT(x=>Math.E**(Math.PI*x*BV)*(1+r*(1+Math.sin(-x*Math.PI*8)*.15)*1e01)), // A funky toroid made from the product of two funks. FUNKY = ()=>FUNK(1e12,.5)^CIRCLE(1e13,.25), // An even funkier toroid made from the product of two funks. FUNKIER = ()=>FUNK(1e12,.5)^FUNK(1e13,.25); return Object.assign(this,{ORBIT,CIRCLE,SEGMENT,PLANE,SPHERE,TORUS,CYLINDER,DISK,CONE,FUNK,FUNKY,FUNKIER}); })35:[] 31:{"id":"826bb15b997fb3b6","slug":"torus-circle-circle","title":"Torus = Circle * Circle","thumbnail":"23980ceaa3728e47d305eafb77541511dc784f0c8e44e33b4db69253eb130d9d","access_level":"public","create_time":"$D2019-03-25T13:55:21.917Z","update_time":"$D2019-06-06T13:38:22.271Z","view_time":null,"first_public_time":"$D2019-03-26T15:19:29.562Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"679a6b4e77863c60","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":"starter_2024"},"version":1203,"publish_version":1203,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null}],"members":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Torus = Circle * Circle","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"viewof show = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"SHEET([ PGA.CIRCLE,\n PGA.TORUS,\n PGA.PLANE,\n PGA.SPHERE,\n PGA.CYLINDER,\n PGA.DISK,\n PGA.CONE,\n PGA.FUNKY,\n PGA.FUNKIER\n ][show]())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`## Blending adhockeries .. \n\nThese motors could be blended by someone who has little regard for sanity (I'm just blending the exponentiated versions .. i.e. dual-quaternion-lerp): `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"viewof animate = { \n var res = html`Animate`;\n res.value = res.firstChild.checked;\n res.firstChild.onchange = (x)=>{\n res.value=res.firstChild.checked;\n res.dispatchEvent(new CustomEvent('input'));\n } \n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"PGA.inline((PGA,animate)=>{\n var [sphere,cone,cylinder,torus] = [PGA.SPHERE(),PGA.CONE(.4,-.5),PGA.CYLINDER(0.25,0.5),PGA.TORUS()];\n return this.graph(()=>{\n var a = Math.cos(Math.PI*2*performance.now()/2234)*0.5+0.5,\n scenario = ((performance.now()/2234)|0)%3,\n points = (a*sphere + (1-a)*((scenario==1)?cylinder:(scenario==2)?cone:torus));\n return points.flat().map(x=>x>>>!1e0);\n },{animate, gl:1, camera:Math.E**(Math.PI/2*1e13)*Math.E**(Math.PI/8*1e23), height:'400px', width:'400px'});\n})(PGA,animate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`### Automatic orbit rendering.\n\nSince a recent update, the parametrized bivectors can also be rendered directly as function. Any one parameter function that produces a bivector is rendered as a curve, while two parameter functions are rendered as manifolds. This makes it easy to create a wide range of interesting shapes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"Algebra(3, 0, 1, () => {\n var camera = 0e1 + 1;\n var smooth = x=>x**2*(3-2*x);\n var f =(x,y)=>Math.E**(x*Math.PI*1e12)\n *Math.E**(.5e01+Math.sin(x*Math.PI*2)*.025e01)\n *Math.E**(((2*x+y)%1)*Math.PI*1e13)\n *Math.E**(\n (smooth(Math.sin(Math.max(0,x*3-2)*Math.PI))*0.5+0.2)*0.2e01\n +smooth(Math.sin(Math.max(0,x*3-2)*Math.PI))*Math.sin(y*Math.PI*10)*Math.sin((y+0.25%1)*Math.PI)*0.06e01);\n f.dx=256;\n // (x**2*(3-2*x)):\n return this.graph(()=>{\n var t = performance.now() / 1234;\n camera.set((Math.cos(t) + Math.sin(t) * 1e13)*(1+0.01e02));\n return [0xffffcc,f];\n },{ camera, gl: 1, animate: 1, width: \"800px\", height: \"750px\" });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`#### Algebra & Sheet viz below`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Algebra = require(\"https://unpkg.com/ganja.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"SHEET = PGA.inline((x,tangent)=>{\n// generate triangles for a 2D array of points. \n var wrap=(X)=>{ \n var u=X.length-1,v=X[0].length-1; X=[].concat.apply([],X);\n var P=[],vp=v+1; for(var i=0;i<=u*vp;i+=vp)for(var j=0;j<=v;j++)P.push([i+j,i+j+1,vp+i+j],[i+j+1,vp+i+j,vp+i+j+1]);\n return P.map(x=>x.map(x=>X[x%X.length]));\n };\n// generate orbits of the origin and wrap them \n return Element.graph([0xff66ff,...x[0] instanceof Array?wrap(x.map(x=>x.map(x=>x>>>!1e0))):x.map(x=>x>>>!1e0).map((x,i,a)=>[x,a[i-1]||a[a.length-1]]),\n 0xFF0000,...tangent==0?[0]:x.flat().map(x=>x>>>[!1e0,!(1e0+.075e3)]),\n 0x448844,...tangent==0?[0]:x.flat().map(x=>x>>>[!1e0,!(1e0-.075e1)]),\n 0x0000FF,...tangent==0?[0]:x.flat().map(x=>x>>>[!1e0,!(1e0-.075e2)]),\n ]\n ,{gl:1, camera:Math.E**(Math.PI/2*1e13)*Math.E**(-Math.PI/8*1e23), height:'400px', width:'400px'});\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"