canvas

Shimmer Dot

A grid of pixels whose opacity is randomised every frame, paired with a radial vignette to create a glowing centre effect. As seen on monologue.to.

Controls

/* Shimmer Dot — Canvas 2D */
function rndAlpha(contrast) {
  let e = Math.random();
  if (contrast > 0)      e = e ** (1 + contrast / 5);
  else if (contrast < 0) e = 1 - (1 - e) ** (1 - contrast / 5);
  return e;
}

function draw(canvas, { size, gap, fps, contrast, color }) {
  const ctx = canvas.getContext("2d");
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const [r, g, b] = color;
  const step = size + gap;
  for (let y = 0; y < canvas.height; y += step)
    for (let x = 0; x < canvas.width; x += step) {
      ctx.fillStyle = `rgba(${r},${g},${b},${rndAlpha(contrast)})`;
      ctx.fillRect(x, y, size, size);
    }
}

/* Vignette — position:absolute over the canvas */
/* background: radial-gradient(50% 50%, transparent 0%, #0d0d0b 100%); */