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)