Dyeify

Melodic canvas: user inputs a colour palette and receives a Spotify playlist based on the energy, moods, and atmosphere based on those colours.

Comment

Inspiration

Our developers—amongst us, an English nerd and avid music listeners—are curious about the connection between music and colour. The two art forms are vastly different, yet intricately connected. We wanted to use technology to observe and render the relationship between certain shades of colour and the music associated with them. Also, we're all Spotify users. In addition, websites such as link and link that use Spotify APIs are increasingly popular, and we wanted to attempt our hand at exploring them.

What it does

A user, upon arriving at the home page, can choose to either select a colour palette (left) or search by genre (right.) After selecting a colour palette, an algorithm associates colours with music genres provided by Spotify and returns a playlist with songs that may be associated with the inputted colours.

How we built it

We used the Node.js library to integrate the Spotify for Developers API into our Javascript back-end, accompanied by HTML and CSS front-end. Our HTML front-end uses fundamental features (i.e. buttons) to store and provide data to the Javascript program that generates a playlist.

When a user chooses a colour palette from the built-in HTML colour picker, it is sent to our backend algorithm. The RGB format is then converted into an HSL format, where colours are categorized into twelve hues, three levels of saturation (33%, 66%, 99%), and three levels of lightness (33%, 66%, 99%). These colours are associated with genres from a pre-made database, which then search artists most associated with these genres. Songs from these artists are made into a playlist and returned.

Challenges we ran into

  1. Initially, looking through several documentations to integrate the Spotify API, it was challenging to understand and implement their libraries. We had to search for a while to find a library that we could understand rapidly.
  2. Common JS functions are incompatible with the Node.js Spotify API authorization token.
  3. CSS uses bizarre formatting tools, and navigating through them was confusing. (Margins...)
  4. Sleep. We all wanted to sleep.
  5. Time was running low near the end of our project, and we were not able to implement many features we looked forward to. In addition, we ran into many mini problems in the backend that sent us in a teeny bit of a downward spiral.

Accomplishments that we're proud of

  1. Our team collectively connected and integrated an API for the first time—and furthermore, a challenging database—and overcame various unexpected barriers with the intention to see our project through.
  2. Our CSS development was designed and developed by someone with no prior experience in CSS or HTML. Throughout the twenty-four hours, the front-end developer learned comprehensive front-end development fundamentals and incorporated a vision to create a dynamic interface.
  3. Our backend developers had little-to-no experience with Javascript. We were foolishly daring enough to tackle a challenge we've never seen before in an extremely compact amount of time, ensuring that we evolve as programmers and as individuals.
  4. We were able to execute an idea that we were all passionate about and enjoyed.

What we learned

  1. Being overly ambitious is not inherently problematic, but tunnel visioning ourselves in a limited event can prevent us from putting our best work into the project.
  2. That being said, we learned to work under unforeseen challenges and with frameworks we were not used to witnessing.
  3. Some of our developers learned APIs, while others learned entire new programming languages. We all collectively gained a deeper understanding of our skills and the ways we can flourish them.
  4. Some of us were not initially close with each other. Even in the mere twenty four hours, we developed stronger bonds and collaborative coherence.

What's next for Dyeify

  1. Implement an image feature: Spotify can pull from colour palettes. We'd like to extend this feature to images through the use of an API we discovered but didn't find the time to use. An API known as Colour Thief can extract major colours from an image to use as a colour palette. We'd like to implement image uploading and colour extracting.
  2. Add manual filtering: with respect to the preference of our users, some don't like Norweigan Jazz. Allowing users to filter out (or in) major and subgenres they dislike (or like) allows for further personalization in the returned playlists. This feature would allow the user to avoid certain genres or artists while still maintaining the element of colourful surprises.
  3. Save and re-generate feature: users can save their favourite colour palettes to their Spotify account and re-generate a similar (or completely different, depending on the manual filtering) playlist later.
  4. Mouse with a trail behind it: Hailey thinks it's cool.
Share this project:

Updates