Soundbrush

Connect color to a sound

Comment

Inspiration

We created Soundbrush to be an art app for people with visual impairments. Based on a previous project made in p5.js where each keyboard key was mapped to a note and a color. After considering the potential to be a useful tool, we decided to expand on that idea. It's useful for those with visual impairments as it allows you to identify the color being drawn with sound.

What it does

An art app which links each color to a note to be played when drawing. There are 8 different synth notes that play depending on what color hue is selected. Users are able to change the color of their brush using sliders for lightness and saturation and a color wheel for hue. In addition to sound, the color name is also displayed depending on hue. We implemented undo and redo functions and a simple saving system that allows you to save sketches and load them from a dropdown menu.

How we built it

We started by using Figma to plan out our web design. Then we built the app using NextJs framework with p5 library to handle the drawing. We used p5.js to create the canvas and tone.js to import synths.

Challenges we ran into

Finding a good way to save drawing states and implementing the p5 libraries in the NextJs framework.

Accomplishments that we're proud of

The drawing is fluid and fully functional and provides a stable user experience. We were able to implement most of the features from the Figma design and for the most part they all work as originally intended.

What we learned

We learned a lot about NextJs, p5.js, and tone.js.

What's next for Sound art app

There are many features that can be added in the future, such as more tools and more ways for the sound to be changed dynamically.

Built With

Share this project:

Updates