Mirrorfold
Fly through endless fractal worlds in your browser. Seventeen worlds, kaleidoscope mirrors, feedback trails, filters, overlays, and an autopilot that reacts to music.
This project is inspired in part by the music visualizers from decades past… from Winamp plugins to the standalone visualizer MilkDrop. This has a familiar feel when in Journey mode (an autopilot that flies through the procedurally generated 3D worlds) while listening to music.
However, this is much more. Flying through fractal 3D landscapes, unlocking features by flying through Orbs, and tweaking so many settings is a relaxing and beautiful time sink, whether on your phone or PC.
Support for Google Cardboard like VR is also in development (very early stage) and full VR support for true VR headsets is on the way.
You can Cast or AirPlay your mobile device to your TV as well.
This is under active development so don’t be surprised if things change from underneath you when I get a hankering for new features.
Report bugs and discuss features and whatnot in GitHub issues. I’ll try to address them in a timely fashion but this is a small creative side project that itches a scratch for me and I just thought I’d share it with the world.
Relax, unwind, and enjoy!
Try it: https://gcrabtree.github.io/MirrorFold/
The app is one page, one stylesheet and a folder of JavaScript modules. There is no build step and no JavaScript dependency. It uses WebGL 1, so it runs in any current browser on a phone or a desktop.
Contents
What it does
- 17 worlds. Fifteen are solid fractal surfaces; two (Nebula and Aurora) are glowing volumes. Every world repeats forever in all directions.
- Free flight in any direction, with roll. Your speed drops as you approach a surface, so you can never hit a wall.
- Morph. Each world slowly changes shape as you fly.
- Kaleidoscope mirrors: off, or 3, 4, 6, 8 or 12 segments.
- 13 colour palettes. Seven are available from the start. Six are unlocked by finding orbs.
- 6 feedback motions, 17 filters, 7 overlays and 8 transitions, in the style of the MilkDrop music visualiser.
- Music reactivity from a built-in track, your own audio file, another browser tab such as Spotify or YouTube, the microphone, or a tapped tempo.
- Journey, an autopilot that flies for you and changes the world, palette, mirrors, motion, filter, overlay and land over time. You control what it may change with templates.
- Share spot links that take someone to the exact place you are looking at.
- VR viewer mode for a phone in a Cardboard-style holder: a picture for each eye, and you look around by turning your head.
The worlds, in menu order: Lattice, Sponge, Halls, Box, Citadel, Coral, Bulbs, Shards, Crystal, Julia, Web, Temple, Nebula, Fortress, Hive, Gates, Aurora.
Run it
Online: open https://gcrabtree.github.io/MirrorFold/.
From a copy of this repository: run python3 -m http.server in the folder and open http://localhost:8000. Opening index.html straight from the file system no longer works, because browsers do not load JavaScript modules that way.
From a local web server:
python3 -m http.server 8000
Then open http://localhost:8000/.
Host your own copy: put index.html, css/ and js/ (and packs/ if you want the starter pack offered) on any static web host. For GitHub Pages, keep them at the root of the published branch and keep the empty .nojekyll file, which stops Pages from running Jekyll over the repository.
On the start card, choose Enter with music or Enter silent.
Full screen
On a desktop, Android or iPad, press the Fullscreen button.
Safari on iPhone does not let a web page go full screen, so the button is hidden there. Instead, add Mirrorfold to your home screen: open the site in Safari, press the Share button, then Add to Home Screen. Opening it from the new icon runs it without Safari's bars. The home-screen copy keeps its own saved templates and orb progress, separate from Safari's; save a pack file from the Library to move templates across.
Controls
Phone or tablet
| Action | Gesture |
|---|
| Move | Left thumb, anywhere in the left 45% of the screen. A ring appears under your thumb. |
| Look | Right thumb, anywhere else. |
| Change speed | Two fingers on the right side, pinch. |
| Roll | Two fingers on the right side, twist. |
| Burst of speed | Double-tap on the right side. |
Mouse and keyboard
Click the picture to capture the mouse. Where the browser does not allow that, drag to look.
| Action | Key |
|---|
| Fly | W A S D |
| Up, down | Space, Shift |
| Roll | Q, E |
| Look | Mouse, or arrow keys |
| Change speed | Mouse wheel |
| Burst of speed | B, or double-click |
| Next or previous world | ], [ |
| Jump to one of the first nine worlds | 1 to 9 |
| Next palette | P |
| Next mirror setting | M |
| Journey on or off | J |
| Tap tempo | T |
The controls at the top of the screen fade after five seconds without input and come back on any touch or click.
The buttons
First row: World, Palette and Music.
Second row:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
