Lesson 4 of 10 · Shader patterns
Checkerboard
Diamonds on the board. The Overlook floor.
How do you alternate two colors in a grid? Add the row and the column. If the sum is even, one color. If it is odd, the other. That is it.
mod(x, 2.), one question, two answers. The oldest pattern.
floor() rounds down, it turns coordinates into whole numbers. Those numbers are the row and column of each cell. mod() tells you if the sum is even or odd.
mod(x, 2.)Returns the remainder of dividing by 2. If the number is even, it returns 0. If odd, it returns 1. One question, two answers, a whole checkerboard.
Change
4. to 8., finer checkerboard. Change one of the colors to make it yours. Try adding + T * 0.5 to p.x before the floor, the board slides.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
float check = mod(floor(p.x*4.)+floor(p.y*4.), 2.);
vec2 cell = fract(p * 4.);
vec2 q = abs(cell - 0.5);
float diamond = q.x + q.y;
float inner = smoothstep(0.35, 0.32, diamond) * check;
float innerGlow = exp(-max(diamond-.25,0.)*8.) * check * .3;
float groove = smoothstep(0.44,0.5, max(q.x, q.y));
vec2 qs = abs(cell - 0.5 + vec2(.03,-.04));
float dsh = smoothstep(0.35,.1, qs.x+qs.y) * (1.-inner) * check * .35;
vec3 a = vec3(0.9, 0.2, 0.12);
vec3 b = vec3(0.06, 0.04, 0.12);
vec3 gold = vec3(0.95, 0.75, 0.2);
vec3 col = mix(a, b, check);
col *= 1. - groove * .6;
col -= vec3(dsh);
col += gold * inner;
col += vec3(.5,.35,.1) * innerGlow;
gl_FragColor = vec4(col, 1.);
}