01 Fragments and data

Screen coordinates and resolution

Pixel position ÷ resolution = a 0–1 screen coordinate.

Pixel position…, …

Pixels per cell24

1100

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 pixel = floor(gl_FragCoord.xy / 24.000) * 24.000;
  vec2 screenUv = pixel / uResolution;
  vec3 color = vec3(screenUv, 0.3);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 pixel = floor(gl_FragCoord.xy / 24.000) * 24.000;
  vec2 screenUv = pixel / uResolution;
  vec3 color = vec3(screenUv, 0.3);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

gl_FragCoord is the pixel position; divide by uResolution to get a 0–1 screen coordinate.

Try it

Set pixels per cell to 1: every pixel differs
Move the pointer and compare the pixel position with the 0–1 coordinate