{"id":349,"date":"2025-12-16T14:36:15","date_gmt":"2025-12-16T21:36:15","guid":{"rendered":"http:\/\/blog.northfield.ws\/wordpress\/?p=349"},"modified":"2025-12-21T17:26:10","modified_gmt":"2025-12-22T00:26:10","slug":"wayfire-carpet-burn","status":"publish","type":"post","link":"http:\/\/blog.northfield.ws\/wordpress\/wayfire-carpet-burn\/","title":{"rendered":"Wayfire Carpet Burn"},"content":{"rendered":"

I figured Wayfire couldn’t have enough animations, so I wrote two more: Magic Carpet and Burn. The first interesting animation in Wayfire was affectionately named ‘fire’. It is resource intensive and isn’t very realistic looking, but it does resemble the original compiz fire effect quite well. However I wanted something a bit better, and wanted to try my hand at writing a GLSL shader that could fit the bill. After reading some about how to create flame effects with a random noise generating algorithm, I stumbled onto a shadertoy that looked like it might suit the occasion. Here<\/a> is the original shadertoy from which ‘burn’ was adapted. It has 5 flames with varying degrees of detail. At first I installed the code and got it rendering something, but it wasn’t that great. Eventually I whipped it into shape, and now it burns windows nicely, as can be seen in the video below. It burns a little beyond the sides of windows, has configurable flame speed, width, height and smoothness and, after a suggestion in IRC from a user that saw it, configurable flame color. Go WayFIRE!<\/p>\n

Since this was apparently not enough, Andrew Pliatsikas, a colleague and fellow Wayfire hacker, had been actively working on a roll-up style animation and called it the magic carpet effect. He offered me the code to improve upon, and while it did work, I decided not to use it because it used a mesh with many vertices, and I wanted to use a fragment shader with four vertices rather than a mesh, so there would be a finer granularity and more performance. So, with the idea in mind, I begin hacking together a mind bending, magic carpet rolling GLSL shader using trigonometric mathematics that faked everything from perspective projection to lighting. It uses a progress uniform as input for the animation which means the same animation happens predictably when opening or closing a window and, there are various easings that can be applied using Wayfire’s animation configuration infrastructure. There were some problem cases I ran into such as clamp-to-edge repeating edge pixels that are not fully transparent when sampling the texture using coordinates outside of the 0.0 – 1.0 floating point range, and lining up the front part of the roll with the back part, but I managed to wrangle these into submission just so, and now the effect is largely seamless and complete. After I got it rolling from left to right, I decided to make it configurable so that it can roll any cardinal direction. Additionally, Andrew has worked to make the roll effect into a scroll effect, unrolling the window from the center as a real scroll, using two rolls. The last video in this post shows the results. Check out the videos below to see the animations in action!<\/p>\n