-
-
Initial Website Design in Figma
Inspiration
While everyone has their own unique listening preferences, all of us share the same love for music. That’s why our group chose to combine two different things that most people love and appreciate: music and photography.
What it does
PlayPic takes the user’s Spotify data and an image (.jpeg, .png, .gif) inputted by the user to generate a twenty-song playlist featuring songs that are based on their top artists and relevant to the overall “mood” of the image. It effectively allows the user to “play” the picture that they submit.
How we built it
To design our project, we started by drafting out our website in Figma so that we could then use HTML, CSS, and React to flesh out an actual website. For the backend, we used node.js to implement the Spotify API. The algorithm we designed to analyze images and relate colors to song moods was written in JavaScript.
Challenges we ran into
One of the biggest challenges we faced was translating the ideas we had on Figma to HTML and CSS. Though Figma provides plugins and built in functions to translate visual elements to CSS, we found that many elements did not translate to code perfectly. We ran into a lot of scaling issues, so it took some significant tweaking before we were satisfied with our design. Another component that presented some issues for us was the development of an algorithm to gauge the mood of an image based on its colors. Understanding the Spotify API also proved to be time consuming.
Accomplishments that we're proud of
As first year students, we are especially proud of not only being able to finish our project on time, but also being able to implement third party libraries with node.js. We are also proud of the design of our website as well as the integration between the algorithm to find out the “mood” of the image and Spotify’s API.
What we learned
We learned how to effectively implement Spotify’s API and how to use JavaScript to find the dominating color(s) of a picture. We also honed our existing HTML and CSS skills along with our graphic design skills.
What's next for PlayPic
Early on in the project development, we entertained the idea of identifying the objects present in images to base our playlist generation off of. We ended up scrapping this idea and instead elected to analyze the colors in images, but in the future, we could implement object recognition to add more functionality to PlayPic. Finding more ways to process images will allow us to generate playlists that are even more relevant to images users submit.
Log in or sign up for Devpost to join the conversation.