https://github.com/vxyong/Orbital-Tunes

In the digital realm of "Orbital Tunes," visitors are invited to experience an extraordinary fusion of visual art and music, where a uniquely designed 3D universe pulsates in sync with audio waves. This interactive art installation, rendered through WebGL with Three.js, showcases a harmonious blend of technology and creativity, featuring a character dressed in a prom suit and a mystical floating eyeball, each element meticulously animated to reflect the nuances of the accompanying soundtrack.

The core of "Orbital Tunes" lies in its ability to translate audio inputs into a visual spectacle. Utilizing the Web Audio API integrated with Tone.js, the project analyses and reacts to different sound frequencies and volumes from a curated playlist that spans various music genres—from techno and house to drum and bass and psytrance. Each track activates a distinct visual response, making every experience unique.

The visual component is crafted using Three.js, a powerful 3D JavaScript library that enables real-time rendering of complex 3D animations directly in the web browser. The scene is set in a virtual space where the central figures—a sharply dressed character and an enigmatic eyeball—reside. The suit-wearing character adds a touch of surreal elegance to the space, while the floating eyeball adds a layer of enigmatic allure, both enhanced by dynamic lighting effects and shaders that react to the music.

To intensify the immersion, the project incorporates advanced graphical effects such as bloom filters for glowing visuals, lens flares for added light dynamics, and custom shaders for a more vibrant color output. Users can interact with the scene through various GUI controls, adjusting visual elements like color saturation, light intensity, and particle dynamics, thus directly influencing the aesthetic output in real-time.

Moreover, the inclusion of an EffectComposer from Three.js's postprocessing library allows for sophisticated visual transitions and effects, heightening the overall sensory experience. The OrbitControls module ensures a smooth navigation experience, letting users explore the 3D space from multiple perspectives by rotating, zooming, and panning around the scene.

"Orbital Tunes" is not just an artistic endeavor; it is a technical showcase demonstrating the capabilities of modern web technologies in creating immersive, interactive media. It invites users to not only observe but interact, offering a personal journey through sound and vision where each visit promises a new discovery based on the music's flow and the viewer's choices.

This project serves as a bridge between digital art and viewers, providing a space where music and visual art coexist and redefine one another, creating a continuous loop of auditory and visual feedback that captivates and engages all senses.

https://www.youtube.com/watch?v=aKPkYY-CYuw

https://www.youtube.com/watch?v=5C9GmkwSfGA

Originally, I was so impressed by this video that I planned to create a similar piece using windowmanager.js, as I already work with three.js. However, due to my limited skills with three.js, integrating the two libraries proved too challenging. Eventually, I had to acknowledge my limitations and, with time running short, decided to consider a different project. Since I enjoy listening to music, I thought of building a music visualizer with three.js. When you think of music visualizers on YouTube, NCS music immediately comes to mind. Thus, I've decided to create something similar using three.js.