diff --git a/index.js b/index.js index 48b0654..3819eb0 100644 --- a/index.js +++ b/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) + } } } diff --git a/index.py b/index.py index 55cbfdc..1929c19 100644 --- a/index.py +++ b/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"]) diff --git a/index2.py b/index2.py new file mode 100644 index 0000000..290bae7 --- /dev/null +++ b/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() \ No newline at end of file