Synesthesify

Transform Spotify playlists into abstract art.

Comment 2

Inspiration 💎

  • It is 2021, and music has become soulless. People used to smell the vinyl, feel the beating of the drum, and see their cassette tapes twirl. Today, music has been nullified from a multisensory joyride to a vapid digital streaming experience comprised only of 1's and 0's.
  • Synesthesify aims to rejuvenate the spirit of music by turning it back into the multi-dimensional experience it was always destined to be.

What it does ️‍🔥

  • Synesthesify uses algorithms to process music from Spotify based on multiple factors like its danceability, acousticness, and tempo. It uses this musical analysis to create a piece of emotional abstract art that acts as a reminder of the sights that should accompany music. More practically, it creates an artwork that is fit to be a playlist cover.
  • The algorithm first fetches an authentication token in the Client Credentials Auth Flow, then uses Spotify's API to parse a playlist link. It sends GET requests to obtain the IDs of the first 100 songs in that playlist. The song IDs, stored in an array, are then iterated to get the musical features of each song. The musical features are mapped onto a spectrum of corresponding colours and shapes based on the emotional connotations different images have. These colours and shapes are finally put on a JavaScript canvas to create an art piece downloadable by the user. The user can also use sliders to adjust the algorithm's settings and vary the art that is created. All of this is packed into a beautiful and simple web app that all users can understand and appreciate.

How we built it 🛠️

  • Synesthesify was constructed with Javascript, with use of the Spotify API, and HTML/CSS.
  • The source code can be found on our Github Page, which we also use to host the web app.
  • The artwork is painted on JavaScript's canvas, where it can then be copied or downloaded as a .jpg uploadable to Spotify playlists.

Challenges we ran into 💥

  • Learning API on the fly and sending API requests without knowing the standard code to do so (e.g. headers, body, params).
  • Relearning Javascript and making countless silly mistakes by writing it like Python or Java (e.g. forgot brackets around function declaration).
  • Entering integration hell because we had very very little prior experience with GitHub, especially functionalities like pull requests.
  • Hours upon hours of debugging and using IDEs in processes of trial-and-error.

Accomplishments that we're proud of 🏆

  • We all learned and implemented multiple APIs into our code successfully, despite it being the first time any of us have ever seen APIs ever.
    • Getting refresh tokens from Spotify server-side was a special challenge (no client interaction needed).
  • Two of us literally learned JS during the hackathon.
  • Learning to use Github for the first time, and figuring out how to not override other hacker's progress.
  • Learning how to use VSCode and test code locally to save mountains of time and countless headaches.
  • Coding more complex elements of HTML/CSS (exiting our front-end comfort zone).

What we learned 💡

  • This was the first Hackathon anyone on our team has ever done, so our rate of learning was incredible! 🚀
  • It was also our first time ever using an API of any sort, so we learned incredible amounts of information about how to send requests to APIs and get authentication from them.
  • When creating abstract paintings, we learned about colour theory and how shapes had meaning to people.
  • Finally, we learned to set deadlines, take frequent breaks, and assign work for maximize productivity via system flow. 🌊

What's next for Synesthesify 💭

  • Accessibility features.
  • Spotify authorization (not just client credentials).
  • Using Google Images API to insert images based on frequent song lyrics.
  • More complex abstract art generation using different digital art APIs.
  • Attempting different types of art, such as from the classical era.
Share this project:

Updates