mathdoodle · July 7, 2020 18:35
diff --git a/README.md b/README.md
diff --git a/axioms.html b/axioms.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Geometric Algebra Axioms</h1>
    <h2>Axioms</h2>
    <ol>
      <li>scalars commute with everything. $\alpha M = M \alpha$, for $\alpha \in K, u \in Cl_n$</li>
      <li>vectors $x \in V^n$ obey $x x = Q(x)$, which is a scalar.</li>
      <li>algebraic properties:
      geometric product is linear in both factors,
      associative,
      distributive over $+$.</li>
    </ol>
    <p>
      The axioms are surprisingly simple. The work lies in making geometric connections!
    </p>
    <h2>Euclidean Space</h2>
    <p>
      This is called out because it is the usual starting point.
    </p>
    $$
    Q(x) = \left| x \right|^2
    $$
    <p>
      This statement can be made more explicit by using an orthonormal basis.
    </p>
    <p>
      While Euclidean space is a usual starting point, non-orthogonal bases are sometimes more convenient.
      It is therefore useful to become familiar with Geometric Algebra in this more general context.
    </p>
    <h2>Zero Vectors</h2>
    <p>
      This is a vector in which all coordinates, in any basis, are zero.
    </p>
    <h2>Unit Vectors in Euclidean Space</h2>
    <p>
      In Euclidean space, $Q(x)$ is always non-negative. For any non-zero vector, $Q(x) > 0$. Then
    </p>
    <p>
      Thus we may define $\hat{x} = x / Q(x)^\frac{1}{2} = x / \left| x \right|$.
    </p>
    $$
    \hat{x} \hat{x} = 1
    $$
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./axioms.js')
    </script>
  </body>
 </html>
diff --git a/axioms.ts b/axioms.ts
 //
diff --git a/directed-area.html b/directed-area.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Directed Area</h1>
    <h2>Magnitude of Area before Directed Area</h2>
    <p>
      Students should be able to compute the magnitude of the area of a parallelogram that is
      bounded by two vectors by using a coordinate representation.
      Using the definitions given so far a student should be able to summarize their area magnitude formula to:
 $$
 area(a, b) = \left| \begin{array}{ll}
 a \cdot a & a \cdot b \\
 b \cdot a & b \cdot b
 \end{array} \right| ^ \frac{1}{2} 
 $$
    </p>
    <p>
      That this formula makes sense can only be seen by considering the signs that enter into the determinant.
      The main diagonal has a positive contribution which is consistent with the idea that the voulume
      should increase with $\left| a \right| \left| b \right|$. The other diagonal contributes through
      a minus sign and so the more $a$ and $b$ are aligned, the smaller will be the area.
    </p>
    <p>
      Note that there is also an interesting triangle inequality implied by the fact that the area should be a real number,
      for all (possible) $a$ and $b$. This would make a good proof exercise.
    </p>
    <p>
      Students might conjecture a formula for the volume of a parallelepiped bounded by three vectors.
      They could guess the formula wrong, as I did, but could correct it through analysis. 
    </p>
 $$
 volume(a, b, c) = \left| \begin{array}{lll}
 a \cdot a & a \cdot b & a \cdot c \\
 b \cdot a & b \cdot b & b \cdot c \\
 c \cdot a & c \cdot b & c \cdot c
 \end{array} \right| ^ \frac{1}{2}
 $$
    <p>
    </p>
    <p>
      So far, we have introduced magnitude and projection and have been able to implement these
      quantities using a coordinate representation.
    </p>
    <p>
      
    </p>
    <h2>How to introduce a directed area?</h2>
    <p>
      So far we have really only used the aspect and magnitude of our vectors in defining the scalar area and volume.
      Suppose we define orientation, as we do for vectors by placing an arrowhead at some strategic point on our figure?
      This works for arrows and area segments but not for volumes. We can solve the problem by using a number of arrowheads
      equal to the number of vectors. How does the orientation change when we exchange any two vectors? From this observation we
      conclude that the <b>directed area or volume should be a fully antisymmetric combination of the input vectors</b>.
    </p>
    <p>
      
    </p>
    <h2>The Outer Product</h2>
    <p>
      The outer product is a fully antisymmetric sum of all products of vectors.
      The outer product of two vectors is defined in terms of the geometric product.
 $$
 \mathbf{a} \wedge \mathbf{b} = \frac{1}{2}(\mathbf{a} \mathbf{b} - \mathbf{b}\mathbf{a})
 $$
    </p>
    <h2>Magnitude of Area</h2>
    <p>
      We'd like to be able to compute the magnitude of a directed area.
 $$
 area(\mathbf{a} \wedge \mathbf{b}) = \left| \begin{array}{ll}
 \mathbf{a} \cdot \mathbf{a} & \mathbf{a} \cdot \mathbf{b} \\
 \mathbf{b} \cdot \mathbf{a} & \mathbf{b} \cdot \mathbf{b}
 \end{array} \right| 
 $$
    </p>
 $$
 area: (m: \bigwedge ^ 2) \Rightarrow \bigwedge ^ 0
 $$

 $$
 area = \left| \mathbf{a} \right| \left| \mathbf{b} \right| - (proj(\mathbf{b}, \mathbf{a}) \mathbf{a})^2
 $$

 We still have the problem that even projection has an implicit definition.
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./index.js')
    </script>
  </body>
 </html>
