2d:null 2e:["$","title",null,{"children":"Algebra vs. Geometry - Battle 1 | Steven De Keninck | Observable"}] 33:T6f8,// no peeking ! - this is the geometry version: Algebra(3,0,1,()=>{ // rotation helper and Lathe function. var rot = (a,P)=>Math.cos(a)+Math.sin(a)*P.Normalized, lathe=(X,n,P,m)=>[...Array(n+1)].map((x,i)=>rot(i/n*Math.PI*(m||1),P)>>>X), // wrap takes X, a double array of points, and generates triangles. wrap=(X)=>{ var u=X.length-1,v=X[0].length-1; X=[].concat.apply([],X); var P=[],vp=v+1; for(var i=0;ix.map(x=>X[x])); }, // Basic primitives constructed by Lathing points, line segments, etc. cylinder = (r=1,h=1,x=32)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+r*1e3+h*1e1),!(1e0+h*1e1)],x,1e23)), torus = (r=.3,r2=.25,x=32,y=16)=>wrap(lathe((1+r*.5e03)>>>lathe(!(1e0+r2*(1e1+1e3)/2**.5),y,1e13),x,1e23)), sphere = (r=1,x=32,y=16)=>wrap(lathe(lathe(!(1e0+r*1e1),y,1e13,.5),x,1e23)), cone = (r=1,h=1,x=64)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+h*1e1)],x,1e23)), arrow = ()=>[...cone(.15,.3),...cone(.15,0),...cylinder(.05,-2)], // A selection of these objects. objs=[arrow(), torus(0.8,.3), sphere(.8), sphere(.8,3,2), cone(1,2**.5,3), cone(1,2**.5,4), cone(1,2**.5), torus(.8,.2,5,32), cylinder(), cylinder(1,2**.5,4), torus(.8,.3,4,4), torus(.8,.3,64,4)].map(x=>({data:x})); // Render and rotate them using the webGL2 previewer. return ( this.graph(()=>{ var time = performance.now()/1000; objs.forEach((obj,i)=>obj.transform = (1+1e0-5e01-((i%3)-1)*2e03-((i/3|0)-1.5)*1.5e02)*rot(time,1e12)*rot(time*0.331,1e13)); return [0xFF0088,...objs] },{gl:1,animate:1,width:'600px',height:'600px'})); })34:T847,md` ## Algebra's strategy. Algebra immediately recognizes all these objects as two dimensional closed manifolds, and models the vertex positions as a direct function of those two dimensions. This is called a parametrization, and the formulas needed for each of the objects are well known. For example, the parametric equation of a torus around the origin with **a** as the radius of the tube and **c** as the distance from the center of the tube to the origin is : ${tex`x = (c+a \cos v) \cos u`} ${tex`y = (c+a \cos v) \sin u`} ${tex`z = a \sin v`} That seems pretty direct. Using these formula's, **Algebra** arrives at the following implementation : (with ganja, a point at e.g. [3,4,5] is written with dual notation as \`\`\`!(1e0+3e1+4e2+5e3)\`\`\`) \`\`\`javascript Algebra(3,0,1).inline(()=>{ // shortcuts for some of the verbose javascript Math functions.. var sin=Math.sin,cos=Math.cos,PI=Math.PI,P2=PI*2, // Our manifold function will evaluate a parametrization and generate the required triangles. mani = (f,u=16,v=16)=>{ var p=para(f,u,v),P=[],vp=v+1; for(var i=0;ix.map(x=>p[x])); }, // Calls our parametrization function while looping u and v. para = (f,u,v)=>[...Array((u+1)*(v+1))].map((x,i)=>f(Math.floor(i/(v+1))/u,(i%(v+1))/v)), // Parametric formulas for cylinder, torus, sphere and cone. cylinder= (r=1,h=1,x=32,y=1)=>mani((u,v)=>!(1e0+r*sin(P2*u)*1e3+r*cos(P2*u)*1e2+h*v*1e1),x,y), torus = (r=.3,r2=.25,x=32,y=16)=>mani((u,v)=>!(1e0+(r+r2*cos(v*P2))*cos(u*P2)*1e3+(r+r2*cos(v*P2))*sin(u*P2)*1e2+r2*sin(v*P2)*1e1),x,y), sphere = (r=1,x=16,y=16)=>mani((u,v)=>!(1e0+r*sin(P2*u)*sin(P2*v)*1e3+r*cos(P2*u)*sin(P2*v)*1e2+r*cos(P2*v)*1e1),x,y), cone = (r=1,h=1,x=32,y=1)=>mani((u,v)=>!(1e0+v*r*sin(P2*u)*1e3+r*v*cos(P2*u)*1e2+h*(1-v)*1e1),x,y), // Our arrow is a compound object. arrow = ()=>[...cone(.15,.3),...cone(.15,0),...cylinder(.05,-2)]; return {cylinder,torus,sphere,cone,arrow}; })() \`\`\` `35:T530,algebra_game = Algebra(3,0,1).inline(()=>{ // shortcuts for some of the verbose javascript Math functions.. var sin=Math.sin,cos=Math.cos,PI=Math.PI,P2=PI*2, // Our manifold function will evaluate a parametrization and generate the required triangles. mani = (f,u=16,v=16)=>{ var p=para(f,u,v),P=[],vp=v+1; for(var i=0;ix.map(x=>p[x])); }, // Calls our parametrization function while looping u and v. para = (f,u,v)=>[...Array((u+1)*(v+1))].map((x,i)=>f(Math.floor(i/(v+1))/u,(i%(v+1))/v)), // Parametric formulas for cylinder, torus, sphere and cone. cylinder= (r=1,h=1,x=32,y=1)=>mani((u,v)=>!(1e0+r*sin(P2*u)*1e3+r*cos(P2*u)*1e2+h*v*1e1),x,y), torus = (r=.3,r2=.25,x=32,y=16)=>mani((u,v)=>!(1e0+(r+r2*cos(v*P2))*cos(u*P2)*1e3+(r+r2*cos(v*P2))*sin(u*P2)*1e2+r2*sin(v*P2)*1e1),x,y), sphere = (r=1,x=16,y=16)=>mani((u,v)=>!(1e0+r*sin(P2*u)*sin(P2*v)*1e3+r*cos(P2*u)*sin(P2*v)*1e2+r*cos(P2*v)*1e1),x,y), cone = (r=1,h=1,x=32,y=1)=>mani((u,v)=>!(1e0+v*r*sin(P2*u)*1e3+r*v*cos(P2*u)*1e2+h*(1-v)*1e1),x,y), // Our arrow is a compound object. arrow = ()=>[...cone(.15,.3),...cone(.15,0),...cylinder(.05,-2)]; return {cylinder,torus,sphere,cone,arrow}; })()36:T769,md` ## Geometry's strategy. Geometry immediately recognizes that all these shapes can be constructed by rotating points or line segments. Such an operation is called a Lathe (with euclidean lines), or an Extrude (with ideal lines). (note that in projective geometry, because of the natural inclusion of lines at infinity, these two operations are one and the same.) To construct a torus, geometry will rotate a point around an axis, translate the resulting circle, then rotate that around another axis. Using similar constructions for the other objects, **Geometry** arrives at the following : (as above, a point at e.g. [3,4,5] is written using dual notation as \`\`\`!(1e0+3e1+4e2+5e3)\`\`\` ) \`\`\`javascript Algebra(3,0,1).inline(()=>{ // Lathe rotates a point or path 2PI/m in n steps around P. var lathe=(X,n,P,m)=>[...Array(n+1)].map((x,i)=>(Math.cos(i/n*Math.PI*(m||1))+Math.sin(i/n*Math.PI*(m||1))*P)>>>X), // The wrap function takes a double array of points and generates triangles between them. wrap=(X)=>{ var u=X.length-1,v=X[0].length-1; X=[].concat.apply([],X); var P=[],vp=v+1; for(var i=0;ix.map(x=>X[x])); }, // Geometric generation of cylinder, torus, sphere and cone. cylinder = (r=1,h=1,x=32,y=1)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+r*1e3+h*1e1),!(1e0+h*1e1)],x,1e23)), torus = (r1=.3,r2=.25,x=32,y=16)=>wrap(lathe((1+r1*.5e03)>>>lathe(!(1e0+r2*(1e1+1e3)/2**.5),y,1e13),x,1e23)), sphere = (r=1,x=16,y=16)=>wrap(lathe(lathe(!(1e0+r*1e1),y,1e13,.5),x,1e23)), cone = (r=1,h=1,x=32)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+h*1e1)],x,1e23)), // Our arrow is a compound object. arrow = ()=>[...cone(.15,.3),...cone(.15,0),...cylinder(.05,-2)]; return {cylinder,torus,sphere,cone,arrow}; })() \`\`\` `37:T4a3,geometry_game = Algebra(3,0,1).inline(()=>{ // Lathe rotates a point or path 2PI/m in n steps around P. var lathe=(X,n,P,m)=>[...Array(n+1)].map((x,i)=>(Math.cos(i/n*Math.PI*(m||1))+Math.sin(i/n*Math.PI*(m||1))*P)>>>X), // The wrap function takes a double array of points and generates triangles between them. wrap=(X)=>{ var u=X.length-1,v=X[0].length-1; X=[].concat.apply([],X); var P=[],vp=v+1; for(var i=0;ix.map(x=>X[x])); }, // Geometric generation of cylinder, torus, sphere and cone. cylinder = (r=1,h=1,x=32,y=1)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+r*1e3+h*1e1),!(1e0+h*1e1)],x,1e23)), torus = (r1=.3,r2=.25,x=32,y=16)=>wrap(lathe((1+r1*.5e03)>>>lathe(!(1e0+r2*(1e1+1e3)/2**.5),y,1e13),x,1e23)), sphere = (r=1,x=16,y=16)=>wrap(lathe(lathe(!(1e0+r*1e1),y,1e13,.5),x,1e23)), cone = (r=1,h=1,x=32)=>wrap(lathe([!1e0,!(1e0+r*1e3),!(1e0+h*1e1)],x,1e23)), // Our arrow is a compound object. arrow = ()=>[...cone(.15,.3),...cone(.15,0),...cylinder(.05,-2)]; return {cylinder,torus,sphere,cone,arrow}; })()38:[] 31:{"id":"5576a27547e8a3f4","slug":"algebra-vs-geometry-battle-1","title":"Algebra vs. Geometry - Battle 1","thumbnail":"c0919ba49dad46d129cbe61d480f9ef4fff48166f193f0fe34a1021ef565cde5","access_level":"public","create_time":"$D2018-09-02T08:02:24.223Z","update_time":"$D2018-11-21T10:43:04.096Z","view_time":null,"first_public_time":"$D2018-09-02T09:30:18.738Z","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":144,"publish_version":144,"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":[{"id":"600b0c04fa0ec82a","reply_to_id":null,"content":"I tried viewing this in chrome and firefox on Mac and both showed only a gray background. Is it still working for you @enkimute?","create_time":"$D2023-06-13T15:47:36.809Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9a139ab1d56ae60e","login":"vezwork","name":"Elliot","avatar_url":"https://avatars-next.observableusercontent.com/d991101c2093a3ab1f88200840442f1eac491eb43e5d6e51b65ec7c20d8edec2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Algebra vs. Geometry - Battle 1","cells":[{"id":0,"value":"md`# Algebra vs. Geometry - Battle 1\n\nIn the left corner we have **Al** - *prince of abstract* - **gebra**, and in the right corner we have *the king of concrete* - **Geometry** !\n\nIn today's fight - both will be flexing their muscles to recreate some classic procedural meshes. Judges will award points in the following categories :\n\n* Code Size\n* Execution Time\n* Readability\n\nThe bookies have their odds in favor of **Algebra** - even tho the task at hand may be of a geometric nature, the google oracle states that the vast majority of implementations in the wild are followers of prince **Al**.\n\nWill *the prince* live up to its status as favorite ? Or might *Geometry* bring an unexpected twist ? Stay tuned !\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`\n## The task.\n\nThe challenge is to generate the meshes (vertices and faces) of a selection of two dimensional manifolds : the sphere, cylinder, cone and torus. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Fairly concise. Algebra clocks in at **856** characters. The code is easy - a direct implementation of the parametric equations. Those are however not entirely transparant - few people will be able to identify the object from just quickly looking at those equations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`It's close but **Geometry** clocks in at **783** characters, a good 9% less than Algebra. On top of that the geometric construction is far more readable, and most people would be able to tell you what object is being created from just looking at the code. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Execution time\n\nWithout further delay - (well a bit of delay - ${parseFloat(algebra_time)+parseFloat(geometry_time)} ms) - here are the results of creating 10 objects of each type :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"algebra_time = {\n var start = performance.now();\n for (var i=0; i<10; i++){\n algebra_game.cylinder();\n algebra_game.torus();\n algebra_game.sphere();\n algebra_game.cone(); \n }\n return (performance.now()-start).toFixed(2) + ' millis';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"geometry_time = {\n var start = performance.now();\n for (var i=0; i<10; i++){\n geometry_game.cylinder();\n geometry_game.torus();\n geometry_game.sphere();\n geometry_game.cone(); \n }\n return (performance.now()-start).toFixed(2) + ' millis';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md `Here, **Geometry** is ${100*(1-parseFloat(geometry_time)/parseFloat(algebra_time)).toFixed(2)}% faster. The reason for that is that geometry's method first constructs one dimension of the manifold, then takes those values and applies the second dimension. This last operation can re-use the values from the first.\n\nAlgebra has no such advantage, starts for each point of the manifold from scratch and in the end has many duplicate calculations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## Conclusion\n\nWith **Geometry** being smaller, faster and more readable - there is a clear winner. The only mystery now is .. why are all the implementations out there Algebraic ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Algebra = require('ganja.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"