TwoBodyProblem/index.html at main · YurLea/TwoBodyProblem · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Задача притягивающего центра</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
<canvas id="simCanvas"></canvas>

<aside class="panel">
    <h1>Задача притягивающего центра</h1>
    <p class="hint">
        ЛКМ: кликни в точку старта, потяни мышь и отпусти — так задаётся начальная скорость.
    </p>

    <div class="field">
        <label for="muInput">μ = GM</label>
        <input id="muInput" type="number" min="0.0001" step="0.1" value="1" />
    </div>

    <div class="field">
        <label for="dtInput">Шаг dt</label>
        <input id="dtInput" type="number" min="0.0005" step="0.0005" value="0.004" />
    </div>

    <div class="field">
        <label for="timeScaleInput">Скорость времени</label>
        <input id="timeScaleInput" type="number" min="0.1" step="0.1" value="1" />
    </div>

    <div class="field">
        <label for="launchScaleInput">Масштаб стартовой скорости</label>
        <input id="launchScaleInput" type="number" min="0.1" step="0.1" value="1.2" />
    </div>

    <div class="field">
        <label for="vectorScaleInput">Масштаб вектора скорости</label>
        <input id="vectorScaleInput" type="number" min="0.05" step="0.05" value="0.35" />
    </div>

    <div class="field">
        <label for="trailLengthInput">Длина трека</label>
        <input id="trailLengthInput" type="number" min="10" step="10" value="120" />
    </div>

    <label class="checkbox">
        <input id="showTrailsInput" type="checkbox" checked />
        Показывать треки
    </label>

    <label class="checkbox">
        <input id="showVectorsInput" type="checkbox" />
        Показывать векторы скорости
    </label>

    <div class="buttons">
        <button id="pauseBtn">Пауза</button>
        <button id="removeLastBtn">Удалить последнее</button>
        <button id="clearBtn">Очистить всё</button>
        <button id="helpBtn" type="button">Справка</button>
    </div>

    <div id="stats" class="stats"></div>
</aside>
<div id="helpOverlay" class="modal-overlay hidden">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="helpTitle">
        <button id="helpCloseBtn" class="modal-close" type="button" aria-label="Закрыть">×</button>

        <h2 id="helpTitle">Справка</h2>

        <div class="modal-content">
            <h3>Постановка задачи</h3>
            <p>
                Эта симуляция показывает движение материальной точки в поле неподвижного
                притягивающего центра. Все добавленные тела движутся независимо друг от друга
                и не взаимодействуют между собой.
            </p>

            <h3>Уравнение движения</h3>
            <p class="formula">
                r¨ = −μ r / |r|<sup>3</sup>
            </p>
            <p>
                Здесь:
            </p>
            <ul>
                <li><b>r = (x, y)</b> — радиус-вектор тела,</li>
                <li><b>|r|</b> — расстояние до центра,</li>
                <li><b>μ = GM</b> — гравитационный параметр центрального тела.</li>
            </ul>

            <h3>Как пользоваться</h3>
            <ul>
                <li>ЛКМ: нажми в точке старта тела.</li>
                <li>Потяни мышь: этим задаётся вектор начальной скорости.</li>
                <li>Отпусти кнопку: тело будет добавлено в систему.</li>
                <li>Можно добавлять много тел подряд.</li>
            </ul>

            <h3>Численный метод</h3>
            <p>
                Для интегрирования используется метод <b>Velocity Verlet</b>. Он хорошо подходит
                для орбитальных задач и даёт хороший компромисс между скоростью и точностью.
            </p>
            <p>
                Параметр <b>dt</b> — шаг интегрирования: чем он меньше, тем выше точность,
                но тем больше вычислительная нагрузка.
            </p>
            <p>
                Параметр <b>скорость времени</b> ускоряет или замедляет ход модельного времени,
                но сам шаг интегрирования <b>dt</b> не изменяет.
            </p>

            <h3>Замечания</h3>
            <ul>
                <li>При попадании в центральное тело частица удаляется.</li>
                <li>При слишком большом удалении от центра частица также удаляется.</li>
            </ul>
        </div>

        <div class="modal-actions">
            <button id="helpOkBtn" type="button">Закрыть</button>
        </div>
    </div>
</div>
<script src="./main.js" defer></script>
</body>
</html>