diff --git a/directed-area.ts b/directed-area.ts
 //
diff --git a/Example.spec.ts b/Example.spec.ts
 export default function() {
    describe("...", function() {
        it("should ...", function() {
            expect(true).toBeTruthy()
        })
    })
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Your Topic Title</h1>
    <h2>Example MathJax</h2>
    <p>
      When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
 $$
 x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
 $$
    </p>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./index.js')
    </script>
  </body>
 </html>
diff --git a/index.ts b/index.ts
 //
diff --git a/magnitude.html b/magnitude.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Magnitude</h1>
    <h2>Coordinates then Geometric</h2>
    <p>
    The magnitude of a vector is what we informally call its length.
    In the the context of programming we might adopt a coordinate representation for vectors using the standard basis.
    It shuld be made clear what the meaning of a list of numbers means.
    <p>$v \leftrightarrow [x,y,z]$ means $v = x e_x + y e_y + z e_z$</p>
    <p>The $\leftrightarrow$ means <b>corresponds to</b> or <b>is represented by</b>.</p>
    <p>
    The statement above is also somewhat incomplete in the the LHS make no reference to the basis.
    </p>
    <p>$v \leftrightarrow [x,y,z]$ in the basis $[e_x,e_y,e_z]$ <b>means</b> $v = x e_x + y e_y + z e_z$</p>
    <h2>Geometric Algebra</h2>
    <p>
      At this point, a student could begin to implement a vector with the usual Peano axioms of a vector (linear) space.
      Multiplication of vectors could be introduced by (partially) defining multiplication with the restriction that vectors must be parallel.
      This would be introduced as a (algebraic) convenience for computing a magnitude.
      It would also serve to introduce the idea that the algebra must be <b>closed</b>.
    </p>
    <code>
      <pre>
      const a = ...
      const b = a * 4
      /**
       * This computes the square of the magnitude
       */
      const c = a * b
      /**
       * We don't really need to extract the scalar coordinate if toString works properly.
       */
      
      </pre>
    </code>
   <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./magnitude.js')
    </script>
  </body>
 </html>
diff --git a/magnitude.ts b/magnitude.ts
 //
diff --git a/orthogonal.html b/orthogonal.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Orthogonal</h1>
    <h2>Just vectors for now!</h2>
    <p>
    $(ab + ba) = 0$ $\Leftrightarrow$ $a$ and $b$ are orthogonal.
    </p>
    <p>
      These are equivalent (but initially meaningless!) statements.
      It will, however, be useful to state the right hand side as a more suggestive notation, but the
      mathematical content is contained in the left hand side.
    </p>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./index.js')
    </script>
  </body>
 </html>
diff --git a/orthogonal.ts b/orthogonal.ts
 //
diff --git a/overview.html b/overview.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>How to teach Modern Geometry</h1>
    <h2>Descartes before the new Euclid</h2>
    <p>
      Modern geometry is based upon the idea that geometric relationships are best expressed as algebraic statements.
      The word <b>algebra</b> is used here in its <b>correct mathematical sense</b> to mean
      <b>the notation you get when you allow multiplication of vectors, developed to its full potential</b>.
    </p>
    <p>
      Thinking involves having an honest conversation with yourself and others about less than well-defined topics.
      <b>The art and goal is to think clearly.</b> This is often best done with some form of writing, as if you were trying
      to explain the concept to someone else. In the mathematical science domain, programming may be appropriate to
      this process in many cases. This is especially true with modern high-level programming languages that are able to capture
      abstract concepts and models using object-oriented programming. 
    </p>
    <p>
      As with the learning of any abstract concept, it is often aided by good concrete examples. This is the
      role of curriculum. For geometry, these examples can be visualized on a computer but we are left with a
      catch-22 problem. Students are best able to learn by constructing their own knowledge (and their own programs),
      and yet they come to the programming of geometry armed only with coordinate methods. Fortunately, computers
      like working with coordinate representations and so we get the student to build upon coordinate understanding
      to develop algebraic understanding.
    </p>
    <p>
      coordinates $\Rightarrow$ programming $\Rightarrow$ algebra
    </p>
    <h2>Assumptions</h2>
    <p>
    We assume that sudents have been introduced to the euclidean coordinate plane.
    That is, they should understand that coordinates can be used to uniquely label a point.
    We do not assume that the student has studied traditional Euclidean (straight edge, compass) geometry.
    We assume that the student has been introduced to the empirical observation that the world we live in is very approximately Euclidean
    in that $c^2 = a^2 + b^2$ is a true statement about the lengths of the sides of a right-angled triangle.
    We should call this the <b>Euclidean assumption</b> to emphasize that it is an assumption about the physical world
    and not a theorem derived from some other assumptions.
    </p>
    <h2>Vectors</h2>
    <p>
    We assume that the student has been introduced to the notion of vectors and of a vector space.
    A vector should be introduced as a displacement, meaning that all vectors with the same length and direction
    are considered equivalent. The concept of head-to-tail composition should be understood as a geometric
    interpretation of algebraic addition.
    </p>
    <h2>Programming</h2>
    <p>
      
    </p>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./overview.js')
    </script>
  </body>
 </html>
diff --git a/overview.ts b/overview.ts
 //
diff --git a/package.json b/package.json
 {
    "description": "Geometric Algebra Notes",
    "dependencies": {
        "DomReady": "1.0.0",
        "jasmine": "3.4.0"
    },
    "author": "David Geo Holmes",
    "name": "",
    "version": ""
 }
diff --git a/projection.html b/projection.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Projection</h1>
    <h2>From Coordinates to Vectors</h2>
    <p>
      The challenge in introducing Geometric Algebra to students is that it is often treated in advanced texts from an axiomatic point of view.
    </p>
    <p>
      We assume that students are familiar with coordinates in the Euclidean plane or space.
      Our approach will be to compute invariant quantities using coordinates.
      We then introduce mathematical definitions as a convenient notation.
    </p>
    <h2>Vectors</h2>
    <p>
      A vector will be defined loosely and the concept will be firmed up.
      So a vector is defined to be a directed line segment visualized as a line with an arrowhead at one end to specify the orientation. 
    </p>
    <h2>Representation of a Vector</h2>
    <p>
      We will represent a vector as a list of coordinates that when combined with a basis yield the vector.
    </p>
    $\mathbf{a} \leftrightarrow [a_x, a_y, a_z]$ in the basis $[e_x, e_y, e_z]$
    means
    $$
    \mathbf{a} = a_x e_x + a_y e_y + a_z e_z
    $$
    <p>
      We make it clear that $[e_i]$ is a Euclidean ortho-normal basis, even though we don't yet have the tools to say this formally. 
    </p>
    <h2>Equation of a point on a line</h2>
    <p>
      We'll need this before we try to compute the projection.
    </p>
    <h2>Computing Projection using Cartesian Coordinates</h2>
    <p>
      We need a good definition for orthogonal projection.
      The projection of a point onto a line can be defined as the point on the line which is closest to the other point.
      Students can deduce that this makes a right angle appear and so the projection is orthogonal.
      They should further deduce that Pythagoras's formula can be applied to solve these problems.
    </p>
    <h2>Solution</h2>
    <p>
      Let the projection point along $\hat{\mathbf{a}}$ be $P$ so that $\vec{OP} = \mu \mathbf{a}$
    </p>
    $$
    OB^2 = OP^2 + BP^2 
    $$
    <p>
      We go to coordinates with this statement to find $\mu$.
    </p>
    $$
    b_x^2 + b_y^2 = (\mu a_x)^2 + (\mu a_y)^2 + (b_x - \mu a_x)^2 + (b_y - \mu a_y)^2
    $$
    <p>
      A lot of cancellation happens to reveal $\mu$
    </p>
    $$
    \mu = \frac{a_x b_x + a_y b_y}{a_x^2 + a_y^2}
    $$
    <p>
      $\vec{OP}$ is the quantity that we want and we give it a special name, $proj(b,a)$
    </p>
    $$
    proj(\mathbf{b}, \mathbf{a}) = \frac{a_x b_x + a_y b_y}{a_x^2 + a_y^2} \mathbf{a}
    $$
    <p>
      We can convert the RHS to a non-coordinate notation by introducing the <b>dot product</b> of two vectors.
    </p>
    $$
    \mathbf{a} \cdot \mathbf{b} = a_x b_x + a_y b_y
    $$
    $$
    proj(\mathbf{b}, \mathbf{a}) = \frac{\mathbf{a} \cdot \mathbf{b}}{\left| \mathbf{a} \right|} \hat{\mathbf{a}}
    $$
    <p>
      Students can now implement the various aspects of this formula (direction, magnitude, dot and proj).
    </p>
    <h2>Scalars</h2>
    <p>
      We haven't got to rotations yet so we can only give a loose definition of scalars.
      A scalar is a number whose value doesn't change when we rotate the coordinate axes.
      It also doesn't change sign when we reflect in a mirror.
      A student should be able to convince herself that the magnitude of a vector is a scalar.
      A student should also be able to convince herself that $\mathbf{a} \cdot \mathbf{b}$ is a scalar-valued function.
      The important point is that scalars aren't just numbers.
    </p>
    <h2>Avoiding circular definitions</h2>
    <p>
      A pedagogical issue is that the standard definition of the projection function is vector-valued.
      This creates a circular definition when trying to define the scalar product because
    $$
    \mathbf{a} \cdot \mathbf{b} = proj(\mathbf{a}, \mathbf{b}) \mathbf{b} = proj(\mathbf{b}, \mathbf{a}) \mathbf{a}
    $$
    </p>
    <p>
      Suppose we define a scalar-valued function, $\pi$, representing the magnitude of the projection
      $$
      proj(b,a) = \pi(b, a) \hat{a}
      $$

      And so now,
      $$
      a \cdot b = \pi(a,b) \left| a \right|
      $$
      Using the definition of projection as defining the nearest point on a line to a point
      off the line, students can now implement $\pi$ using the pythagoras formula.
      Also implement $magnitude$, and <code>__vbar__</code> to
      give an operator for the scalar product of two vectors.
    </p>
      
    <p>
      Students should be able to show mathematically
      using coordinates that $a \cdot b = b \cdot a$, and should be able to provide geometric arguments based
      upon the properties of the $proj$ function that this symmetry makes sense.
    </p>
    <p>
      If $magnitude$ has already been implemented in programming with an orthogonal basis,
      and if multiplication of parallel vectors has been introduced, then students could be introduced
      to the following idea:
      $$
      proj(a, b)b = proj(b, a)a = \frac{1}{2} (ab + ba)
      $$
    </p>
    <p>
      While this definition of symmetric multiplication does not allow us to implement general vector multiplication,
      $ab$, it takes us a bit closer. Suppose we have
      $$
      foo(a, b) = \frac{1}{2}(ab - ba),
      $$
    </p>
    where foo is an already implemented function, then
    $$
    \begin{eqnarray}
    ab & = &  \frac{1}{2} (ab + ba) + \frac{1}{2} (ab - ba) \\
       & = & proj(a,b)b + foo(a, b)
    \end{eqnarray}
    $$
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./projection.js')
    </script>
  </body>
 </html>
diff --git a/projection.ts b/projection.ts
 //
diff --git a/rotation.html b/rotation.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <script type="text/x-mathjax-config">
    <!-- I much prefer using the single dollar-sign for inline mathematics -->
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    <!-- SHADERS-MARKER -->
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <h1>Rotations using Geometric Algebra</h1>
    <h2>Overview</h2>
    <p>
      This presentation uses the definition of the $\exp$ (exponential) function,
      and defines $\cos$ and $\sin$ as the two series that appear when the $\exp$ argument is of the form $I\alpha$ where
      $I^2 = -1$ and $\alpha \in K$ (scalar).
      This approach is preferred by the author because it emphasizes the universality of the $\exp$ function and avoids
      the alternative of defining $\cos(\theta)$ in terms of geometric quantities.
      Care is taken to avoid leaving $\cos$ and $\sin$ undefined or not making a proper connection to the rotation angle $\theta$. 
    </p>
    <h2>Generators</h2>
    <p>
    Let $\mathbf{e}_\theta$ be a unit vector that is perpendicular to the vector $\mathbf{a}$.
    Suppose that you want to find a rotation operator $R(\theta)$ that
    </p>
    <ol>
      <li>rotates in plane defined by the two vectors $a$ and $\perp$,</li>
      <li>rotates from $a$ in the direction of $\perp$,</li>
      <li>rotates through a finite angle $\theta$.</li>
    </ol>
    <p>
      Let $I = \perp \hat{a}$.
    </p>
    <p>
      We assume the Euclidean GA axiom that $a^2 = \left| a \right|^2$, so that $I \hat{a} = \perp$.
    </p>
    <p>
      Consider
      $$\begin{eqnarray}
      (1 + I d \theta) a & = & a + d \theta I a \\
                         & = & a + d \theta \left| a \right| \perp \\
                         & = & \left| a \right| (1\hat{a} + d \theta \perp)
      \end{eqnarray}
      $$
    </p>
    <p>
      This shows that $R(d \theta) = (1 + I d \theta)$, because a radian angle is defined to be the arc length divided by the radius.
    </p>
    <p>
      We obtain $R(\theta)$ by 
    </p>
    $$
    R(\theta) = \lim_{n \rightarrow \infty} (1 + I \theta / n)^n = \exp(I \theta)
    $$
    <p>
      This followed because of the definition of $exp$.
    </p>
    <p>
      $I$ effects a $\pi/2$ counter-clockwise rotation.
      It takes more work to show algebraically that $I^2 = -1$.
      (The geometric argument is really handwaving.)
    </p>
    <p>
      Once the fact of $I^2 = -1$ has been established, we can establish that
    </p>
    $$
    exp(I \theta) = cos(\theta) + I sin(\theta).
    $$
    <p>
      It should be noted that in this derivation $exp, cos$, and $sin$ have been defined explicitly as series functions.
    </p>
    <p>
    $$
    R(\theta) = cos(\theta) + \mathbf{e}_\theta \mathbf{e}_r sin(\theta)
    $$
    </p>
    <p>
      It should be noted that this formula, 
      which is based upon application from the LHS,
      does not handle vectors out of the plane of rotation correctly.
      For such vectors the component out of the plane results in  a pseudoscalar part.
      This can be fixed by halving the rotation angle and then by having the inverse of the rotor act from the RHS.
      The net effect is to create exactly opposite volume components that cancel out.
    </p>
    <p>
      Exercise: Show that this is so.
    </p>
    <h2>Review of the Generator Approach</h2>
    <p>
      By working with a generator (an infinitesimal) operator towards a finite rotation, we have been
      able to make the connection between the rotation angle $\theta$ and the rotation operator $R(\theta)$,
      through the universal trigonometry functions. It was consideration of the rotation angle of the generator
      that made this possible. If we had not done this then we would be forced to assume that the appropriate
      relationship existed.
      This assumption would only be proved by arguments involving coordinate rotations or differentiation of trig functions.
      
    </p>
    <h2>Rotor from a to b</h2>
    <p>
      A rotor from two directions follows by combining the half-angle rotor with expressions for
      $cos(\theta / 2)$ and $\sin(\theta / 2)$. However, an easier way to approach this derivation is to
      start from a geometric expression for a reflection in a plane that is normal to a vector. The
      crucial insight is that a rotation is the result of two reflections and that the angle of rotation
      is twice the angle between the normal vectors.
    </p>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./rotation.js')
    </script>
  </body>
 </html>
diff --git a/rotation.ts b/rotation.ts
 //
diff --git a/style.css b/style.css

 html {
    font-family: sans-serif;
 }

 body {
    font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #333;
    background-color: #fff;
    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
 }

 article {
    display: block;
 }

 code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 12px;
 }

 h1 {
    padding-bottom: 0.3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
 }

 h2 {
    padding-bottom: 0.3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
 }

 pre {
    background-color: #f7f7f7;
    border-radius: 3px;
 }
    

