I created this visualization as an extra credit project for the multivariable calculus class I took in the fall of my senior year of high school.
A tesseract is essentially a 4D cube; what you see on the website is a visualization of the points of the tesseract undergoing two perspective projections: once from 4D into 3D, and again from 3D into 2D (which you see on your computer screen!)
The graphics were created with p5.js. I did not use the library's built-in WebGL 3D renderer. Rather, everything you see is represented by 2D shapes, the positions and scales of which I calculated manually (for whatever reason, doing something like this has been on my bucket list).
The site is live at https://tesseract22.netlify.app! Feel free to visit and try it out.
- Speed - Drag the slider to control the rate at which the rotations are occurring.
- Rotation Axes (3D cube only) - Enable or disable axes about which to rotate the cube.
- Rotation Planes (4D tesseract only) - In 4D, we can't really rotate about a singular axis. Instead, we rotate about a plane. Each rotation is represented by a 4x4 matrix. By checking a box, you add a rotation matrix to a list of matrices to be composed—the resulting matrix product is applied to all the points of the tesseract prior to projection.
As mentioned, the animation itself is rendered with p5.js. The website was programmed with Create React App and TypeScript. For CSS, I used Emotion in the styled flavor.
The code was inspired in part by Daniel Shiffman's YouTube video on 3D projection. I didn't actually realize he had another video on 4D projection until I was well into the project—but proved to be useful during my myriad sanity checks.