When Color Learns to Breathe — A Shader That Swaps Mood Over Time

Lesson: 8

There’s something strangely alive about this kind of shader. Nothing moves, nothing is drawn in the traditional sense, yet the screen never stays the same. It quietly shifts between two colors, like a thought changing its mind.

Let’s break into the code.

At the top, we set up the usual GLSL environment:

#ifdef GL_ES 
precision mediump float; 
#endif 

This just tells the GPU how precise we want our floating-point calculations to be. Think of it as choosing how sharp your memory is.

Then we get the inputs:

uniform vec2 u_resolution; 
uniform float u_time; 

u_resolution is the screen size, though we’re not using it here.
u_time is the interesting one — it keeps ticking forward, like a clock the shader can feel.

Now the colors:

vec3 colorA = vec3(0.149,0.141,0.912); 
vec3 colorB = vec3(1.000,0.833,0.224); 

Two completely different moods.

• colorA leans deep and cold — almost electric blue.
• colorB is warm, golden, almost like late afternoon light.

Nothing fancy yet. Just two endpoints of a spectrum.

The real motion begins here:

float pct = abs(sin(u_time)); 

This line is doing all the emotional work.

sin(u_time) naturally oscillates between -1 and 1.
Taking abs() folds that into a smooth 0 to 1 range.

So instead of jumping or resetting, the value gently rises and falls forever. Like breathing.

Now the actual blending:

color = mix(colorA, colorB, pct); 

mix() is deceptively simple. It doesn’t choose one color or the other — it interpolates between them.

• When pct = 0, you get colorA
• When pct = 1, you get colorB
• Everything in between is a blend, a gradient of emotion

Finally:

gl_FragColor = vec4(color,1.0); 

We output the final pixel with full opacity.

---

What makes this interesting isn’t the code itself, it’s the illusion it creates.

Two static colors become a living transition. No textures, no geometry, no noise. Just time, a sine wave, and a mix function doing quiet work in the background.

It feels less like programming and more like setting rules for a small weather system inside your screen.

And once you start thinking in those terms, shaders stop being code… and start feeling like environments.

The Image is taken from the book of shaders, there you can tangle with the code as well, for previous explanations check out previous lessons:

Posted Using INLEO