const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let angle = Math.PI / 90;
let angularVelocity = 0.01;
let angularAcceleration = 0;
let pivotX = canvas.width / 2;
let pivotY = 250;
let ballX = pivotX + Math.sin(angle) * 100;
let ballY = pivotY + Math.cos(angle) * 100;

function drawPendulum() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(pivotX, pivotY);
  ctx.lineTo(ballX, ballY);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(ballX, ballY, 20, 0, 2 * Math.PI);
  ctx.fill();
  angle += angularVelocity;
  angularVelocity += angularAcceleration;
  ballX = pivotX + Math.sin(angle) * 100;
  ballY = pivotY + Math.cos(angle) * 100;
  requestAnimationFrame(drawPendulum);
}

drawPendulum();