balls.html | Explore in Territory

<html>
<head>
<style>
html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  width: 1920px;
  height: 1080px;
}
</style>
<script>
let frame_number = 0;

function drawForever() {
  // Request next animation frame.
  requestAnimationFrame(drawForever);
  ++frame_number;

  const canvas = document.getElementsByTagName('canvas')[0];
  const context = canvas.getContext('2d');

  // Fill with white background.
  context.fillStyle = 'rgb(255,255,255)';
  context.fillRect(0, 0, canvas.width, canvas.height );

  // Draw 200 balls of various colors at various positions.
  for (let j = 0; j < 200; j++) {
    const i = (j + frame_number) % 200;
    const t = (frame_number + 3000) * (0.01 + i / 8000.0);
    const x = (Math.sin( t ) * 0.45 + 0.5) * canvas.width;
    const y = (Math.cos( t * 0.9 )  * 0.45 + 0.5) * canvas.height;
    context.fillStyle = 'rgb(' + (255 - i) + ',' + (155 +i) + ', ' + i + ')';
    context.beginPath();
    context.arc(x, y, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
  }
}
</script>
</head>
<body onload="requestAnimationFrame(drawForever);">
  <canvas width="1920" height="1080"/>
</body>
</html>
chromium/chrome/test/data/extensions/api_test/tab_capture/balls.html
