Quintuple pendulum simulation's game

Click here for free DL of the app version that can save data.

No:1866

2176

←

Prev Next

→

Quintuple pendulum simulation
Developer AI絵師｜Date and time 23/6/19 10:14:34
Build time 31.294 sec｜Game capacity 2.888KB｜

Script

操作方法：タップして振り子を動かす

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>五重振り子シミュレーション</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <p>操作方法：タップして振り子を動かす</p>
    <script>
      // 五重振り子の数
      const numPendulums = 5;

// 画面サイズ
      const width = window.innerWidth;
      const height = window.innerHeight * 0.8;

// 重力定数
      const g = 9.8;

// 各振り子の初期値
      let positions = [];
      let velocities = [];
      let colors = [];

for (let i = 0; i < numPendulums; i++) {
        positions[i] = { x: width / 2, y: height / 2 + i * 50 };
        velocities[i] = { x: 0, y: 0 };
        colors[i] = ["🔴", "🔵", "🟢", "🟣", "🟠"][i];
      }

// キャンバスの描画
      const canvas = document.getElementById("canvas");
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext("2d");

function draw() {
        context.clearRect(0, 0, width, height);
        for (let i = 0; i < numPendulums; i++) {
          context.font = "64px serif";
          context.fillText(colors[i], positions[i].x, positions[i].y);
        }
      }

// 時間の経過に応じた振り子の移動
      function update() {
        const dt = 0.01; // 時間刻み幅
        for (let i = 0; i < numPendulums; i++) {
          const position = positions[i];
          const velocity = velocities[i];
          const theta = Math.atan2(position.y - height / 2, position.x - width / 2);
          const radius = Math.sqrt((position.x - width / 2) ** 2 + (position.y - height / 2) ** 2);
          const acceleration = -g * Math.sin(theta);
          velocity.x += acceleration * Math.sin(theta) * dt;
          velocity.y += acceleration * Math.cos(theta) * dt;
          position.x = width / 2 + radius * Math.cos(theta + velocity.x * dt / radius);
          position.y = height / 2 + radius * Math.sin(theta + velocity.y * dt / radius);
        }
      }

// タップした位置に振り子を引っ張る
      function onTouchStart(event) {
        for (let i = 0; i < numPendulums; i++) {
          const position = positions[i];
          const dx = event.touches[0].clientX - position.x;
          const dy = event.touches[0].clientY - position.y;
          const distanceSquared = dx ** 2 + dy ** 2;
          if (distanceSquared < 10000) {
            velocities[i].x = 0;
            velocities[i].y = 0;
          }
        }
      }

// メインループの実行
      setInterval(function() {
        update();
        draw();
      }, 10);

// イベントリスナーの登録
      canvas.addEventListener("touchstart", onTouchStart);
    </script>
  </body>
</html>