This project was inspired by the Octave Group challenge, the Shutterstock challenge, and the DRW challenge. We were inspired to create a musical experience that could be brought into everyday life, even just hanging out and sharing with friends. We wanted to use data visualization to do this. This product helps to showcase album art through Stitchy's trendy lo-fi lens. We wanted to create something that combined art forms, and how better to do that than by linking art and music through Shutterstock, a worldwide leader in high-quality licensed multimedia.
What it does
Stitchy creates a fun and engaging new way to experience any song. Simply search for a song and Stitchy creates a lo-fi mosaic of its album cover made up of stock images from shutterstock, with the ability to zoom in on an image for a larger, higher resolution view. For people who appreciate visual stimulation to enhance their listening experience, Stitchy will not disappoint.
How I built it
We built Stitchy using React on the front end and Node.js on the back end. When a user selects a song (music catalogue provided by the TouchTunes API) the corresponding album art is sent to our back end. The system then extracts the dominant colours from the album art and searches for related stock images (using the Shutterstock API).
Challenges I ran into
Extracting the colours and getting the API to find images that matched the colours (Shutterstock only has 15 colours so it took some manipulation to get it to look the way we wanted to). We struggled to find any databases with pre-existing LRC files for songs (which would provide us with timestamped lyric data to allow lyric timed images and transitions), which caused us to shift our focus while maintaining the original value proposition that is important for the target audience.
Accomplishments that I'm proud of
We are proud of how many different design elements we were able to pull in and modify. It was one of our members' first hackathons. We worked quickly and efficiently in a short time frame since we did not come up with an idea until midnight.
What I learned
One of our members learned how to do mockups for the first time, and learned a bit about what was happening in the code. We learned how to use hooks in React.
What's next for Stitchy
Stitchy will grow to become the world leader in innovative music visualization technology. By creating innovative experiences bridging the gap between audio and visual perception.