Почему угасает энергия в моделировании «гравитации» в JS?

Question

Дмитрий Майоров @DmitryDDS

Человек.

JavaScript

Почему угасает энергия в моделировании «гравитации» в JS?

У меня есть код, который моделирует псевдо гравитацию(притяжение к земле) и отскок шара от поверхности.
По идее шар не должен терять скорость по оси X и высоту по оси Y, но шар постоянно теряет, медленно, но теряет высоту, пока не застрянет.

Я не понимаю куда могут уходить значения высоты...

Вот код:

const canvas = document.getElementById("canvas");
      const ctx    = canvas.getContext("2d");

      function world(){
         var xp = 11;
         var yp = 250;
         var g  = 0.05;
         var sx = 3;
         var sy = 0;
         var sz = 0;
         setInterval(function(){
            if(xp >= 490) sx = -sx;
            if(xp <= 10)  sx = -sx;
            if(yp >= 490) sy = -sy;
            if(yp <= 10)  sy = -sy;
            sy += g;
            xp += sx;
            yp += sy;
            draw(xp, yp);
         }, 10)
      }
      function draw(x,y){
         ctx.strokeStyle='#000';
         ctx.fillStyle='#fff';
         ctx.clearRect(0, 0, 500, 500);
         ctx.beginPath();
         ctx.arc(x, y, 10, 0, Math.PI * 2)
         ctx.stroke();
         ctx.fill();
      }
      world();

Вопрос задан более трёх лет назад
123 просмотра

7 комментариев

Подписаться 1 Простой 7 комментариев

Решения вопроса 1

5 комментариев

Дмитрий Майоров @DmitryDDS Автор вопроса

Скорость стала даже расти и шар стал подниматься выше чем должен, может я что-то делаю не так...
Вот полный код файла:

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      body{
         padding: 0;
         margin:  0;
      }
      #canvas{
         width:  500px;
         height: 500px;
         background: #ccc;
      }
   </style>
   <title>Document</title>
</head>
<body>
   <canvas width="500" height="500" id="canvas"></canvas>
   <script>
      const canvas = document.getElementById("canvas");
      const ctx    = canvas.getContext("2d");

      function world(){
         var xp = 11;
         var yp = 250;
         var g  = 0.05;
         var sx = 3;
         var sy = 0;
         var sz = 0;
         setInterval(function(){
            if(xp >= 490) sx = -sx;
            if(xp <= 10)  sx = -sx;
            if(yp >= 490) sy = -sy;
            if(yp <= 10)  sy = -sy;
            yp += sy;
            sy += g;
            xp += sx;
            
            
            document.getElementById("p").innerHTML = -Math.floor(yp/10 - 49) ;
            draw(xp, yp);
            
         }, 10)
      }
      function draw(x,y){
         ctx.strokeStyle ='#000';
         ctx.fillStyle   ='#fff';
         ctx.clearRect(0, 0, 500, 500);
         ctx.beginPath();
         ctx.arc(x, y, 10, 0, Math.PI * 2)
         ctx.stroke();
         ctx.fill();
      }
      world();
   </script>
   <p id="p">0</p>
</body>
</html>

Написано более трёх лет назад

ksnk @ksnk
Ну, дык. Сейчас наоборот. Ты в каждый момент удара теперь добавляешь импульс.
В момент удара гравитация на координату Y действовать не должна Что-то вроде
... if(yp >=490) sy = -sy; else sy+=g; ...
Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

ksnk, Хотелось бы сказать, что всё работает, но высота всё равно уменьшается...

Написано более трёх лет назад
ksnk @ksnk

if(yp >=490)
Я не то условие сначала написал...

https://jsfiddle.net/oLx8e5hg/

Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

ksnk, Спасибо большое!

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

13 комментариев

WbICHA @WblCHA

Написано верно, но какое это имеет отношение к вопросу?
У автора нет ни одной проверки на равенство.

Написано более трёх лет назад
dollar @dollar

WbICHA, у автора накопительная сумма. Когда много раз прибавляешь число, то ошибка накапливается.

Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

dollar, обычная единица вызывает тоже самое, только намного быстрее.

Написано более трёх лет назад

WbICHA @WblCHA

Дмитрий Майоров, это шутка такая?

