Физика кубиков в симуляции ⇐ Javascript

[Anonymous]

Я хочу создать веб -сайт, который может повторить этот эксперимент с видео на YouTube. И я сделал это, это работало, но у него есть проблема: когда вводится номер ввода выше 2-3 тысяч, большой блок, когда множественное столкновение с небольшим блоком на стене начинает проходить через них, почти за экраном. Я попытался исправить это, немного изменив формулу, но это не помогает. Вот мой код: < /p>
html < /p>







PIgame



Physics simulation!
Calculate the digits of PI with a physics simulation!
[!Choose the mass of the Big Cube!]

*Please dont put the number over 1 trillion!
Start simulation
About (wut is this)

Collisions: 0
π: 3.141592653589793...
Quit to Menu






< /code>
css < /p>
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: black;
color: white;
}

#menu {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 100px;
gap: 16px;
background-image: url('/images/TV1NQ_rZeMY.jpg');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}

h1 {
font-size: 120px;
margin-bottom: 10px;
margin-top: 10px
}

.inp{
border: solid 2px white;
background-color: transparent;
color: white;
border-radius: 60px;
outline: none;
padding: 5px;
}

#start, #about {
font-size: 24px;
padding: 3px;
border: none;
border-radius: 60px;
cursor: pointer;
background-color: transparent;
color: white;
transition: 0.5s;
}

#start:hover, #about:hover {
scale: 1.5;
transition: 0.5s;
}

#quit {
margin: 10px 10px 0 0;
font-size: 24px;
padding: 3px;
border: none;
border-radius: 60px;
cursor: pointer;
background-color: transparent;
color: white;
}

< /code>
javascript < /p>
let m1 = 1 // mass of small cube
let m2 = 10 // mass of big cube
const massa = document.getElementById('massInput') // mass input
const startButton = document.getElementById('start') // start button
const aboutButton = document.getElementById('about') // about button
const menu = document.getElementById('menu') // menu div
const sim = document.getElementById('simulation') // simulation div
let counter = document.getElementById('counter') // counter display
const quitButton = document.getElementById('quit'); // quit button
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let small, big, bigmass, size, color
let collisions = 0
let animationId

quitButton.addEventListener('click', function() {
sim.style.display = 'none';
menu.style.display = 'flex';
cancelAnimationFrame(animationId); // если используете переменную для requestAnimationFrame
})
startButton.addEventListener('click', function() {
bigmass = parseFloat(massa.value)

if (isNaN(bigmass) || bigmass < 1 || bigmass > 1000000000000) {
alert('Please enter a valid mass (from 1 to 1 trillion)')
return;
}
if(bigmass < 10) {size = 30; color = 'orange';}
else if(bigmass >= 10 && bigmass < 100) {size = 60; color = 'blue';}
else if(bigmass >= 100 && bigmass < 1000000) {size = 90; color = 'yellow';}
else if (bigmass >= 1000000 && bigmass = 10 && bigmass < 100) {size = 60, color = 'blue'} // size of big cube based on mass

// else if(bigmass >= 100 && bigmass < 1000000) {size = 90, color = 'yellow'}

// else if (bigmass >= 1000000 && bigmass
Это, вероятно, не будет работать очень хорошо на мобильном телефоне, потому что я сделал это для своего ПК < /p>
Я попытался воссоздать симуляцию из видео (оставленная ссылка выше). Он работает хорошо, только если вы используете значения менее 2000. Он работает, даже если значение составляет 1 триллион, но не так, как я ожидал

Подробнее здесь: https://stackoverflow.com/questions/797 ... simulation