Почему угасает энергия в моделировании «гравитации» в 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();

Вопрос задан 27 нояб. 2020
109 просмотров

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

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

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

Нравится 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>

Написано 28 нояб. 2020

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

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

Написано 28 нояб. 2020
ksnk @ksnk

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

https://jsfiddle.net/oLx8e5hg/

Написано 28 нояб. 2020
Дмитрий Майоров @DmitryDDS Автор вопроса

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

Написано 28 нояб. 2020

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

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

Нравится 13 комментариев

WbICHA @WblCHA

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

Написано 28 нояб. 2020
dollar @dollar

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

Написано 28 нояб. 2020
Дмитрий Майоров @DmitryDDS Автор вопроса

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

Написано 28 нояб. 2020

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 // тру
})()

Написано 28 нояб. 2020

WbICHA @WblCHA

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

Написано 28 нояб. 2020
Дмитрий Майоров @DmitryDDS Автор вопроса

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

Написано 28 нояб. 2020
WbICHA @WblCHA

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

Написано 28 нояб. 2020
Дмитрий Майоров @DmitryDDS Автор вопроса

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

Написано 28 нояб. 2020

WbICHA @WblCHA

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

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

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

Написано 28 нояб. 2020

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

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

Написано 28 нояб. 2020
WbICHA @WblCHA

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

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

Написано 28 нояб. 2020
Дмитрий Майоров @DmitryDDS Автор вопроса

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

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

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

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

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

spoiler
var g = 0.05 var sum = 0; for(i=0;i<20000000000;i++) sum += g; console.log(sum - 1000000000); //-351.32148468494415
Написано 28 нояб. 2020

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

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

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

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

JavaScript

Простой
Как вывести элемент массива у которого id соответствует дата атрибуту кнопки?
- 1 подписчик
- 2 минуты назад
- 3 просмотра
0

ответов
JavaScript

Простой
Как создать луч света?
- 1 подписчик
- 22 минуты назад
- 43 просмотра
0

ответов
AJAX

+1 ещё

Сложный
Как отправить часть формы?
- 1 подписчик
- 23 минуты назад
- 15 просмотров
0

ответов
JavaScript

Простой
Почему игрок проходит через стены?
- 1 подписчик
- час назад
- 51 просмотр
1

ответ
JavaScript

Средний
Как сделать проверку 2 json в fech .then()?
- 1 подписчик
- час назад
- 42 просмотра
2

ответа
JavaScript

Простой
Почему в консоль выводится undefined?
- 1 подписчик
- час назад
- 44 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему .includes возвращает false?
- 1 подписчик
- час назад
- 46 просмотров
1

ответ
JavaScript

Простой
Как подсветить навигацию при смене слайдов в swiper.js?
- 1 подписчик
- 2 часа назад
- 24 просмотра
1

ответ
JavaScript

Простой
Как сделать запрет на добавление картинок меньше 1024?
- 1 подписчик
- 3 часа назад
- 57 просмотров
0

ответов
AJAX

+2 ещё

Простой
Как сделать автоматическую загрузку публикаций при прокрутке?
- 1 подписчик
- 3 часа назад
- 82 просмотра
0

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

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

Artezio • Нижний Новгород

от 130 000 до 180 000 ₽

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

Artezio • Москва

от 160 000 до 220 000 ₽

JavaScript Fullstack developer

Intspirit • Краснодар

от 80 000 до 150 000 ₽

Разработать приложение с# + фаербейс

24 янв. 2021, в 19:14

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

Сделать микросайт

24 янв. 2021, в 18:02

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

Сделать дизайн сайта для Hospitality компании (аренда квартир)

24 янв. 2021, в 17:24

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

Что это за магические числа 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

Ответ написан 28 нояб. 2020

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

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

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

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

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