@thi.ng/webgl/textures/checkerboard.js

WebGL & GLSL abstraction layer

import { canvasPixels } from "@thi.ng/pixel/canvas";
import { ARGB8888 } from "@thi.ng/pixel/format/argb8888";
const checkerboard = (opts) => {
  opts = {
    size: 16,
    col1: 4294967295,
    col2: 4278190080,
    cornerCols: [4294901760, 4278255360, 4278190335, 4294967040],
    ...opts
  };
  const size = opts.size;
  const col1 = ARGB8888.toABGR(opts.col1);
  const col2 = ARGB8888.toABGR(opts.col2);
  const { canvas, ctx, img, data } = canvasPixels(size);
  for (let y = 0, i = 0; y < size; y++) {
    for (let x = 0; x < size; x++, i++) {
      data[i] = y & 1 ^ x & 1 ? col1 : col2;
    }
  }
  if (opts.corners) {
    const corners = opts.cornerCols.map(ARGB8888.toABGR);
    data[0] = corners[0];
    data[size - 1] = corners[1];
    data[data.length - size] = corners[2];
    data[data.length - 1] = corners[3];
  }
  ctx.putImageData(img, 0, 0);
  return canvas;
};
export {
  checkerboard
};