Lesson 2 of 10 · Shader patterns

Stripes

One wave. Two colors. Infinite pattern.

In lesson 01 every shape lived in a distance. Now you will use a wave to repeat something infinite times.

sin(p.x * 6.) oscillates, climbs from -1 to 1, drops, climbs again, forever. Multiply by .5 and add .5 and the range sits between 0 and 1. That number feeds mix(), which blends two colors: at 0 you see the first, at 1 you see the second, in between they fade.

One sine. Two colors. The pattern repeats itself.

FrequencyThe number multiplying p.x (the 6.) decides how many stripes fit on screen. Higher = more stripes, thinner. Lower = fewer, wider. Like turning the dial on a tuner.

TryChange p.x to p.y and the stripes go horizontal. 6. to 20. for thin stripes, to 2. for wide ones. Add p.y inside the sin and diagonals appear. Drop + (M.x * 2. - 1.) * 6. inside the sine and the mouse drags the pattern.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float wave = .5 + .5 * sin(p.x * 6. + p.y * 0.);
  vec3 cobalt = vec3(.08, .12, .42);
  vec3 llama  = vec3(.98, .55, .12);
  vec3 col = mix(cobalt, llama, wave);
  gl_FragColor = vec4(col, 1.);
}