anime ball

index.js

@@ -13,7 +13,8 @@ const ball = {
     radius: 8,
     color: boardColor,
     x: 0,
-    y: 0
+    y: 0,
+    angle: -Math.PI / 2
 };
 
 const board = {
@@ -96,6 +97,28 @@ function drawBall() {
     ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
     ctx.fillStyle = ball.color;
     ctx.fill();
+    ctx.closePath()
+
+    vectorXEnd = ball.x + ball.radius * 3 * Math.cos(ball.angle);
+    vectorYEnd = ball.y - ball.radius * 3 * Math.sin(ball.angle)
+
+    ctx.beginPath();
+    ctx.moveTo(ball.x, ball.y);
+    ctx.lineTo(vectorXEnd, vectorYEnd);
+    //ctx.lineTo(
+    //    ball.x - 20 * Math.cos(ball.angle - Math.PI / 6), 
+    //    ball.y - 20 * Math.sin(ball.angle - Math.PI / 6)
+    //);
+    //ctx.moveTo(vectorXEnd, vectorYEnd);
+    //ctx.lineTo(
+    //    ball.x - 20 * Math.cos(ball.angle + Math.PI / 6), 
+    //    ball.y - 20 * Math.sin(ball.angle + Math.PI / 6)
+    //);
+
+    ctx.strokeStyle = ball.color;
+    ctx.lineWidth = 2;
+
+    ctx.stroke();
     ctx.closePath();
 }
 
@@ -126,40 +149,53 @@ function syncSliderAndInput(slider, input) {
 }
 
 function animateBall() {
+    if (isAnimated) return;
+
     let xhr = new XMLHttpRequest();
 
     const angle = (Math.PI / 180 * parseFloat(angleSlider.value)).toFixed(3);
     const length = (parseFloat(lengthSlider.value) / 100).toFixed(3);
     const height = (parseFloat(heightSlider.value) / 100).toFixed(3);
 
-    const url = `https://physics.zzvt.pw/api/interpolation?h=${height}&l=${length}&g=10&alpha=${angle}&count=1`;
+    const url = `https://physics.zzvt.pw/api/interpolation?h=${height}&l=${length}&g=10&alpha=${angle}&count=1000`;
     xhr.open("GET", url, true);
 
     console.log(`Sent request to ${url}`)
     xhr.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
-            const timeDelta = 20;
-
             const points = JSON.parse(this.responseText);
             startX = ball.x;
             startY = ball.y;
+            startAngle = ball.angle;
             
             isAnimated = true;
             for(let i = 0; i < points.length; ++i) {
                 let point = points[i];
+
+                let resetBall = function(){
+                    isAnimated = false;
+                    ball.x = startX;
+                    ball.y = startY;
+                    ball.angle = startAngle;
+                    updateField();
+                }
+
+                if (startY - point.y * 100 > canvas.height / window.devicePixelRatio || 
+                    startX + point.x * 100 > canvas.width / window.devicePixelRatio) {
+                    setTimeout(resetBall, point.time * 1000)
+                    break;
+                }
+                
                 setTimeout(function(){
                     ball.x = startX + point.x * 100;
-                    ball.y = startY - point.y * 100 + ball.radius;
-                    console.log(ball.x, ball.y);
-                    updateField();
-                }, timeDelta * i)
-            }
+                    ball.y = startY - point.y * 100;
+                    ball.angle = point.angle;
 
-            setTimeout(function(){
-                isAnimated = false;
-                ball.x = startX;
-                ball.y = startY;
-            }, timeDelta * points.length)
+                    updateField();
+
+                    if (i == points.length - 1) resetBall();
+                }, point.time * 1000)
+            }
         }
     }
 

index.py

@@ -4,7 +4,7 @@ import requests
 
 points_x = []
 points_y = []
-for point in requests.get("https://physics.zzvt.pw/api/interpolation?h=0.1&l=3.662&g=10&alpha=0.294&count=100").json():
+for point in requests.get("https://physics.zzvt.pw/api/interpolation?h=10&l=6&g=10&alpha=0.5&count=100").json():
     points_x.append(point["x"])
     points_y.append(point["y"])
     

index2.py

@@ -0,0 +1,30 @@
+import math
+import matplotlib.pyplot as plt
+
+
+H = 1
+g = 10
+u0 = (2 * g * H) ** 0.5
+alpha = 0.2
+T = 2 * u0 / g
+
+points_x = []
+points_y = []
+for t in range(200):
+    t = t / 100
+    points_x.append((u0 * math.sin(alpha) * t + g * math.sin(alpha) * t ** 2 / 2) * math.sin(alpha))
+    points_y.append(H + (u0 * math.cos(alpha) * (t % T) - g * math.cos(alpha) * (t % T)**2 / 2) * math.cos(alpha))
+
+print(points_y)
+
+plt.figure(figsize=(10, 6))
+
+plt.scatter(points_x, points_y, c="blue", label="Точки", alpha=0.6)
+
+plt.xlabel("x")
+plt.ylabel("y")
+plt.title("График с точками")
+plt.legend()
+plt.grid()
+
+plt.show()