This will be a series on geometry (broadly speaking), applied to and demonstrated through web graphics. The code samples will be in TypeScript/React/THREE.js/react-three-fiber, but the concepts are completely general and applicable to many other areas (machine learning, modelling, optimization, …)

Geometry

For starters, what do I mean by geometry? Well, 2d and 3d geometry are particularly relevant to us because we live in 3d space. 2d shapes appear on screens and flat surfaces, while the objects around us have 3d shapes.

But geometry also comes from more abstract sources. Consider the following situations:

  • in physics, the kinetic energy $E$ of an object is related to its mass $m$ and its speed $v$ by the formula

    \[E= \frac12mv^2;\]

  • again in physics: say an object starts from rest, and has constant acceleration $a$ (e.g. $a=9.8\text{ m/s}^2$ for gravity). The distance $s$ it travels after time $t$ is given by

    \[s=\frac12at^2;\]

  • in geometry: we consider the set of points $(x,y,z)$ in 3d space which satisfy the condition

    \[z = \frac12xy^2.\]

    Here’s what that looks like:

These are all different physical situations. But mathematically, they’re all equivalent: all that matters is the relations between the numbers, not what the numbers represent. Understanding the geometry of the above shape is equivalent to understanding any (and all) of the more concrete situations. For instance, an object of mass $4\text{ kg}$ and velocity $3\text{ m/s}$ corresponds to the point $(4,3,18).$

Complex problems may involve more than three dimensions; search algorithms routinely calculate in thousands or millions of dimensions. It’s harder to visualize these problems. But we can use our physical intuition from 2d and 3d space to develop formulas that make sense in any number of dimensions. For example, in just a few posts we’ll see how to talk about lines in any-dimensional space.

Even “spatial” geometry in 2d and 3d space naturally leads us to consider higher dimensions. As a simple example, a point in 6-dimensional space is equivalent to two points in 3d space, or three points in 2d space:

\[\begin{bmatrix*} 1\\-3\\2\\4.1\\0\\1 \end{bmatrix*} \leftrightarrow \begin{bmatrix*} 1&4.1\\-3&0\\2&1 \end{bmatrix*} \leftrightarrow \begin{bmatrix*} 1&-3\\2&4.1\\0&1 \end{bmatrix*}\]

Spaces

This brings us to our first definition.

Definition.
A space is any concept that can be described using numbers.

  • This is extremely vague. Let me be more precise:

    Definition.
    $\R^n$ ("arr-enn") is the set of $n$-tuples of real numbers: $$ \R^n = \{(x_1,\dotsc,x_n)\mid x_i\in \R\text{ for } i = 1,\dotsc,n\} $$

    ($\in$ means “in” or “is an element of”). For example, $(0,0)$ is a point in $\R^2,$ and $(3,0,1)$ is a point in $\R^3.$ I might also write these vertically, e.g.

    \[\vec00 \quad\text{or}\quad \vecc301.\]

    \(\R^n\) is one of the most important examples of a space. Any subset of $\R^n$ is a space, and you could well take that as the precise definition. For example, the blue shape above is a subset (I could also say subspace) of $\R^3$.

  • Actually, the term space doesn’t have a precise definition in math (neither does number). There are a lot of technical concepts that have space in their name, which do have precise definitions, depending on what aspect of geometry we’re focusing on or what tools we’re using:
    • affine/vector spaces are used when studying translation and scaling;
    • metric spaces are for studying the concept of distance;
    • inner product spaces incorporate all of the above and also angles;
    • …

    (We’ll learn about these in due time.) But “space” on its own is just a vibe.

  • Notice the word can in the definition. There are many different ways to represent any given situation, and rarely is there a single best one. For example, $10\text{ cm}$, $3.94\text{ in}$, and $0.33\text{ ft}$ are three different numbers corresponding to the same concept.

    So, there’s a space of physical distances. This space “is” the same as $\R$, but it is “equivalent to $\R$ in many ways”. Moreover, notice that “equations” like

    \[\begin{align*} \line{2em} + \line{1em} &= \line{3em}\\ 3\times\line{1.5em} &= \line{4.5em} \end{align*}\]

    are meaningful, without even needing to assign numbers to the lengths. (Although this may be useful in verifying that the equations are true.)

    In this series, I’ll try to take a coordinate-free approach where we focus on the intrinsic properties of things. How we describe those spaces numerically will then be a separate step. In particular, a big chunk of geometry is just converting between different coordinate systems.

    When we do calculations, they’re always going to be with $n$-tuples of numbers, and you can write your programs thinking this way. The benefit of the more abstract perspective is similar to the benefit of having types in your code.

  • Space in the mathematical sense means basically the same thing as shape. In everyday language, we tend to think of space as an ambient medium which is populated by shapes. It’s very powerful to get rid of that distinction as every shape as a space in its own right, and then one space can embed in another in many different ways.

    For instance, the following depicts two circles drawn on a torus in 3d space. We can think of the circles as living in 3d space, occupying some of the same space as the torus. But we can also forget about ambient 3d space and just think about the torus as the ambient space. Furthermore, we can think of both these circles as different embeddings of one “platonic” circle into the torus.

Important Examples

Finally, let me introduce notation for some important examples.

  • as we have already seen, $\R^n$ is “$n$-dimensional space”. For many purposes we are especially interested in the cases $\R^2$ and $\R^3$.

  • Frequently, we want to put bounds on the numbers we use. An interval consists of all numbers between two numbers $a$ and $b;$ the numbers $a$ and $b$ are called the endpoints of the interval. There are different versions depending on whether we want to include the endpoints or not:

    \begin{align*} [a, b] \Defeq \{ x \in \R \mid a\le x\le b \}\\ (a, b) \Defeq \{ x \in \R \mid a < x < b \} \end{align*}

    We call $[a, b]$ a closed interval and $(a,b)$ an open interval. There are also variants where we want to include one endpoint but not the other:

    \begin{align*} [a, b) \Defeq \{ x \in \R \mid a\le x < b \}\\ (a, b] \Defeq \{ x \in \R \mid a < x\le b \} \end{align*}

    These are sometimes called half-open intervals, but there aren’t individual names for them. For example, when describing angles in degrees, we’re interested in the interval $[0,360).$

  • In particular, the unit interval \[ \I \Defeq [0, 1] \] consists of all numbers between 0 and 1, inclusive of both. This space comes up a lot when dealing with paths and animation (= paths in time).

  • we write $\Sone$ for a circle. This means the edge of a circle, not the points inside; a filled circle is called a disk, and denoted by $\Dtwo$. Below, I’ve drawn a circle on the left and a disk on the right:

    The notation $S^1$ means a one-dimensional sphere. Even though it lives in two-dimensional space, the circle is itself considered one-dimensional since you can only move backwards/forwards along it. The disk, on the other hand, is considered two-dimensional.

    The notations extend to higher dimensions: $\Stwo$ refers to a (hollow) sphere in $\R^3$, while $D^3$ refers to a filled-in ball. Once we learn how to make sense of “distance” in higher dimensions, we’ll be able to define $S^n$ and $D^n$ for all $n$.