Warm-up geometry · shaders

Rings

One line of maths, and the canvas fills with ripples.

Write rings(x, y, size). It is called once for every pixel of a size by size canvas and returns a brightness from 0 (black) to 1 (white).

Make concentric rings around the centre: find the distance d from (x, y) to (size / 2, size / 2), then return 1 when Math.floor(d / 8) is even and 0 when it is odd.

Example: at the exact centre d is 0, so rings(32, 32, 64) returns 1.

Tests you can see

rings(32, 32, 64)1
rings(42, 32, 64)0

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

Run your code and this canvas paints itself.

javascriptrings()

function rings(x, y, size) {
  const cx = size / 2;
  const cy = size / 2;
  // distance from the centre, then even or odd band
  return 0;
}

function rings(x, y, size) {
  const cx = size / 2;
  const cy = size / 2;
  // distance from the centre, then even or odd band
  return 0;
}

Tab indents · Cmd/Ctrl+Enter runs