ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
for (var i = 0; i < columns.length; i++) {
  ctx.font = '24px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillText(glyphs[count], x[i], y[i]);
  x[i] += vx[i];
  y[i] += vy[i];
  if (y[i] > canvas.height) {
    y[i] = 0;
    x[i] = Math.random() * canvas.width;
    glyph = glyphs[Math.floor(Math.random() * glyphs.length)];
    vx[i] = Math.random() * 2;
    vy[i] = Math.random() * 2;
    trail[i] = Math.random() * 2;
    fade[i] = 1;
  } else if (x[i] > canvas.width - 20) {
    vx[i] = -vx[i];
  } else if (x[i] < 0) {
    vx[i] = -vx[i];
  }
}
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
for (var i = 0; i < columns.length; i++) {
  ctx.font = '24px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillStyle = `rgba(0, 255, 0, ${fade[i]})`;
  ctx.fillText(glyphs[count], x[i], y[i] + trail[i]);
}
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
for (var i = 0; i < columns.length; i++) {
  ctx.font = '24px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillText(glyphs[count], x[i], y[i] + trail[i] + 1);
}
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
for (var i = 0; i < columns.length; i++) {
  ctx.font = '24px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillStyle = `rgba(0, 255, 0, ${fade[i]})`;
  ctx.fillText(glyphs[count], x[i] + 1, y[i] + trail[i]);
}
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
for (var i = 0; i < columns.length; i++) {
  ctx.font = '24px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillText(glyphs[count], x[i] + 1, y[i] + trail[i] + 1);
}
fade.forEach((f, i) => {
  if (f > 0) {
    f -= 0.01;
    fade[i] = f;
  }
});

requestAnimationFrame(draw);
}

for (var i = 0; i < columns.length; i++) {
  glyph = glyphs[Math.floor(Math.random() * glyphs.length)];
  x[i] = Math.random() * canvas.width;
  y[i] = 0;
  vx[i] = Math.random() * 2;
  vy[i] = Math.random() * 2;
  trail[i] = Math.random() * 2;
  fade[i] = 1;
}

setInterval(() => {
  count = (count + 1) % glyphs.length;
}, 100);

requestAnimationFrame(draw);
</script>
</body>
</html>