This is a short fun post showing a visualization of a 4D hypercube ("tesseract") projected onto a 3D "screen" via a "pinhole camera" in 4D space, and then embedded into a 3D subspace.

You'll need a browser that supports WebGL to view the visualization below. Most web browsers do. If you use the Beaker Browser , you can access the demo via this hyperdrive link - tesseract-babylon.

The visualization uses BabylonJS. Each edge of the tesseract is rendered using a number of small overlapping spheres which are coloured acoording to the original 4D coordinate at which their centres were placed. The x/y/z/ axes are mapped to R/G/B while the w axis is left unused for the colour. Since this can generate lots of spheres, geometry instancing is used to reduce the scene complexity. Note that you can also rotate the tesseract projection in 3D space .. which is as though you're rotating the coordinate system of the screen of the pinhole camera.

You can do "view source" on this page to see the Javascript code for this.

TODO: The viewport responds to scrolling by zooming in/out .. which interferes with page scrolling. Need to fix this.