(() => {
  const g = 1;
  return g + g + g + g + g + g + g + g + g + g + g + g + g + g + g + g + g + g + g + g === 20 // тру
})()

Написано более трёх лет назад

WbICHA @WblCHA

dollar, согласен, но эта ошибка если и скажется, то очень и очень нескоро. И в данном случае с проблемой никак не связана.
А так да, на целые бы перейти.

Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

WbICHA, В моём случае если g = 1, тогда шар быстрее перестанет прыгать. Так что эти десятичные числа не оказывают(почти) влияния на симуляцию.

Написано более трёх лет назад
WbICHA @WblCHA

Дмитрий Майоров, скажу по секрету, только никому. Если целое число 5 поделить на 100, то ты получишь, о боже, 0.05!

Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

WbICHA, И как это должно было решить проблему?

Написано более трёх лет назад

WbICHA @WblCHA

Дмитрий Майоров,

(() => {
  const g = 0.05;
  return g + g + g; // 0.15000000000000002
})()

(() => {
  const g = 5;
  return (g + g + g) / 100; // 0.15
})()

Написано более трёх лет назад

Дмитрий Майоров @DmitryDDS Автор вопроса

WbICHA, Ответ был дан уже давно, он оказался горазда проще чем ваш и за большое количество времени та погрешность, о которой вы говорили, не проявила себя.

Написано более трёх лет назад
WbICHA @WblCHA

Дмитрий Майоров, вы издеваетесь? Вы хотя бы читали ЧТО я пишу?

dollar, согласен, но эта ошибка если и скажется, то очень и очень нескоро. И в данном случае с проблемой никак не связана.

Написано более трёх лет назад
Дмитрий Майоров @DmitryDDS Автор вопроса

WbICHA, Читал, но после моего ответа, что даже обычная 1 вызывает угасание, от чего десятичные не являются проблемой, вы ответили:

Дмитрий Майоров, скажу по секрету, только никому. Если целое число 5 поделить на 100, то ты получишь, о боже, 0.05!

это звучало неприятно, я конечно не умён, но строить из меня полного дурака не надо. Кстати эта погрешность настолько мала, что не проявила себя уже в течение более чем 142 стуков об землю.

Написано более трёх лет назад
dollar @dollar
Да, вклад этой погрешности действительно мал по сравнению со вкладом в общую погрешность от ошибки в коде (которая описана в другом ответе).

Тем не менее, вклад есть. Сейчас можно им пренебречь и это обсуждение закрыть, но на будущее в других задачах стоит иметь в виду.

spoiler
var g = 0.05 var sum = 0; for(i=0;i<20000000000;i++) sum += g; console.log(sum - 1000000000); //-351.32148468494415
Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 5 часов назад
- 22 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 9 часов назад
- 143 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 12 часов назад
- 111 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 13 часов назад
- 43 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 80 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Создание и публикация короткого (reels) UGC-видео на YouTube-канале

25 апр. 2024, в 01:46

500 руб./за проект

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

10000 руб./за проект

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Что это за магические числа xp yg g sx sy sz?
Cимуляция движения тела по орбите?
JS и плавающая запятая без потери точности?)) Наивненько)

spoiler
Денис Юрьев, даже если обычная 1, скорость угасания увеличивается(сила притяжения тоже).
Василий Банников,
xp - позиция тела по оси X(x position);
yp - позиция тела по оси Y(y position);
g - сила притяжения к поверхности земли(можно было бы и догадаться);
sx - скорость движения по оси X.
sy - скорость движения по оси Y.
Дмитрий Майоров, поправьте код пж
RAX7, Сила притяжения к земле и отскок шара от земли с полной энергии, т.е. шар не отдаст энергию земле и отскочит от неё.

Answer 1 · 2020-11-28 01:22:02

В момент удара по горизонтальной поверхности - sy - максимальна, после чего она инвертируется. И в этот же момент уменьшается. Тоесть каждый удар по плоскости, максимальная скорость убегания становится меньше на G. Просто выведи скорость сразу после инвертирования sy и все сам увидишь

Answer 2 · 2020-11-28 01:17:58

dollar @dollar

Делай добро и бросай его в воду.

var g = 0.05;
console.log(g + g == 0.1); //true
console.log(g + g + g == 0.15); //false

Ответ написан более трёх лет назад

13 комментариев

Почему угасает энергия в моделировании «гравитации» в JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт