more basic cga2d examples

README.md

@@ -306,8 +306,8 @@ PGA2D Desargues Theorem<BR>
 CGA2D Euler Line<BR>
 <A HREF="https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga2d_euler_line"             TARGET="_blank" TITLE="CGA2D Euler Line"><IMG SRC="images/cga2d_euler_line.jpg"/></A>
 <TD ALIGN=CENTER>
-CGA2D Basics<BR>
-<A HREF="https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga2d_basics"                 TARGET="_blank" TITLE="CGA2D Basics"><IMG SRC="images/cga2d_basics.jpg"/></A>
+CGA2D Points and Circles<BR>
+<A HREF="https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga2d_points_and_circles"     TARGET="_blank" TITLE="CGA2D Points and Circles"><IMG SRC="images/cga2d_points_and_circles.jpg"/></A>
 </TABLE>
 
 ganja.js is also the engine behind the GAlculator - try it [online](https://enkimute.github.io/ganja.js/examples/galculator.html) or get it on the [play store](https://play.google.com/store/apps/details?id=io.github.enkimute) 

examples/coffeeshop.html

@@ -80,7 +80,7 @@ <H3>The Coffeeshop<BR>
                     "timespace_lorentz",
                     "pga2d_points_and_lines","pga2d_distances_and_angles","pga2d_project_and_reject","pga2d_rotors_and_translators","pga2d_isometries", "pga2d_inverse_kinematics","pga2d_separating_axis","pga2d_pose_estimation","pga2d_euler_line","pga2d_desargues_theorem","pga2d_differentiation",
                     "pga3d_points_and_lines","pga3d_distances_and_angles","pga3d_rotors_and_translators","pga3d_icosahedron","pga3d_sampling","pga3d_slicing","pga3d_differentiation","pga3d_skinning",
-                    "cga2d_basics","cga2d_rotors_and_translators","cga2d_euler_line",
+                    "cga2d_points_and_circles","cga2d_project_and_reject","cga2d_rotors_and_translators","cga2d_euler_line",
                     "game_wedge"];
 
     var $ = document.getElementById.bind(document);

examples/example_cga2d_basics.html

@@ -27,9 +27,17 @@
   var translate = (v)=>(1-.5*v^ei),
       rotate    = (P,a)=>Math.cos(a/2) + Math.sin(a/2)*(1e12+1e12<<P^ei);
 
+// Some identities
+  var line_through_P_parallel_with_X = (P,X)=>X<<(P^ei)*(P^ei),
+      project_point_on_circle        = (P,C)=>C<<(P^ei)*C,
+      position                       = (C)=>C/(C^ei),
+      radius                         = (C)=>(C*~C).s/((C<<ei)**2).s,
+      attitude                       = (C)=>(ei^(C<<ei)),
+      split                          = (PP)=>(1+attitude(PP)*radius(PP)*.5)>>>(PP/(PP<<ei));
+
 // Define three points
   var p1 = point(-0.5, -0.5),
-      p2 = point( 0.5, -0.5), 
+      p2 = point( 1, -0.5), 
       p3 = point(   0,  1.5);
 
 // Define two circles, one by wedging 3 points, one directly.
@@ -42,19 +50,44 @@
 // Create point pairs by intersecting a circle(s) and a line(s).
   var pp1=()=>X&C, pp2=()=>C&D, pp3=()=>Y&D;
 
-// Distances and angles between all items.
-  var dp1  = ()=>dist(D,p1).toFixed(2),
+// Distances and angles.
+  var dp1  = ()=>( (p1-split(project_point_on_circle(p1,D).Normalized)).Length  ).toFixed(2),
       beta = ()=>angle(X,Y).toFixed(2); 
 
+
+  var round = (X)=>{ while(X.call) X=X();
+       var nix      = X^ei, 
+           r        = ((X<<X).s/(nix<<nix).s)**.5,
+           attitude = (nix<<(ei^eo)).Normalized,
+           pos      = X/nix;
+       pos = pos/(-ei<<pos);     
+       if (X.Blade(2).VLength>0.00001 && r) return pos+r*attitude; //[pos+attitude,pos-attitude];
+       return pos;
+  }
+
+  //gav(D);
+  //gav(pp1);
+
 // Graph these items.
   document.body.appendChild(this.graph([
     "2D CGA - drag p1,p2,p3","",             // title
     ()=>"|D,p1|="+dp1,                       // distance
     ()=>"&beta; = "+beta,                    // distance
-    0xFF8888, C, "C", D, "D",                // circles
+    0xFF8888, C, D, "D",                // circles
     0x44AA44, X, "X", Y, "Y",                // lines
     0x4444FF, pp1, "pp1", pp2, pp3,          // point pairs
+    0x448844,
+    ()=>position(C), ()=>"C "+(Math.sqrt(-radius(C)).toFixed(2)),
+    ()=>position(D), ()=>"D "+(Math.sqrt(-radius(D)).toFixed(2)),
+    ()=>line_through_P_parallel_with_X(p1,D),"parallel to D",
+    ()=>line_through_P_parallel_with_X(split(project_point_on_circle(p1,D).Normalized),D),"parallel to D",
+    ()=>ei^p1^split(project_point_on_circle(p1,D).Normalized),  "p1 on D",
+    ()=>split(project_point_on_circle(p1,D).Normalized),  "p1 on D",
+    ()=>split(-project_point_on_circle(p1,C).Normalized), "p1 on C",
     0x666666, p1, "p1", p2, "p2", p3, "p3",  // points
+    0xFF0000, ()=>round(pp1),
+    0xFF0000, ()=>round(C),
+    0xFF0000, ()=>round(p1),
   ],{conformal:true}));                      // conformal flag!  
 
 });

examples/example_cga2d_points_and_circles.html

@@ -0,0 +1,51 @@
+<HEAD>
+  <SCRIPT SRC="../ganja.js"></SCRIPT>
+</HEAD>
+<BODY><SCRIPT>
+// Create a Clifford Algebra with 3,1 metric for 2D CGA. 
+Algebra(3,1,()=>{ 
+
+// The conformal model adds in more element types. (circles, point-pairs)
+// We no longer work in a dual space. (so ^ = join and & = meet)
+// Vectors are points, Bivectors are point pairs, Trivectors are lines/circles
+
+// We don't work directly in the e3/e4 basis, but instead rotate it so we have
+// two null vectors to work with (called origin and infinite)
+  var ei = 1e4-1e3,           // e-infinite
+      eo = 0.5*(1e4+1e3);     // e-origin
+
+// Define points, lines, circles using the null basis.  
+  var point  = (x,y)=>eo + x*1e1 + y*1e2 + 0.5*(x*x+y*y)*ei,
+      line   = (a,b,c)=>!(a*1e1 + b*1e2 + c*ei),
+      circle = (x,y,r)=>!(point(x,y) - r**2/2*ei);
+
+// Distances and Angles. 
+  var dist=(x,y)=>(2*(x<<y).Length)**0.5,
+      angle=(x,y)=>Math.acos(!x.Normalized<<!y.Normalized);
+
+// Define three points
+  var p1 = point(-0.5, -0.5),
+      p2 = point( 1, -0.5), 
+      p3 = point(   0,  1.5);
+
+// Define two circles, one by wedging 3 points, one directly.
+  var C = ()=>p1^p2^p3,        // a function so it updates live.
+      D = circle(1,-1,0.9);
+
+// Define two lines, one directly, one by wedging two points and infinity.
+  var X=line(0,1,0), Y=()=>p2^p3^ei;
+
+// Create point pairs by intersecting circle(s) and a line(s).
+  var pp1=()=>X&C, pp2=()=>C&D, pp3=()=>Y&D;
+
+// Graph these items.
+  document.body.appendChild(this.graph([
+    "2D CGA - drag p1,p2,p3","",                  // title
+    0xFF8888, C, "C", D, "D",                     // circles
+    0x44AA44, X, "X", Y, "Y",                     // lines
+    0x4444FF, pp1, "pp1", pp2, "pp2", pp3, "pp3", // point pairs
+    0x666666, p1, "p1", p2, "p2", p3, "p3",       // points
+  ],{conformal:true}));                           // conformal flag!  
+
+});
+</SCRIPT></BODY>