diff --git a/tests.html b/tests.html
 <!DOCTYPE html>
 <html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./tests.js')
    </script>
  </body>
 </html>
diff --git a/tests.ts b/tests.ts
 import Example from './Example.spec'

 window['jasmine'] = jasmineRequire.core(jasmineRequire)

 jasmineRequire.html(window['jasmine'])

 const env = jasmine.getEnv()

 const jasmineInterface = jasmineRequire.interface(window['jasmine'], env)

 extend(window, jasmineInterface)

 const htmlReporter = new jasmine.HtmlReporter({
  env: env,
  getContainer: function() { return document.body },
  createElement: function() { return document.createElement.apply(document, arguments) },
  createTextNode: function() { return document.createTextNode.apply(document, arguments) },
  timer: new jasmine.Timer()
 })

 env.addReporter(htmlReporter)

 DomReady.ready(function() {
  htmlReporter.initialize()
  describe("Example", Example)
  env.execute()
 })

 /*
 * Helper function for extending the properties on objects.
 */
 export default function extend<T>(destination: T, source: any): T {
    for (let property in source) {
        destination[property] = source[property]
    }
    return destination
 }
diff --git a/tsconfig.json b/tsconfig.json
 {
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "traceResolution": true
 }
	<!DOCTYPE html>
	<html>
	<head>
	<!-- STYLES-MARKER -->
	<style>
	/* STYLE-MARKER */
	</style>
	<script src='https://jspm.io/system.js'></script>
	<script type="text/x-mathjax-config">
	<!-- I much prefer using the single dollar-sign for inline mathematics -->
	MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
	</script>
	<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
	<!-- SHADERS-MARKER -->
	<!-- SCRIPTS-MARKER -->
	</head>
	<body>
	<h1>Geometric Algebra Axioms</h1>
	<h2>Axioms</h2>
	<ol>
	<li>scalars commute with everything. $\alpha M = M \alpha$, for $\alpha \in K, u \in Cl_n$</li>
	<li>vectors $x \in V^n$ obey $x x = Q(x)$, which is a scalar.</li>
	<li>algebraic properties:
	geometric product is linear in both factors,
	associative,
	distributive over $+$.</li>
	</ol>
	<p>
	The axioms are surprisingly simple. The work lies in making geometric connections!
	</p>
	<h2>Euclidean Space</h2>
	<p>
	This is called out because it is the usual starting point.
	</p>
	$$
	Q(x) = \left\| x \right\|^2
	$$
	<p>
	This statement can be made more explicit by using an orthonormal basis.
	</p>
	<p>
	While Euclidean space is a usual starting point, non-orthogonal bases are sometimes more convenient.
	It is therefore useful to become familiar with Geometric Algebra in this more general context.
	</p>
	<h2>Zero Vectors</h2>
	<p>
	This is a vector in which all coordinates, in any basis, are zero.
	</p>
	<h2>Unit Vectors in Euclidean Space</h2>
	<p>
	In Euclidean space, $Q(x)$ is always non-negative. For any non-zero vector, $Q(x) > 0$. Then
	</p>
	<p>
	Thus we may define $\hat{x} = x / Q(x)^\frac{1}{2} = x / \left\| x \right\|$.
	</p>
	$$
	\hat{x} \hat{x} = 1
	$$
	<script>
	// CODE-MARKER
	</script>
	<script>
	System.import('./axioms.js')
	</script>
	</body>
	</html>
	export default function() {
	describe("...", function() {
	it("should ...", function() {
	expect(true).toBeTruthy()
	})
	})
	}
	{
	"description": "Geometric Algebra Notes",
	"dependencies": {
	"DomReady": "1.0.0",
	"jasmine": "3.4.0"
	},
	"author": "David Geo Holmes",
	"name": "",
	"version": ""
	}

	html {
	font-family: sans-serif;
	}

	body {
	font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: #333;
	background-color: #fff;
	font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	}

	article {
	display: block;
	}

	code {
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	font-size: 12px;
	}

	h1 {
	padding-bottom: 0.3em;
	font-size: 2.25em;
	line-height: 1.2;
	border-bottom: 1px solid #eee;
	}

	h2 {
	padding-bottom: 0.3em;
	font-size: 1.75em;
	line-height: 1.225;
	border-bottom: 1px solid #eee;
	}

	pre {
	background-color: #f7f7f7;
	border-radius: 3px;
	}
	import Example from './Example.spec'

	window['jasmine'] = jasmineRequire.core(jasmineRequire)

	jasmineRequire.html(window['jasmine'])

	const env = jasmine.getEnv()

	const jasmineInterface = jasmineRequire.interface(window['jasmine'], env)

	extend(window, jasmineInterface)

	const htmlReporter = new jasmine.HtmlReporter({
	env: env,
	getContainer: function() { return document.body },
	createElement: function() { return document.createElement.apply(document, arguments) },
	createTextNode: function() { return document.createTextNode.apply(document, arguments) },
	timer: new jasmine.Timer()
	})

	env.addReporter(htmlReporter)

	DomReady.ready(function() {
	htmlReporter.initialize()
	describe("Example", Example)
	env.execute()
	})

	/*
	* Helper function for extending the properties on objects.
	*/
	export default function extend<T>(destination: T, source: any): T {
	for (let property in source) {
	destination[property] = source[property]
	}
	return destination
	}
	{
	"allowJs": true,
	"checkJs": true,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": false,
	"skipLibCheck": true,
	"sourceMap": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es5",
	"traceResolution": true
	}