JavaScriptで
ぶらんこを漕ぐ 振り子の物理シミュレーションと
requestAnimationFrameを利用した
アニメーション効果で
ぶらんこを漕ぐ

//Canvas 2D APIによる振り子の物理シミュレーション　
const canvas = document.getElementById('pendulumCanvas');
const ctx = canvas.getContext('2d');

// 振り子の物理パラメータ
const length = 180; // 振り子の長さ
const gravity = 0.98; // 重力加速度
let angle = Math.PI / 3; // 初期角度（45度）
let angleVelocity = 0.0; // 角速度
let angleAcceleration = 0.0; // 角加速度
const damping = 0.999; // 減衰率 0.995

// 振り子のアニメーション関数
function updatePendulum() {
  // 振り子の力学方程式
  angleAcceleration = (-1 * gravity / length) * Math.sin(angle);
  angleVelocity += angleAcceleration;
  angleVelocity *= damping; // 減衰効果
  angle += angleVelocity;

  // 描画のクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 振り子の位置計算
  const originX = canvas.width / 2;
  const originY = 50;
  const pendulumX = originX + length * Math.sin(angle);
  const pendulumY = originY + length * Math.cos(angle);

  // 支点
  ctx.beginPath();
  ctx.arc(originX, originY, 5, 0, Math.PI * 2);
  ctx.fillStyle = 'black';
  ctx.fill();

  // 振り子の棒
  ctx.beginPath();
  ctx.moveTo(originX, originY);
  ctx.lineTo(pendulumX, pendulumY);
  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 2;
  ctx.stroke();

  // 振り子の重り
  ctx.beginPath();
  ctx.arc(pendulumX, pendulumY, 15, 0, Math.PI * 2);
  ctx.fillStyle = '#3498db';
  ctx.fill();
}

// アニメーションループ
function animate() {
  updatePendulum();
  requestAnimationFrame(animate);
}

animate();

//ctxはCanvasRenderingContext2D のインスタンス、いわゆるコンテキスト。
ctx.translate(x座標, y座標);//回転時の支点、transform-originみたいな座標
//angleは振り子の角度
ctx.rotate(angle*-.5); // 振り子の角度に合わせて画像の回転角度を半分程度に調整
ctx.drawImage(ぶらんこ画像オブジェクト, オフセットX, オフセットY); // オフセットを加えた位置に画像を描画