hypercube.js

Instructions

  • Drag or scroll the mouse wheel to rotate the hypercube — hold shift/meta to rotate through the fourth dimension
  • When using a touch screen, use two fingers instead of one to rotate through the fourth dimension.
  • Click on button to change the coordinate system in which the rotation is performed
    • Local rotations are performed along planes relative to the current viewport orientation which seems to feel more intuitive
    • Global rotations are performed along fixed planes which changes the apparent direction of the rotations as the point of view changes
  • Tap on the demo to start/stop a random rotation

What?

The demo displays a down-projected four-dimensional cube, also known as a tesseract. It has sixteen vertices, thirty two edges, twenty four faces, and is composed of eight overlapping three-dimensional cubes. The location of each vertex is described by four (XYZW) coordinate components, each with a value of either +1 or -1. All the black vertices have a negative W-component, while all the red vertices have a positive W-component. The slightly transparent points and lines have a negative Z-component, while the fully opaque lines and points have a positive Z-component. As a further visual aid there are also two hollow tetrahedrons: the apex of the grey one is located at (-1,-1,-1,-1) and the apex of the pink one is located at (+1,+1,+1,+1). These two points define the main diagonal of the tesseract.

The third dimension is represented using an ordinary perspective projection — things further away along the third dimension appear smaller. The otherwise hidden fourth dimension is visualized by down-scaling the projected XYZ-components of vertices further away along the fourth dimension — the fourth dimension shrinks towards the origin. In short, the X-axis is oriented left-to-right, the Y-axis bottom-to-top, the Z-axis near-to-far, and the W-axis "infinity-to-zero".

Rotation planes

  • XZ (horizontal)
  • YZ (vertical)
  • XY (wheel)
  • XW (horizontal+shift)
  • YW (vertical+shift)
  • ZW (wheel+shift)