🔮 Mathematical Magic Mirrorball 🪄

🇬🇧 English	🇯🇵 日本語

A combination of Video and WebApp ( https://mirrorball.frost.kiwi ). While watching, viewers can directly interact with examples and visualizations, on a second device or a separate browser tab. The audience will be taken on a journey through the history and maths on the topic of the "Mirrorball projection".

Deceptively simple, it is an incredible intersection of Computer Science and Mathematics. This project has been made in conjuction with a paper in pre-print, which you can read on arXiv: https://arxiv.org/abs/2308.10991 . The paper was submitted to IJAT.

Features:

Discover the Mirror Ball Projection with colorful visualizations	Export to Equirectangular / Lat-Long and play around with rotations
basic-demo.mp4	equirectangular.mp4

View the projection of a Mirrorball with different colorful visualizations to understand how the math works. You can project a:

• photo
• video
• live webcam stream
• capture card feed

Any format, which your web browser can decode is supported. That should cover all important file types. You can also export as a Equirectangular projection for use in other panorama software.

Photo contribution guide, as per announcement

As shown in the sample Pull Request #13, just commit the photo into any spot and mention how you want to be credited. To do so, you will need to fork this repo in the top right corner first. Then you can drag&drop the photo into the code. This will make GitHub officially credit you as contributor. I will move it to the correct folder (Example commit), crop, rotate the image and credit the author (Example Commit) and generate the thumbnail (Example commit).

If that's too troublesome: Just message me on any Social media or E-Mail me at [email protected].

Submission:

The photos in the "User submissions" tab were provided by:

• @zjquid on GitHub
• Nature's Joints on Discord
• u/wwxxcc on Reddit
• u/MagicList on Reddit / @CigamPower on GitHub
• Anonymous via E-Mail
• Сергей via E-Mail
• Chesapeake / @mothdotmonster on GitHub
• @Lanzaa on GitHub
• @BenBE on GitHub

Build instructions

If you want to run the code locally:

• Clone the repo
• Install Node.js
• Run npm install in the repo's root directory to install the dependencies as defined by the package.json file
• Run npx vite, so Vite will start a local server to test the code on

Credits:

• The side controlbar is realized via the package lil-gui, package author: @georgealways
• The debug statistics toggled in the settings tab is the evergreen stats.js, package author: @mrdoob
• Debug interface in the settings tab for tracking down bugs especially on iOS is provided by the awesome eruda, package author: @liriliri
• One key insight on state management to get redraws only when the user is actually touching the interface and be a static page otherwise was provided by @Pomax in this StackOverflow answer
• Vector math performed via the package gl-matrix, package author: @toji