examples/example_cga2d_project_and_reject.html

@@ -0,0 +1,48 @@
+<HEAD>
+  <SCRIPT SRC="../ganja.js"></SCRIPT>
+</HEAD>
+<BODY><SCRIPT>
+// Create a Clifford Algebra with 3,1 metric for 2D CGA. 
+Algebra(3,1,()=>{ 
+
+// Two null vectors to work with (called origin and infinite)
+  var ei = 1e4-1e3,           // e-infinite
+      eo = 0.5*(1e4+1e3);     // e-origin
+
+// Define points, lines, circles using the null basis.  
+  var point  = (x,y)=>eo + x*1e1 + y*1e2 + 0.5*(x*x+y*y)*ei,
+      line   = (a,b,c)=>!(a*1e1 + b*1e2 + c*ei),
+      circle = (x,y,r)=>!(point(x,y) - r**2/2*ei);
+
+// Some identities
+  var line_through_P_parallel_with_X = (P,X)=>X<<(P^ei)*(P^ei),
+      project_point_on_circle        = (P,C)=>C<<(P^ei)*C,
+      project_point_on_line          = (P,L)=>L.Normalized<<P*L.Normalized,
+      position                       = (X)=>{ X=X/(X^ei); return X/(-ei<<X); },
+      radius                         = (X)=>Math.abs(((X<<X).s/((X^ei)**2).s))**.5,
+      attitude                       = (X)=>(X^ei<<(ei^eo)).Normalized,
+      split                          = (pp)=>position(pp)-radius(pp)*attitude(pp);
+
+// Define some elements.
+  var p1 = point(-0.7,0.4), p2 = point(1,-0.5), p3 = point(0,1.5),
+      D = circle(1,-1,0.7),
+      X = line(0,1,0), Y=()=>p2^p3^ei;
+
+// Graph 
+  document.body.appendChild(this.graph([
+    "2D CGA - drag p1,p2,p3","",                        // title
+    0xFF8888, D,                                        // circle
+    ()=>position(D), ()=>"D "+(radius(D).toFixed(2)),   // Center,Radius
+    0x44AA44, X, "X", Y, "Y",                           // lines
+    0x4444FF,
+    ()=>line_through_P_parallel_with_X(p1,Y),"p1 // Y", // parallel to line
+    ()=>line_through_P_parallel_with_X(p1,D),"p1 // D", // parallel to circle
+    0xFF44FF, 
+    ()=>split(project_point_on_circle(p1,D)),"p1 on D", // project on circle
+    ()=>project_point_on_line(p1,X), "p1 on X",         // project on line
+    ()=>project_point_on_line(p1,Y), "p1 on Y",         // project on line
+    0x444444,p1,"p1",p2,"p2",p3,"p3",                   // render the points
+  ],{conformal:true}));                                 // conformal flag!  
+
+});
+</SCRIPT></BODY>

examples/example_cga2d_rotors_and_translators.html

@@ -12,7 +12,7 @@
 
 // Rotator, Translator
   var translate = (v)=>(1-.5*v^ei),
-      rotate    = (P,a)=>Math.cos(a/2) + Math.sin(a/2)*(1e12+1e12<<P^ei);
+      rotate    = (P,a)=>Math.cos(a/2) - Math.sin(a/2)*(1e12+1e12<<P^ei);
 
 // Define a translation and a rotation and apply them to two points
   var tr = ()=>translate( Math.sin(performance.now()/1000)*1e1 ),
@@ -22,7 +22,10 @@
 
 // Graph these items.
   document.body.appendChild(this.graph([
-      p1,"tr>>>p1",p2,"rt>>>p2",()=>[p1,p2]
+      p1,"tr>>>p1",                       // point 1
+      p2,"rt>>>p2",                       // point 2
+      ()=>[p1,p2],                        // segment from 1 to 2
+      ()=>p1^p2^point(0,2,0)              // pretty circle
   ],{conformal:true,animate:true}));
 
 });