Adding Animated Wallpapers to my Personal Website / Desktop Environment

For several years now I've been building my desktop environment in the browser and have been using the Vanta.js animated wallpaper called Waves. Last month I added my 2nd animated wallpaper called Hexells.

Then last week I was checking out the website Shadertoy when I came across Coastal Landscape. I thought it looked quite nice and it reminded me of a Windows XP wallpaper mixed with Van Gogh. After some hacking around with their embedded player I was able to get it to run in an Web Worker using an OffscreenCanvas which is also what I did for my other animated wallpapers. This keeps their animation work off of the Main thread.

Also last week while inspired by animated wallpapers I decided I wanted to revisit some features I wanted to add to my Winamp player, powered by Webamp. Specially I wanted to add streaming support and then get Milkdrop working which is powered by Butterchurn. It is easy enough to add Butterchurn as there are already instructions on their repository on how to do that. But what I wanted was an even lazier version of this code that would only load Butterchurn and it's presets if Milkdrop was open and the music playing. To do this I needed to add some custom handlers/logic which Webamp mostly supported.

Once I got that working I wanted to add the ability for the "Desktop Mode" feature to work which would allow the music visualizer to become an animated wallpaper. To do this I just had to move the DOM element into my <main> container so that it would properly sit behind the icons/taskbar but above the default animated wallpaper.

Then to add streaming support it turned out all that was really missing was the ability to pass those URL's to Webamp. To do this I added handlers for Load Playlist and Load URL which would take a URL such as a direct stream or a playlist file (MSU/PLS/ASX) and load that into Webamp to be played. To do this I used javascript-playlist-parser which did exactly what I wanted and supported 3 playlist file types.

Once I had this working then it is just a matter of finding a URL that can work over CORS which means you can go to https://dustinbrett.com and load a URL that is not from that domain. This ended up being easier than I expected because in my search for classic streams I recalled as a kid that ran on Shoutcast servers, I found SomaFM which was exactly what I was looking for. It has the station Groove Salad which is exactly the one I listened to as a kid. Although the one I remember as a kid is now called Groove Salad Classic. SomaFM supports M3U, PLS & ASX playlist files and works over CORS.

Finally I made a video recently showing these features. Feel free to check it out and throw me a like/subscribe if you enjoyed the video/article. Thanks!