Shaders are a magical piece of code that can turn a boring image into a trippy visualization. They include shapes, colors, patterns, animations, and more.

What I want to do is sign my name using a shader. After all, what’s in a name? Nothing but some lines and curves—surely, a shader can handle that.

There is plenty of documentation, tutorials, web playgrounds, and videos explaining shaders, so I’m not going to start with that. Instead, I’ll dive in head-on and see how far I can go.

The goal, in plain English, is to generate a visualization using shaders that writes my name vertically, one letter at a time, on a 16:10 portrait canvas—like a highlighted pen. Then, I want my name to persist on the canvas while adding a pulsating glow and a gradient background. something like this…

This could very well be an AI prompt, and I could call it a day—but where’s the fun in that? So, I’ll try to break it down and build my vision from the ground up.

The first task is to create a gradient background. Pretty basic stuff in shader land. Just the following two lines can do the job

# TIME is seconds since program started
# this line gives me a value for b (between 0 to 1) in the color RGB
float b = sin(TIME);
# UV is the normalized pixel co-ordinate (x,y)
# where x and y, ranging 0 to 1, gives th RG value of the color
COLOR = vec4(UV, b, 1);
# The code goes in the fragment function and executed for each pixel
# in the canvas in parallel

I use an application I built in godot to help me experiment and iterate easily, here is the GitHub link and demo

• TBD: GitHub link
• TBD: Youtube link with application demo

…and the result looks like this

Next UP:

• SDF
• Texture based drawing
• Drawing a curve