Spotify Playlist Cover Generator

Summary

A state-of-the-art playlist cover generator for Spotify playlists

Takes a Spotify playlist ID as input, compiles album covers of all the tracks in the playlist, removes the background of all covers, puts edited album covers into a collage under an algorithm to prevent too much overlap.

Check this out:

Usage

1. Clone this repository git clone https://github.com/jngnb/collage-generator.git
2. Obtain Spotify clientID and clientSecret via Spotify for Developers and input into const clientID = '[here]'; const clientSecret = '[here]';
3. Obtain removeBG api key and input into const apiKey = "[here]";
4. Open in localhost brower and run!

Intent

The Spotify app automatically creates a 4-frame playlist cover from the first 4 tracks of a playlist. I wanted to write a program that creates a playlist cover that gives a better sense of the playlist content and looks good

Algorithm

1. Initial Scaling

• Divide canvas surface area with user inputted number of album covers numImages to include in the final output to find average surface area available per edited album cover
• Randomly compute a scale factor ranging from 0.8 to 1.8

2. Finding starting point

• Randomly compute x and y offset, offsetting the range by 25% of canvas to prevent images completely cutting off
  • Bigger images continue often cut off too much so added function preventEdgeCutOff() that recomputes x and y offsets until at least 50% of width and height are included on canvas
  
• Compute 4 edge positions of each image with computeSizes() with computed offsets and scale factor

3. Checking for overlap

• Given the 4 endpoints computed,
  • Iterate through array of edge positions of already-appended images appendedImgs and for each already-appended. perform checks with computed image
    1. If left edge of image is overlapping with over 50% of the right edge of the already-appended image
    2. If right edge of image is overlapping with over 50% of the left edge of the already-appended image
    3. If bottom edge of image is overlapping with over 50% of the top edge of the already-appended image
    4. If top edge of image is overlapping with over 50% of the bottom edge of the already-appended image If any checks return true before the iteration reaches the final already-appended image in the array, there is too much overlap
  • Run through 20 - numImages offsets before downsizing the image by 75%

4. Appending/Resizing

• If there is too much overlap, try 20 - size(appendedImgs) offsets (more images appended canvas, less room, hence less offsets tried)
• If any offset succeeds, append the image to canvas and add edge information to appendedImgs
• If no offset succeeds, downsize image by 75% and repeat process until checks succeed

Testing Results/Sample Collages

9 album covers included

Same set of album covers used

Technologies Used

APIs

Spotify API removeBG API

Languages

JavaScript, HTML, CSS