Lesson 8 of 10 · GLSL for beginners

The wave

sin() of position. Patterns from one function.

Two lessons ago you applied sin() to time and the brightness went up and down. Now you apply sin() to the position, and stripes appear.

One wave. Infinite. The foundation of everything that comes next.

Why? Because sin(p.x * 10) oscillates between -1 and 1 as p.x changes. So from left to right, the value goes up, down, up, down... and those are stripes.

The number 8It is the frequency. Higher means more stripes. Lower means fewer stripes. Try it: change 8. to 50. (tons of thin stripes) or to 3. (a few thick ones).

We add + T * 1.2 at the end so the stripes move. Without that part they are static stripes. With it they flow. The 1.2 is the speed.

TryChange p.x to p.y and stripes go horizontal. Change + T * 1.2 to - T * 1.2 and stripes flow the other way. Change 1.2 to 5. and they fly; to 0.2 and they barely crawl.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = sin(p.x * 8. + T * 1.2) * .5 + .5;
  vec3 a = vec3(0.08, 0.02, 0.12);
  vec3 b = vec3(0.95, 0.35, 0.55);
  vec3 col = mix(a, b, v * v);
  col *= 0.85 + 0.15 * v;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}