Create script.js

script.js

@@ -0,0 +1,105 @@
+// モジュールの設定
+const { Engine, Render, Runner, Bodies, World, Events } = Matter;
+
+// エンジンとワールドの作成
+const engine = Engine.create();
+const world = engine.world;
+
+// レンダラの作成
+const render = Render.create({
+    element: document.body,
+    engine: engine,
+    canvas: document.getElementById('world'),
+    options: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        wireframes: false
+    }
+});
+
+Render.run(render);
+const runner = Runner.create();
+Runner.run(runner, engine);
+
+// シミュレーションに必要な変数
+let ball = null;
+let vxData = [];
+let vyData = [];
+let xData = [];
+let tData = [];
+let startTime = null;
+
+// クリックイベントで小球を生成
+document.addEventListener('click', (event) => {
+    if (ball) {
+        World.remove(world, ball);
+        plotGraphs();
+    }
+    const x = event.clientX;
+    const y = event.clientY;
+    const velocityX = Math.random() * 10 - 5;  // -5から5のランダムな速度
+    const velocityY = Math.random() * 10 - 5;
+    ball = Bodies.circle(x, y, 20, { restitution: 0.8 });
+    Matter.Body.setVelocity(ball, { x: velocityX, y: velocityY });
+    World.add(world, ball);
+
+    // データの初期化
+    vxData = [];
+    vyData = [];
+    xData = [];
+    tData = [];
+    startTime = new Date().getTime();
+});
+
+// シミュレーションのアップデート
+Events.on(engine, 'beforeUpdate', () => {
+    if (ball) {
+        const elapsedTime = (new Date().getTime() - startTime) / 1000;
+        vxData.push(ball.velocity.x);
+        vyData.push(ball.velocity.y);
+        xData.push(ball.position.x);
+        tData.push(elapsedTime);
+
+        // 画面外に出た場合、ボールを削除
+        if (ball.position.x < 0 || ball.position.x > window.innerWidth ||
+            ball.position.y < 0 || ball.position.y > window.innerHeight) {
+            World.remove(world, ball);
+            ball = null;
+            plotGraphs();
+        }
+    }
+});
+
+// グラフ描画の関数
+function plotGraphs() {
+    plotChart('vxChart', 'Velocity-X vs Time', tData, vxData);
+    plotChart('vyChart', 'Velocity-Y vs Time', tData, vyData);
+    plotChart('xtChart', 'Position-X vs Time', tData, xData);
+}
+
+function plotChart(canvasId, label, xData, yData) {
+    const ctx = document.getElementById(canvasId).getContext('2d');
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: xData,
+            datasets: [{
+                label: label,
+                data: yData,
+                borderColor: 'rgba(75, 192, 192, 1)',
+                borderWidth: 1,
+                fill: false
+            }]
+        },
+        options: {
+            scales: {
+                x: {
+                    beginAtZero: true
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}