RGB Symphony | Devpost

Inspiration

In a recent visit to MASS MoCA (Massachusetts Museum of Contemporary Art), one of our teammates experienced an exhibit created entirely from a virtual reality environment. With this in mind, we were looking for other ways to use technology in the arts to produce new, interesting experiences. We decided to combine audio with visual, and given some team members’ background and interest in music, we created RGB Symphony.

What it does

RGB Symphony is an image-based song generator that composes a song based on an image’s color values. The three color layers - red, green, and blue - each represent a different element of a music note. Red is pitch, green is octave, and blue is note duration. By calculating the color values of each pixel in the image, it can create variances in each musical element by associating a specific color value to a specific pitch, octave, or note duration. Then a song is created by playing the note each pixel represents.

How we built it

We wanted to create a web app that would accomplish this, so we found a library called Tone.js, which provided us with a variety of data points for us to utilize to create sound. We implemented the instrument synths provided with the library, and took the RGBA values from an image and mapped them to parameters of the instruments which controlled the pitch, octave, note length, and space length. We then used HTML and JavaScript as well to allow for input of any image URL from the web. Thus, anyone can access the website, insert an image of their choice, and listen to an audio representation of their image.

Challenges we ran into

When our first project idea didn’t work out due to difficulties with an API, we had to rehaul our project and start from scratch. We spent a lot of time attempting to debug an issue that we eventually discovered was due to updates being made by the API developer. By the time we began RGB Symphony, we had a significant time setback.

Accomplishments that we're proud of

Our goals for HackDarmouth were to learn something new and create a project that was fun and reasonable, and we believe we’ve accomplished that. We learned a lot about web development and how to program in HTML/CSS/JavaScript. For some of us, this was the first website we deployed. Though we did have difficulties using an API at first, we were able to problem-solve and produce something close to what we initially envisioned as an audiovisual experience.

What's next for RBG Symphony

The next big step for RBG Symphony is to add more functionality! Currently, RBG Symphony only accepts urls, but we hope in the future that RBG Symphony will be capable of accessing local files and creating music with the pictures saved on the computer. We also plan to add more features! We want to create a feature were a single picture can create more than one song with choice of music genre. We also want to add more sound options, allowing the user to choose from a list of instruments and modulation of syths to create new sounds.