Interactive 4D Hypercube

A visualization of a tesseract projected into 2D space

Controls

Show Coordinates
Show Nodes
Show Lines

Interaction Guide

  • Hover and drag to control rotation
  • Mouse movement affects rotation speed
  • Automatic smooth transitions

About

This visualization demonstrates a 4D hypercube (tesseract) projected into 2D space. The colors represent different vertices, and the gradients show the connections between them.

Built with SVG and JavaScript. Interface designed with Tailwind CSS.

The Mathematics Behind the Hypercube

1. 4D Rotation

We rotate the hypercube in 4D space using rotation matrices in multiple planes (xy, xz, xw, yz, yw, zw), allowing us to see different aspects of its structure.

2. Stereographic Projection

We project from 4D to 3D using the method w' = w/(w-d), where d is the distance to the projection point, creating a 3D shadow of the 4D object.

3. Perspective Projection

Finally, we project the 3D shadow onto a 2D screen using standard perspective projection, maintaining depth cues through size and opacity.