|
Сообщение от potatosboxon
|
У меня сетка 5x5.
На 0:Y обьект должен перемещаться со скоростью 1.
На 5:Y обьект должен перемещаться со скоростью 5.
При движении от 0 к 5, от 5 к 0 - должна меняться скорость.
|
Т. е. вам нужно такое перемещение объекта, чтобы находясь в верхней части его скорость была 1 ячейка сетки / сек., а находясь в нижней части — 5 ячеек сетки / сек. Объект проходит 5 ячеек. Притом должно быть поступательное движение.
Давайте разбираться. Получается, что начальная скорость v₀ = 1, конечная скорость v₁ = 5. Объект начинает двигаться от точки s₀ = 0 и завершает своё движение в точке s₁ = 5. Движение начинается в момент времени t₀ = 0 и завершается в t₁, которое мы можем вычислить основываясь на том, что объект движется равноускоренно, т. е. ускорение a₀ постоянно.
Время окончания движения можно вычислить по формуле
равноускоренного движения. Вычислив время завершения t₁, можно узнать ускорение a₀. Теперь у нас есть все константы, чтобы вычислить пройденный путь s и скорость v (для проверки) объекта в любой момент времени t.
Поскольку вас интересует только движение на отрезке времени [t₀; t₁], то можно через каждые t₁ - t₀ секунд оборачивать время вспять. Например при помощи
обратных тригонометрических функции.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#grid {
position: relative;
width: 500px;
height: 500px;
background:
repeating-linear-gradient( 0deg, var(--r)),
repeating-linear-gradient(-90deg, var(--r));
--c: 5;
--w: 1px;
--r: transparent 0 var(--w), rgba(0, 0, 0, 0.05) 0 calc(100% / var(--c));
}
#grid > .circle {
width: 20px;
height: 20px;
background: yellowgreen;
border-radius: 50%;
margin: -10px 0 0 -10px;
position: absolute;
left: 50%;
}
#grid > .info::after {
position: absolute;
content: "v = " var(--v);
white-space: nowrap;
background: black;
color: white;
font: 1em monospace;
border-radius: 0.25em;
margin: 0.5em;
padding: 0.2em 0.5em;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="grid">
<div class="info"></div>
<div class="circle"></div>
</div>
<script>
const v0 = 1;
const v1 = 5;
const s0 = 0;
const s1 = 5;
const t0 = 0;
const t1 = 2 * s1 / (v0 + v1);
const a0 = (v1 - v0) / (t1 - t0);
function s(t) {
return 0.5 * a0 * t ** 2 + v0 * t + s0;
}
function v(t) {
return a0 * t + v0;
}
function F(x) {
return t1 * (Math.acos(Math.cos(Math.PI * x / t1))) / Math.PI;
}
const circle = document.querySelector("#grid > .circle");
const info = document.querySelector("#grid > .info");
(function loop(time) {
circle.style.transform = `translateY(${100 * s(F(time / 1000))}px)`;
info.style.setProperty("--v", `"${v(F(time / 1000)).toFixed(2)}"`);
requestAnimationFrame(loop);
})(performance.now());
</script>
</body>
</html>
ЕЩЁ Упомянутые графики —
https://www.desmos.com/calculator/dejdiypcao
