Evolution By Sound

Evolution by Sound: Transitions and Transformations

This project, Evolution by Sound, is a dynamic web application that allows users to upload audio files and experience their music in a new visual dimension through an interactive and visually captivating audio spectrum rendered with Three.js. It combines creative coding, modern web development, and AI assistance to deliver an engaging user experience.

What I Built

Evolution by Sound leverages Three.js and React to create a dynamic audio visualization application. Users can upload an audio file, and the app analyzes the audio’s frequency data to drive a real-time, interactive visual experience. Customization options for colors, intensity, and animation speed further enhance the user’s connection to the music.

Inspiration

Abiogenesis: The origin of life from non-living matter.

Some studies suggest that acoustic forces may have played a role in prebiotic chemistry and the organization of materials that could have led to the first protocells. For example:

• Acoustic waves can create small droplets and concentrate molecules, potentially helping to form membrane-like structures.
• Sound waves can drive chemical reactions through cavitation (the formation and collapse of bubbles), which creates localized areas of high temperature and pressure.

This inspired the concept of Evolution by Sound, where the initially inactive, slow-moving patterns transform into an interactive audio spectrum visualization reminiscent of abiogenesis through sound. Once a user uploads a song, the visualizations evolve dynamically, symbolizing life emerging through the transformative power of sound.

Features

1. Interactive Audio Spectrum Visualization:

   • A real-time visual representation of the uploaded audio, using Three.js shaders.
   • Frequency data is analyzed and mapped to create an immersive visual experience.

2. User Customization:

   • RGB sliders allow users to adjust the color palette.
   • Intensity and speed controls provide further customization for the visualization.

3. Audio Upload and Playback:

   • Users can upload an audio file, which is processed via an API to provide playback and analysis.
   • A built-in audio player allows users to control playback seamlessly.

4. Clean and Responsive UI:

   • Components like Button and Slider make interactions intuitive.
   • The app is optimized for responsiveness and usability across devices.

Demo

Live app: Evolution by Sound

Screenshots/GIFs

Repo

GitHub Repository: https://github.com/greatsage-raphael/evolutionBySound

Copilot Experience

This was my first time using Three.js, and GitHub Copilot played a pivotal role in developing this project. From conceptualization to execution, Copilot assisted in:

1. Component Development:

   • Copilot generated much of the foundational functionality for both the Cell and InteractiveMusicWave components based on my prompts.
   • By providing clear context and intent, I could rely on Copilot’s autocomplete to implement Three.js logic, which would have otherwise required significant manual learning.

2. Iterative Improvements:

   • Copilot offered suggestions for optimizing shader logic and connecting audio analysis to the visuals.
   • Edits and adjustments to prompts allowed me to refine functionality without needing to switch contexts frequently.

3. Learning and Experimentation:

   • Copilot served as a guide while exploring Three.js, offering concise examples and snippets I could adapt for my use case.
   • I used the chat feature and model switcher to refine more complex interactions, such as connecting audio data to shader uniforms.

GitHub Models

I utilized GitHub Copilot’s autocomplete and context-aware coding suggestions throughout the development process. While this submission didn’t directly involve prototyping LLM capabilities, it’s evident that Copilot’s integration into the workflow streamlined my progress and enhanced productivity.

Conclusion

Working on Evolution by Sound has been an enriching experience that showcased the creative possibilities of combining AI, music, and visuals. GitHub Copilot significantly lowered the barrier to entry for using Three.js and enabled me to focus on creativity rather than being bogged down by the technical details.

This project highlights how AI tools can empower developers to explore new domains, even with limited prior knowledge. I look forward to expanding this app further, perhaps by adding support for live audio streams or multiplayer audio-visual experiences.

This project was developed independently.*