# Tesseract, explained.

Gulan Twentyeight

*You can try out the demo and come back here or there's a link at the end too.*

The formal definition of a tesseract is that it is the *four-dimensional analogue of the cube*, which is vague on many levels. For starters, the *fourth dimension* itself is very hard to visualize!

3D space with *X, Y* and *Z* axes
Consider our normal 3D space, with *X*, *Y* and *Z* axes. Can you *imagine* another axis perpendicular to all of them? If you take my word for it and believe that such an axis exists (let's call it *W*), what are the possibilities? Can you have shapes in it? Cylinders, Pyramids, ** Cubes**?

Let's dial it down a notch and go to *0-Dimensional* space. There are no *X*, *Y* and *Z* and the only thing that can exist in that dimension is a point. Let's introduce a dimension (say *X*) and have the point travel on it. If we trace out the path travelled by the point, we get the **Line**. Technically it's a *line-segment*.

Now we take the line and add another dimension (*Y*) and have the line travel down the *Y-axis* for the same distance. If we trace out that path, we get the **Square**. If we take the square and then do this same exercise on the *Z-axis*, we get the **Cube**.

For the *finale*, we take the cube and add a fourth dimension (*W*) and have it move in that dimension. The shape we get is called a *Hypercube* or a ** tesseract**.

We can have other shapes in four dimensions as well. In fact, we can perform this exercise with other platonic solids and get different shapes. Generally, these shapes are called *polytopes*. We can say the tesseract is one of the *regular 4-polytopes*.

Net of a tesseract. * credits Wikipedia* Just as a square is made up of 4 lines and a cube is made up of 6 squares, A tesseract is made up of 8 cubes. Suppose you have a cubical box and you open it up. You get a 2D shape of squares that can be joined up to form the cube again. This opened up figure is called the *net* of the cube. A particular net of a tesseract looks like a three-dimensional cross and is known as a *Dalí cross* owing to Salvador Dalí's painting *Corpus Hypercubus*.

## Projection

Now that you have a vague idea about what a tesseract is, let's see how we could visualize one. If you take a cube face a wall and shine a torch on one end, the shadow on the wall would correspond to a square. If you rotate the cube, the shadow also stretches, skews and rotates.

Mathematically this process is called a ** projection** and this underpins all of 3D graphics. That first-person shooter game that you're playing uses projection to show you the 3D world of the game onto your 2D screen. Here's an example of projecting a 2D square on to the

*X-axis.*

You can do this in four dimensional space too. You can project a 4D point onto 3D and if you want, to lower dimensions. You can rotate the tesseract in 4D space and watch the shadow in 3D. Which brings us to...

## The Demo

The demo shows you the projection of a tesseract in 3D space. The rotation tab on the upper right corner lets you rotate the tesseract along the *XW*, *YW* and *ZW* planes and moving with the mouse lets you see the rotated shape from different angles.

Since we can't really represent the fourth dimension well, rotating along the *W-axis* would look like the tesseract is opening up and closing down on itself. The blue part is one of the eight squares that make up the tesseract so that you can get a feel for its position.

Now go play around with it and see if you can visualize how a tesseract would look in four dimensions.

## Resources

These are some resources I found useful while building the demo.

The first is this link from the mathematics department at Union college which has detailed explanations about tesseracts, along with some cool animations and videos. It is great for building an intuition so I suggest you check it out.

This video from LeiosOS helped me to understand the rotation and projection matrices needed to display the tesseract.

This observable from Torben Jansen was my definitive resource in grokking *three.js* and tesseracts. He's used a cool trick with hamming distances to determine the positions of each of vertices of the tesseract. Take a look at it.