MAGE is a AI powered music visualizer that utilizes heavy randomization of Shaderpark shaders to create unique, audio-reactive environments. Perfect for musicians looking to produce captivating music videos, artists trying to create mesmerizing visual effects, or developers exploring generative AI and audio reactive environments.
- Randomly Generated Environments: Experience a new visual every time.
- Music Reactivity: Dynamic visuals that sync with your custom audio.
- Scene Management: Save and share your favorite scenes.
- Preset Selection: Choose from curated visual styles with featured music or save your own custom scenes.
- Song Upload: Visualize your own custom tracks with easy upload.
- Manual Settings: Fine-tune settings to match your vision or randomize settings to look for inspiration.
- Musicians: MAGE is primarily targeted to musicians, and allows you to create stunning visuals for your music at the click of a button, or tweak parameters to handcraft your own scenes.
- Artists: The generative and artistic aspects of MAGE will continue to improve (better generation logic, scene transitions, and video editing/rendering features are planned for the future)
- Developers: The code for MAGE is completely open source and I encourage anyone with the creativity and know how to iterate upon its generation logic or more with their own ideas.
MAGE is live on GitHub Pages and runs as a static HTML site. Its use is quite simple and I have provided a video guide to explain its key features and core concept in more detail.
Some of the shaders generated by MAGE can be VERY demanding. I am running an RTX 4070 Super, and I still get around 40-50 fps when the generated shader is too complex. Therefore I would recommend a pretty beefy GPU to run this program. While I have optimized it to the best of my ability and patched all memory leaks (I hope...) there is still some unoptimized logic that can be generated within the shader code. There is much improvments to be made in future updates, so the requirements may or may not be lowered in the future. This also means the app will barely run in mobile. On my iPhone 15, I averaged 10 fps with just about any shader I generated. Future versions will definitely have specific presets tailored for mobile, and I will have to update the shader generation to account for weaker specs. You can still generate and save shaders just fine on mobile though, so feel free to do that!
MAGE is primarily made in Javascript and leverages the following libraries:
- THREE.js for scene rendering and effects.
- ShaderPark for generating shader effects.
- Tweakpane for the settings menu.
Vanilla HTML, CSS, and JavaScript are used for the frontend.
Contributions are welcome! Feel free to add changes, suggest new features, or improve existing ones. MAGE is fully open-source, and your creativity is encouraged. Also if the generator spits out a really cool visualizer feel free to send it to me and I can make it a preset!
There are a few issues with MAGE:
- Animations glitch out if the page is open for too long. This is fixed with a simple refresh and I expect this to be fixed within the next update.
- There is a problem with the kaleidoscope shader effect that is included with the THREE.js library. It does not have a uniform to update screen resolution and stretches if the window is not square. I do not believe this would be fixable without rewriting that effect.
- The Camera Orientation setting changes the camera's up vector, which sometimes works but is incompatible with THREE.js default Orbit Controls. Future versions should implement Trackball or Arcball controls instead, and do away with the "camera orientation" setting entirely
- Some presets must be clicked at least once to display proper animations (Mod 3 not applying properly in tweakpane) Please report any other issues you find as I have tried to iron out as many bugs as I could before release!
There is a suite of feautures that have yet to properly be implemented:
- Extended Audio Controls: Currently you can only pause and play the audio. I would like to add toggleable mouse controls using the middle mouse so that volume and playback time can be controlled. The GUI and logic for this is mostly implemented already but needs to be finalized.
- Bundled Audio: Requires the encoding of mp3 audio into a Base64 string, should be possible to implement within the current system in theory.
- Custom Skybox Textures: Bundling custom skyboxes as a Base64 would allow for much more customization as well and could function well with current scene and preset implementation.
- Custom Icons: At some point I want a script to create custom icons for user generated presets, which can make a gradient that somewhat resembles the look of the scene. I tried to emulate this (poorly) with the already existing presets.
- Web Based Presets: Presets will eventually be stored in a web database so they can be used by anyone (similar to FUZZYW's dddance.party.
Special thanks to:
- Toren Blankensmith: Creator of ShaderPark, the core technology that made MAGE possible. Shaderpark is awesome and I really recommend everyone who has any interest in shaders to check it out.
- Mrdoob: Creator of THREE.js and any other developers of THREE.js.
- FUZZYW: For inspiring the UI design and the idea of scene presets.
This project is fully open-source. Edit, change, and share as you see fit.
Stay tuned for updates, including even more video demos showcasing MAGE in action!