The Hopf Fibration was one of my favorite examples from undergrad studies, and when I came across a neat introduction with very specific computations, I wanted to visualize it myself.

This marks my first JavaScript program and hence my first journey into Three.js (or even 3D graphics, for that matter). You can try it out here, and the source code is on github as well.

One very interesting feature that deserves mention:

What basically happens is that points on the ordinary sphere in 3D correspond to circles on the hypersphere in 4D. When you project these back into 3D, these circles fill the entire space. That’s not interesting on it’s own, but what’s cool is that *any two of all these infinitely many circles will be linked*. You can see that when you fiddle around with the „base space parametrization“ or add even more objects (that’s what the „detach“ button does). Of course you can only really see finitely many circles at a given point, but it hopefully convey the idea.

There’s a whole lot more to unpack here, e.g. the connection to theoretical physics, but I think this showcase should be focused on where three.js comes into play also, I appreciate the existence of the fat lines-module, which makes it a lot more appealing.