Warm-up shaders · patterns

Checkerboard

Two floors and a remainder make the oldest pattern on any table.

Write checkerboard(x, y, size). It is called once for every pixel of a size by size canvas, with x running right and y running down from 0 at the top left. Return a brightness: 1 for white, 0 for black.

Split the canvas into an 8 by 8 board, so each square is size / 8 pixels wide. A pixel's column is Math.floor(x / (size / 8)) and its row is Math.floor(y / (size / 8)). Return 1 when column + row is even and 0 when it is odd.

Example: the top left pixel sits in column 0, row 0, so checkerboard(0, 0, 64) returns 1. One square to the right, checkerboard(8, 0, 64) returns 0.

Tests you can see

checkerboard(0, 0, 64)1
checkerboard(8, 0, 64)0
checkerboard(9, 9, 64)1

More tests are hidden. The server runs them all before a time counts.

Run your code and this canvas paints itself.

javascriptcheckerboard()

function checkerboard(x, y, size) {
  const cell = size / 8;
  // which column and row is this pixel in?
  return 0;
}

function checkerboard(x, y, size) {
  const cell = size / 8;
  // which column and row is this pixel in?
  return 0;
}

Tab indents · Cmd/Ctrl+Enter runs