Visualization of High-dimensional Geometries, Like Tesseracts

Showcase
1

High-dimensional spaces and objects are popular topics in science fictions. They are fascinating and mysterious since we can’t grab their essences by our intuition. Now, if you can create these objects, manipulate them, and see their movements by yoursef, would this unveil some mysteries of them for you?

A 5D hyperCube with rotation animation in 2 surfaces
A 5D hyperCube with rotation animation in 2 surfaces1920×1080 391 KB

This project was my course design for Line Algebra two years ago. Back then, I didn’t have time to write a friendly UI for it, thus all operations were performed in the console. I decided to build a new UI recently and it is almost finished now. You can play with it here:
Visualization of Hyper Geometries
This link comes with a 5D hyperCube with rotation animation created already, as what is shown in the first image. However, the object is fixed by default. To show the animation, you need to toggle the “spin object” option, which will be mentioned in the introduction to the UI. Before more text, I’d like to show you more demos here:
static 4D tesseract
static 4D tesseract1920×1080 431 KB

This is a static tesseract, aka 4D-hyperCube.
4D simplex
4D simplex1920×1080 352 KB

This is a 4D-simplex, spinning in 1 surface.
vector field
vector field1920×1080 171 KB

This is a vector field. Creation of vector fields involves the evaluation of complex equations, thus the creation form UI is not supported currently.

5 Likes
2

I think the new UI is quite intuitive, thus there isn’t much to introduce.
Hover on the button marked “…” and the option bar will expand. The spinning animation is toggled by “spin object” button.

options
options1920×1080 361 KB

Click the button marked “+” to add new object. There are 3 types of objects can be customized currently, which are hypecube, simplex and tensor. The support of adding arbitrary geometry via specifying its surfaces is still under development and will be available soon. Additionally, there are 8 pre-defined demo can be shown.
add
add1920×1080 468 KB

You may notice there is a “projection” option can be specified for hypecube and simplex. This is how the visualization works: The scene rendered is actually the projection of these geometries to the 3-D space.

3

Some notes:

  • This project relies heavily on html5, css3 and es6 features. Please use a modern browser to play with it.
  • This project is only a prove-of-concept one. No intensive tests are performed and no optimization is applied. When spinning animation of a 5-D hypercube is playing, the FPS drops sharply to about 30-40 on my machine with i5-8300h processor. You may need a decent hardware to test the geometries in still-high dimensional space.
  • Only a limited set of features are exposed via UI. To explore more, you may want to check the sources and Wiki (not completed though) at
    Github Repository of The Project
    :wink:
1 Like
4

Fantastic work!

Mind if I use some elements of your UI in a project?

6

Feel free to use it at your will :smile:

7

This is really cool!