document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  let scale; // meters to pixel
  let plumbRadiusScale;

  const UpdateScale = () => {
    canvas.width = canvas.getBoundingClientRect().width;
    canvas.height = canvas.getBoundingClientRect().height;
    const canvasShort = Math.min(canvas.width, canvas.height);
    
    scale = canvasShort / 5; // meters to pixel
    plumbRadiusScale = canvasShort / 32;
  };
  UpdateScale();
  window.addEventListener('resize', UpdateScale);

  const gravity = 50;

  const length = [1, 1];
  const weight = [1, 1];

  let state = [];
  for (let i = 0; i < 100; ++i) {
    state.push({
      omega: [0, 0],
      theta: [
        ((145 + 1e-13 * i) * Math.PI) / 180,
        ((145 + 1e-13 * i) * Math.PI) / 180
      ]
    });
  }

  const AngleAccel = (theta, omega) => {
    const c = Math.cos(theta[0] - theta[1]);
    const s = Math.sin(theta[0] - theta[1]);
    return [
      (-weight[0] * gravity * Math.sin(theta[0]) -
        weight[1] *
          (gravity * Math.sin(theta[0]) +
            length[1] * omega[1] * omega[1] * s +
            (length[0] * omega[0] * omega[0] * s -
              gravity * Math.sin(theta[1])) *
              c)) /
        (length[0] * (weight[0] + weight[1] * s * s)),
      ((weight[0] + weight[1]) *
        (length[0] * omega[0] * omega[0] * s -
          gravity * Math.sin(theta[1]) +
          gravity * Math.sin(theta[0]) * c) +
        weight[1] * length[1] * omega[1] * omega[1] * c * s) /
        (length[1] * (weight[0] + weight[1] * s * s))
    ];
  };

  const CalcStateDoublePendulum = (state, dt) => {
    // 4th order runge-kutta method for linearization of time derivative.

    const omega = state.omega;
    const theta = state.theta;
    const accel = AngleAccel(theta, omega);

    const omega1 = omega.map((v, i) => v + (accel[i] * dt) / 2);
    const theta1 = theta.map((v, i) => v + (omega[i] * dt) / 2);
    const accel1 = AngleAccel(theta1, omega1);

    const omega2 = omega.map((v, i) => v + (accel1[i] * dt) / 2);
    const theta2 = theta.map((v, i) => v + (omega1[i] * dt) / 2);
    const accel2 = AngleAccel(theta2, omega2);

    const omega3 = omega.map((v, i) => v + accel2[i] * dt);
    const theta3 = theta.map((v, i) => v + omega2[i] * dt);
    const accel3 = AngleAccel(theta3, omega3);

    return {
      omega: omega.map(
        (v, i) =>
          v + ((accel[i] + 2 * accel1[i] + 2 * accel2[i] + accel3[i]) / 6) * dt
      ),
      theta: theta.map(
        (v, i) =>
          v + ((omega[i] + 2 * omega1[i] + 2 * omega2[i] + omega3[i]) / 6) * dt
      )
    };
  };

  const Update = (dt) => {
    state = state.map((v) => CalcStateDoublePendulum(v, dt));
  };

  const DrawDoublePendulum = (state) => {
    const omega = state.omega;
    const theta = state.theta;

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;

    const m1x = cx + length[0] * scale * Math.cos(theta[0] + Math.PI / 2);
    const m1y = cy + length[0] * scale * Math.sin(theta[0] + Math.PI / 2);

    ctx.globalAlpha = 0.2;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(m1x, m1y);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(m1x, m1y, weight[0] * plumbRadiusScale, 0, Math.PI * 2, false);
    ctx.stroke();

    const m2x = m1x + length[1] * scale * Math.cos(theta[1] + Math.PI / 2);
    const m2y = m1y + length[1] * scale * Math.sin(theta[1] + Math.PI / 2);

    ctx.beginPath();
    ctx.moveTo(m1x, m1y);
    ctx.lineTo(m2x, m2y);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(m2x, m2y, weight[1] * plumbRadiusScale, 0, Math.PI * 2, false);
    ctx.stroke();
  };

  const Draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let v of state) {
      DrawDoublePendulum(v);
    }
  };

  const GameLoop = () => {
    Update(0.016);
    Draw();
    RequestNextFrame();
  };

  const RequestNextFrame = () => {
    setTimeout(() => {
      requestAnimationFrame(GameLoop);
    }, 16);
  };

  requestAnimationFrame(GameLoop);
});