31:Tb2b,md`### Prelude : javascript JavaScript is a low threshold, c-style language that should be very accessible to programmers with a background in C, C++, C#, Java, etc. As a result, most constructs needed/used in ganja should be quite readable. There are some modern javascript features that make using ganja.js easier, I'll briefly mention them just in case you are new to Javascript. ** Arrow functions ** There are two ways to define a function in modern javascript. There is the classic method : \`\`\`javascript var add = function(a,b) { return a+b; } \`\`\` There is however also a modern short hand, called an arrow function, that we'll use a lot : \`\`\`javascript var add = (a,b)=>a+b; \`\`\` A good example of where this lightweight syntax is useful is to mark quantities that you've asked ganja to render as dynamic. For example, given three points **a**, **b** and **c** in 3D CGA, you could ask ganja to graph the circle that connects them : \`\`\`javascript ... return this.graph([a,b,c,a^b^c]); \`\`\` When the user interacts with the graph, ganja.js will re-render, however the circle connecting the three points will not update. (as it is calculated only when the graph function was originally called). To make it dynamic, you can simply graph : \`\`\`javascript ... return this.graph([a,b,c,()=>a^b^c]); \`\`\` Now, the last element is no longer a trivector, but a function that returns a trivector, and when the user drags one of the points, and ganja.js re-renders, it will call the function and the connecting circle will update as expected. #### Offline development Ganja.js is distributed via npm, which means it is readily available in a large number of online environments (like Observable). It is however also easy to use it locally. A simple html file with the following in it will get you started : \`\`\`html \`\`\` Simply save that with a \`.html\` extension and open it in your browser (Chrome is fastest for ganja.js). #### Online development A platform like observable has a number of advantages, including easy support for markdown and LaTeX. It's quite easy to get started (e.g. login via github), and to use Ganja one can simply add a cell with : \`\`\`javascript Algebra = require('ganja.js') \`\`\` after which the example above is reproduced by a cell with the following : \`\`\`javascript Algebra(2,0,1,()=>this.graph([1e12,"origin",1e1,1e2])) \`\`\` In Observable, a call to \`document.body.appendChild()\` is not needed, as Observable will automatically display the canvas or svg returned by the \`graph()\` function `32:[] 2f:{"title":"ganja.js introduction","cells":[{"id":0,"value":"md`# ganja.js introduction\n\nThis notebook demonstrates the basics of [ganja.js](https://github.com/enkimute/ganja.js), a Geometric Algebra library for javascript that features operator overloading and algebraic literals.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Example : Complex Numbers\n\nTo get started, let's use \\`\\`ganja.js\\`\\` to multiply two complex numbers:\n\n${tex`(3+2i)*(1+4i)`}
\n\nAlgebras are created by specifying their metric signature. For complex numbers we will use ${tex`\\mathbb{R}_{0,1}`}, i.e., the real numbers extended with one extra dimension which squares to ${tex`-1`}.\n\nThe basis for such an algebra consists of only two elements, 1 and the imaginary unit **i**. Since ganja.js supports any number of dimensions, we adapt the common notation **e_xyz** in mathematics, and write **e₁** to denote the imaginary unit:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"Algebra(0,1,()=>(3+2e1)*(1+4e1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`\nThe last argument in the \\`\\`Algebra\\`\\` call is an (optional) function in which your Algebra will be active. Ganja.js overloads the operators and the e-notation to allow you to write pretty expressions that are close to the math.\n\n(It's good to know \\`ganja\\` only overloads the notations with lowercase **e**; the uppercase **E** is not translated and can still be used as in the [scientific notation](https://en.wikipedia.org/wiki/Scientific_notation).)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"Algebra(0,1,()=>1e1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"Algebra(0,1,()=>1E1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`### Example : Dual Numbers\n\nTo demonstrate the versatility of picking your metric, let's calculate the derivative of the following function at ${tex`t=3`}\n\n${tex.block`\n\\begin{aligned}\nf : \\mathbb{R} &\\to \\mathbb{R} \\\\\n t &\\mapsto (t^2+4)*(t-6)\n\\end{aligned}`}\nWe'll use dual numbers (${tex`\\mathbb{R}_{0,0,1}`}) and automatic differentiation to calculate the function value and derivative at ${tex`t=3`}, simply adding in ${tex`\\epsilon = \\mathbf e_0`} to find the derivative. (i.e. we upgrade ${tex`f`} to ${tex`f:\\mathbb D \\to \\mathbb D`} and evaluate it at ${tex`{t}={3}+\\epsilon`}) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"r = Algebra(0,0,1,()=>{\n var f = (t)=>(t**2+4)*(t-6);\n return f(3+1e0);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`Without symbolic evaluation of the derivative, we find that ${tex`f(3)=${r[0]}`} and ${tex`f'(3)=${r[1]}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### Example : Arrays / Vectors / Matrices\n\nGanja.js doesn't just give you Algebras with any metric and dimensionality, it also allows you to use arrays, vectors, matrices and functions in algebraic expressions.\n\nYou can multiply, add, etc. arrays and functions and get the results you expect :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"even = Algebra(()=>[1,2,3,4,5]*2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`Arrays can be added to arrays, and everything can be nested :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"Algebra(()=>[1,2,[3,4]]+[3,2,1]+1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`This works exactly the same when you are using extended algebras :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"Algebra(0,1,()=>[3+2e1,3-2e1]*(1+4e1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`The product between two same-length arrays is the standard dot product. Between a double array and an array it is the standard matrix product :\n\n${tex.block`\\begin{bmatrix}\n2 \\\\\n0 \\\\\n1\n\\end{bmatrix}\n\\cdot\n\\begin{bmatrix}\n1 \\\\\n1 \\\\\n0\n\\end{bmatrix}\n= 2\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"Algebra(()=>[2,0,1]*[1,1,0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"tex.block`\\begin{bmatrix}\n0 && i \\\\\ni && 0 \\\\\n\n\\end{bmatrix}\n\\begin{bmatrix}\ni \\\\\n1 \\\\\n\\end{bmatrix}\n= \n\\begin{bmatrix}\ni \\\\\n-1 \\\\\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"Algebra(0,1,()=>[[0,1e1],[1e1,0]]*[1e1,1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`Together, this is a very powerful extension that can greatly simplify your code. To demonstrate its power and elegance, lets write a Runge-Kutta 4th order integrator.\n\n### Example : Runge-Kutta order 4.\n\nThe code we write is exactly the code we would write for the scalar case, but we'll be able to call it with vectors, quaternions, and arrays.\n\nThe idea behind RK4 is easy: we start with an initial guess of the derivative over the next interval by evaluating it on the current state. We use this guess to try and update our state to halfway the timestep and we evaluate the derivative again. We repeat that last step, and finally use our third estimate to guess the derivative a full timestep in the future.\n\nOur final estimate of the derivative over the entire interval is now given by mixing together the previous 4 estimates (giving twice as much weight to the estimates at the halfway point).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"RK4 = Algebra(3).inline((func,state,delta,steps)=>{\n while(steps--){\n var k1 = func(state),\n k2 = func(state+0.5*delta*k1),\n k3 = func(state+0.5*delta*k2),\n k4 = func(state+delta*k3);\n state = state+delta/6*(2*(k2+k3)+k1+k4);\n }\n return state;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`We can now call this function with scalars, vectors, arrays, etc ... First lets solve ${tex`{x}'={x}`} with initial condition ${tex`{x}(0)=1`} to find that the solution is **e**. (this first example would work in vanilla JS)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"RK4(x=>x,1,0.02,50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`With the same function, we can now also solve ${tex`{x}''=-{x}`} with initial value ${tex`{x}=1, {x}'=0`}, to find the solution at time **1** to be ${tex`{x}=\\sin(1),{x}'=-\\cos(1)`}\n\nDoing higher order differential equations with an integrator like this is easy as our derivative function just needs to shift the values. It has to return ${tex`[x', x''=-x]`} given a state in the form ${tex`[x,x']`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"RK4(x=>[x[1],-x[0]],[1,0],0.02,50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`In fact, by nesting arrays we can even solve both at the same time. In this case our state becomes ${tex`[x,[y,y']]`} and our function should return ${tex`[x'=x,[y',y''=-y]]`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"RK4(x=>[x[0],[x[1][1],-x[1][0]]], [1,[1,0]], 0.02, 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`And just as easily we can integrate vector quantities (or bivector quantities, quaternions, etc ..).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`### Example : Quaternions\n\nTo end with a pretty picture lets use quaternions and the graph function to render a nice color wheel.\nWe'll work in a two-dimensional graded algebra ${tex`Cl(\\mathbb{R}_{0,2})`}, isomorphic to the quaternions.\n\n${tex`i=e_{1}, j=e_{2}, k=e_{12}`}
\n\n\\`\\`ganja.js\\`\\` will overload \\`\\`*\\`\\` to be quaternion multiplication (in fact, geometric product), and \\`\\`~\\`\\` can be used for conjugation. The sandwich operator is available as \\`\\`>>>\\`\\` (i.e., \\`\\`a>>>b\\`\\` = ${tex`a*b*\\tilde{a}`}) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"Algebra(0,2,()=>{\n var axis=(1e1+1e2+1e12).Normalized;\n return this.graph((x,y)=>{\n var xx= Math.atan2(y,x);\n var c=1e2, rot=Math.E**(xx/2*axis);\n return ((2-(x**2+y**2)**0.5)*(rot*c*rot.Conjugate)).slice(1);\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`To generate our color wheel, we'll use the ganja graph function. This is a powerful function that will try to interpret its arguments and produce a sensible picture if it can. In this case we're giving it a function with two parameters which it will evaluate for every pixel, passing in the x and y locations.\n\nWe take the arctan to find the angle, and rotate the color c around the diagonal axis in color space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"md`## Operators\n\nGanja.js supports all the operators one would expect in a Clifford library. Below is a short list, together with the javascript syntax. (the duality operator and regressive product both work metric-agnostic, enabling the use of the degenerate metric - see PGA below)\n\n| operator | name | ganja syntax |\n|----------|------|--------------|\n| ${tex`+`} | Addition | \\`a + b\\` |\n| ${tex`-`} | Subtraction | \\`a - b\\` |\n| ${tex`*`} | Geometric Product | \\`a * b\\` |\n| ${tex`a^x`} | Exponentiation | \\`a ** x\\`\n| ${tex`\\wedge`} | Outer Product | \\`a ^ b\\` |\n| ${tex`\\bullet`} | Inner Product | \\`a\\` | \\`b\\` |\n| ${tex`\\vee`} | Regressive product | \\`a & b\\` |\n| ${tex`\\lrcorner`} | Left Contraction | \\`a << b\\` |\n| ${tex`a^*`} | Dual | \\`!a\\` |\n| ${tex`\\tilde a`} | Clifford Conjugate | \\`~a\\` |\n| ${tex`a \\mathbf b \\tilde a`} | Sandwich product | \\`a >>> b\\` |\n| ${tex`\\langle a \\rangle_x`} | Grade selection | \\`a.Grade(x)\\` |\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`## \\`this.graph()\\`\n\nFor 2D and 3D projective geometries, and 2D and 3D conformal geometries, ganja.js provides a direct (parametric) visualization of elements of the algebra, line segments, polygons, labels and even motor manifolds. \n\nThis functionality is available through the \\`graph()\\` function. As a simple example, we create a 2D projective geometric algebra (${tex`\\mathbb R^*_{3,0,1}`}), where **vectors** represent lines and **pseudo-vectors** represent points.\n\n### points, lines, planes, circles, spheres\n\nWe graph the origin (${tex`\\mathbf e_{12}`}) and the x and y axis (${tex`\\mathbf e_1, \\mathbf e_2`}), by passing an array of elements to render to the graph function. (in Observable, if a cell evaluates to an SVG or CANVAS, it is automatically displayed - in a classic setup you would want to append the return value of the \\`graph()\\` function to your document) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"Algebra(2,0,1,()=>this.graph([1e12,\"origin\",1e1,1e2]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`### Labels, Colors, Segments and polygons\n\nThis lightweight syntax allows you to quickly create fun graphs. Passing in a string will label the last rendered element, while a hexadecimal color sets the current color. Pass in an array of two points to render a line segment, and an array of three or more points to render a polygon : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"Algebra(2,0,1,()=>this.graph([\n 0x0000FF, 1e12, 1e1, 1e2,\n 0x000000, 1e12-1e02-1e01, \"point\",\n 0xff0000, [1e12+1e01,1e12+1e01+1e02], \"segment\",\n 0x007700, [1e12-1e01,1e12-1e01+1e02,1e12], 0x000000, \"polygon\"\n]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`### Interactive graphs\n\nThe user can drag points (trivectors), causing ganja.js to re-render its graph. To have items update dynamically, pass them in as a function (this is where that arrow syntax comes in handy) :\n\nSo instead of graphing \\`a&b\\`, which would be evaluated only once - you can graph \\`()=>a&b\\`, which will be evaluated each update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"Algebra(2,0,1,()=>{\n \n var pA = 1e12 - 0.5e02,\n pB = 1e12 - 1e01;\n \n return this.graph([\n pA, \"pA\",\n pB, \"pB\",\n ()=>pA&pB, \"()=>pA & pB\"\n ])\n \n // the last element of the array above is a function, so that the line gets\n // recalculated each time the graph updates (when you drag one of the points)\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`## Conformal\n\nFor conformal spaces, things work exactly the same, simply pass in the \\`conformal:true\\` option to the graph function : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"Algebra(3,1,()=>{\n var eo = .5e3+.5e4,\n ei = 1e4-1e3;\n \n var point = (x)=> eo + x + x**2/2*ei;\n \n var a = point(1.5e2), \n b = point(-1e1 - 0.4e2),\n c = point(1e1 + 0.3e2);\n \n return this.graph([a,\"a\",b,\"b\",c,\"c\",()=>a^b^c],{conformal:true})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"md`### 3D\n\nThings work exactly the same way in 3D - the only difference is one has to add in the \\`gl:true\\` flag to use the webGL visualizer and not the SVG one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"Algebra(4,1,()=>{\n var eo = .5e5-.5e4,\n ei = 1e5+1e4;\n \n var point = (x)=> eo + x + x**2/2*ei;\n \n var a = point(1.5e2+.5e3), \n b = point(-1e1 - 0.4e2 +1e3),\n c = point(1e1 + 0.3e3),\n d = point(1e3);\n \n return this.graph( \n [0x8800ff,a,\"a\",b,\"b\",c,\"c\",d,\"d\",()=>a^b^c^d],\n {conformal:true, height:'400px', width:'50%', gl:true}\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"md`## Motor Manifolds\n\nIn 3D PGA, one can additionaly render 1 and 2d motor manifolds by passing a 1 or 2 parameter function.\nThis allows one to define for example :\n\n\\`\\`\\`javascript\n var circle = (r,biv)=>(t)=>Math.E**(Math.PI*t*biv) * Math.E**(r*1e03);\n\n var c1 = circle(0.3, 1e23),\n c2 = circle(0.05, 1e13),\n torus = c1 * c2;\n \n return this.graph([torus],{gl:true})\n\\`\\`\\` \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"Algebra(3,0,1,()=>{\n // circle is a function of two parameters, radius and bivector, that returns\n // a function of one parameter, 0(t)=>Math.E**(Math.PI*t*biv) * Math.E**(r*1e03);\n\n var c1 = circle(0.3, 1e23),\n c2 = circle(0.05, 1e13),\n c3 = circle(0.1, 1e23), \n torus = (x,y)=>c1(x)*c2(y); \n //return this.graph([],{gl:1})\n // rendering a 1-parameter function produces a curve\n // rendering a 2-parameter function produces a surface\n return this.graph([0x0000ff,torus,0xff0000,c3],{gl:true, width:'100%', height:'400px'})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"Algebra = require('ganja.js')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}