Many years ago I was really into writing fragment shaders on Shadertoy. It’s a really fun art form. The idea is that you render just two triangles that cover the entire viewport and let the fragment shader do all the work. In this setup, the fragment shader becomes a program that takes a pixel coordinate as input and computes a single color for that single pixel. Through the magic of GPUs, this program is able to run millions of times per second, producing an animation.

This is one of those that I made. It is one of my favorites. I like how it acheives a very pleasing effect with very little code. Some of the color transitions are really sweet, I particularly like when it goes between red and green and the shades of minty blue that appear shortly thereafter. You also see some patches with dark complementary colors. I don’t know what causes that, but I expect it has to do with the pattern producing values outside of [0,1] range. Happy accidents!

It reuses an idea from one of my first ever submissions to Shadertoy, where I add a time offset to the animation time based on the pixel’s position. In this case, I reuse the fbm noise generator calculate this offset. The result is that you have these areas where the color spectrum has advanced further than in other places. Thanks to the fact that the base animation in itself advances time unevenly by adding a sine function to the time, you end up with areas with rapid movements and other areas where things stay still, with rippling waves moving between them. Hard to explain.

I want to gather more of my creative stuff on this page, so I went through some effort to write the code needed to host these kinds of fragment shaders also on this blog. Expect to see more of these in the coming weeks!

The code below is a modified version of the original shader on shadertoy. I’ll have you know, it got Featured Shader status on the Shadertoy front page back then!