NOTE: Soundcloud changed their API and this demo is currently being fixed

What is BeeWave?

The inception of BeeWave sprang from a serendipitous moment - a casual mention of a 'Synthwave Bee' in an unrelated conversation. This phrase lodged itself in my mind, evolving into a vivid concept that I couldn't shake off. Inspired, I set out to bring this idea to life, blending my professional background with a personal twist.

BeeWave is a digital odyssey where music and visuals collide. Drawing upon my experience in creating audio visualizers for companies like Kelloggs, I embarked on a journey to mold this whimsical idea into a dynamic, interactive experience. The project is a fusion of a synthwave color theme and a mesmerizing sunwave sunset.

At its heart, BeeWave is a Three.js project that transforms music into a visual spectacle. It's not just about listening to beats; it's about seeing them take form in a 3D space, crafted with cutting-edge web technologies like WebGL and React Three Fiber. The project is a testament to the power of a simple idea, nurtured and brought to life through creativity and technical expertise.

Tech Stack

The BeeWave project leverages a suite of modern web technologies, each playing a significant role in its development:

• React Three Fiber (Three.js)
  • At the core of BeeWave's 3D visualization is React and Three.js, a robust TypeScript library used for rendering 3D graphics in the browser. It enables the construction and animation of BeeWave's dynamic 3D environment, where music and visuals merge.
• WebGL
  • Working alongside Three.js, WebGL is essential for rendering BeeWave's intricate 3D scenes efficiently. It taps into the GPU's capabilities for high-performance rendering, which is particularly important for handling the multitude of dynamic objects in the scene. The use of instancing techniques is key to managing these objects effectively, ensuring smooth and responsive animations.
• GLSL (OpenGL Shading Language)
  • In BeeWave, GLSL is utilized to craft custom shaders for the skybox. These shaders are designed to incorporate live audio data, creating a dynamic and responsive visual environment that reacts to the music's nuances.
• Web Audio API
  • The Web Audio API is instrumental in analyzing the music. BeeWave uses this API for real-time audio analysis, employing a Fast Fourier Transform (FFT) to deconstruct the music into data that drives the visualizations. This analysis allows the project to create visuals that accurately respond to the music's rhythm and frequency.

Art

The bee model, a central element in this project, was acquired online. My partner in both crime and life, Bebeness, brought it to life by skillfully texturing it in Procreate, giving it a unique and captivating look. Her contribution extended beyond this, as she was pivotal in developing the color scheme, which played a significant role in defining the project's aesthetic appeal and direction.

In my role, I focused on bridging the gap between our artistic vision and the technical aspects. I collaborated closely with my partner, helping to translate her artistic ideas into the digital realm. My role involved guiding her through the technical intricacies and working together to create visually appealing results. This collaboration highlights my ability to work effectively with artists who might not be as familiar with the technical side, ensuring their creative vision is realized without being hindered by technical complexities.

Debug Mode

The debug menu in BeeWave exemplifies this collaborative spirit. It provides an intuitive interface that allows users, irrespective of their technical know-how, to experiment with and personalize their visual elements like color schemes and the reactivity of the visuals to the music. These features highlight the flexibility of BeeWave, offering a glimpse into the project's potential for customized visual experiences.