r/PsychedelicRock covers

Generating covers for an auto-updating playlist

A p5.js sketch that generates a cover for a Spotify playlist. The playlist is continuously updated by playlist service Listige (no affiliation), based on the top 25 weekly posts of the r/Psy­chedelic­Rock subreddit.

Cover examples

One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch
One example of the output of the p5.js sketch

I had wanted to fiddle around with the Spotify Web API for a while and so I decided to try to create a cover that would change automatically based on the songs in the playlist.

Screenshot preview

Showing how a generated cover would look like within Spotify playlist and UI

Each of the 25 songs in the playlist is represented by an arrow (the "upvote" symbol ⬆).

One characteristic that distinguishes this playlist is that it frequently includes songs from many different decades, starting with the genre's inception in the 1960s. Because of this, the base colour of each arrow is defined by the year the song was released.

Additional parameters:

Higher danceability → more glow

A song's instrumentalness has an effect on the gradient on the arrow.

The energy of the first and last song have an impact on the shape of the spiral in "auto" mode.

Site hosting the sketch

"Manual" mode

Darkmode off/on

The interface in 'lightmode'.
The interface in 'darkmode'.
The tracklist in 'lightmode'.
The tracklist in 'darkmode'.

Check out the live sketch below, or in a new tab...