Server Change & Background Animation

of Sep 2025, 21:41

After a long time of putting this off, I finally managed to migrate my server to a new provider. The old one was getting just too expensive and every month I didn't do something about it, I was throwing money out the window. As expected, unfortunately, once I pulled the plug, canceled and contracted a new provider, things did not go so smoothly. Being busy with work, life and what not, I managed to squash those issues only very slowly, which also resulted in my website being down for a few months! My final issue was Apache: for some reason I had some type of worker issue, where the server would stop receiving connections after about a day of uptime. At first it seemed like a DDoS attack, but then, it also seemed very unlikely that I would be targeted. After some analysis I determined that I must have done something wrong during install and configuration of my server, so I pulled the plug once more, reinstalled and started anew using Nginx this time... and, so far, it seems to be running smoothly.

Having my website back up and running inspired me to do some work on it again. I determined that I finally wanted to tackle the background animation that has been part of this design since the start. (If you're visiting this website with your mobile device you might not understand what this is about, since the background animation only exists in the desktop version!) Originally, I had modified a snowflake animation to generate veil-like graphics. I would generate the veils very slowly, as to be barely noticeable and fade them out just as slow, with the intention not to distract the reader. Only when looking up from the text should you notice that the background must have changed in the mean time.

However, this snowflake origin always seemed a bit arbitrary and the ribbons would generate exclusively top-to-bottom, i.e. flowing down, which was a bit predictable and boring. I had tried Processing before for animations and thought I could have a look at their p5 library for javascript. With this tool in hand, I created a new veil animation. It is similar to the old one, where the animation would be slow and ideally not distracting. However, the fade out does not work as smoothly with p5 for some reason, requiring me to use larger values for the alpha channel and sleeping things up in the animation. In its current form, the animation strikes a balance between being smooth and slow enough.

This time I thought I wanted to tie it in with my work in audio. So, instead of snowflakes falling from the sky, the veil animation is now based on traces of wavelets strung across the width of the website in its background:

The image above was done tracing the positions of the handles in each frame. However, the final animation renders the lines between each handle to achieve the veil effect.

Hopefully the animation is enjoyable and not annoying like many other features other websites have used, e.g. background music or sound effects! (cue a low trombone!) Also, I hope to use more animations in the future and build a library in the background of my website. But for now, this shall suffice.