Траектория тела, брошенного под углом к горизонту — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Денис (обсуждение | вклад) |
|||
| (не показаны 4 промежуточные версии 2 участников) | |||
| Строка 165: | Строка 165: | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <canvas id="canvasGraph" width="400" height=" | + | <canvas id="canvasGraph" width="400" height="упцупцупцупorder:1px solid #000000;"></canvas> |
<!--Выбор графика (чекбоксы)--> | <!--Выбор графика (чекбоксы)--> | ||
| Строка 199: | Строка 199: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
== См. также == | == См. также == | ||
Текущая версия на 11:01, 1 марта 2019
Виртуальная лаборатория > Траектория тела, брошенного под углом к горизонту
Рассмотрим движение материальной точки, брошенной под углом к горизонту в поле силы тяжести. Сопротивление воздуха не учитывается. Уравнение движения рассматриваемой системы и начальные условия имеют вид:
где и — масса и радиус-вектор материальной точки, — сила тяжести, — начальная скорость, — время, точкой обозначена производная по времени, векторы выделены жирным шрифтом. Интегрирование уравнения движения по времени с учетом начальных условий дает
Проецируя полученное векторное уравнение на горизонтальную и вертикальную оси и получим
где — угол между направлением начальной скорости и горизонтальным направлением (угол броска). После исключения времени из этих уравнений получим уравнение траектории
Таким образом, траектория является параболой, отображенной на интерактивном графике ниже. Сравнивается траектория, соответствующая и оптимальная траектория, реализующаяся при и обеспечивающая максимальную дальность броска. Перемещение слайдера позволяет наблюдать влияние угла броска на форму траектории (модуль начальной скорости при этом остается неизменным).
Траектория:
—
актуальная,
—
оптимальная (α = 45˚)
Угол броска:
α = ˚
Текст программы построения графиков на языке JavaScript:
Файл "mg.js"
1 // Движение тела, брошенного под углом к горизонту
2 // Разработчик А.М. Кривцов
3 // 01.06.2014
4 // 06.11.2014 коррекция - удаление const (Цветков)
5 // Интернет: tm.spbstu.ru/mg
6
7 function MainMG(canvas) {
8
9 // Предварительные установки
10
11 var deg = Math.PI / 180; // Угловой градус (degree)
12
13 var X_max = canvas.width;
14 var Y_max = canvas.height;
15
16 // Размерные параметры
17
18 var g = 1.; // ускорение свободного падения
19 var v0 = 1.; // начальная скорость
20
21 // Расчет констант
22
23 var h = v0 * v0 / 2 / g;
24
25 // Задание начальных значений параметров
26
27 var al = 60 * deg;
28
29 // Область построения графика
30 var x_min = 0;
31 var x_max = 2 * h;
32 var y_min = 0;
33 var y_max = h;
34
35 var N = X_max; // число точек по оси x
36 var dx = x_max / N; // шаг по оси x
37 var sx = X_max / x_max; // масштаб по оси x
38
39 var sy; // масштаб по оси y
40 var Y0; // положение 0 оси y в экранных координатах
41 var context; // на context происходит рисование
42
43 // настройка слайдеров и текстовых полей
44
45 Text_01.value = Math.round(al / deg);
46 Slider_01.min = 0;
47 Slider_01.max = 90;
48 Slider_01.step = 1;
49 Slider_01.value = Text_01.value;
50
51 draw();
52
53 // функция, запускающаяся при перемещении слайдера
54 this.set_01 = function(input) { al = input * deg; draw(); }
55
56 // Функции, запускающиеся при изменении элементов управления
57 this.setCheckbox_01 = function(bool) { draw(); }
58 this.setCheckbox_02 = function(bool) { draw(); }
59
60 // Отображение
61
62 function draw()
63 {
64 // Расчет параметров графики
65
66 sy = Y_max / (y_max - y_min); // масштаб по оси y
67 Y0 = Y_max + y_min * sy; // положение 0 оси y в экранных координатах
68
69 context = canvas.getContext("2d"); // на context происходит рисование
70 context.clearRect(0, 0, X_max, Y_max); // очистить экран
71
72 // Графики
73
74 Graph(F0, checkbox_02.checked, 'lightgrey');
75 Graph(F1, checkbox_01.checked, 'black');
76
77 // Надписи
78 context.fillStyle = 'black';
79 context.font = "italic 20px Times";
80 context.fillText("x", x_max * sx - 15, Y0 - 7);
81 context.fillText("y", 5, 15);
82 context.fillText("0", 10, Y0 - 3);
83 }
84
85 // Построение графика функции
86
87 function Graph(F, flag, color)
88 {
89 if (!flag) return;
90
91 context.strokeStyle = color;
92 context.beginPath();
93 for (var x = x_min; x < x_max; x += dx)
94 {
95 var y = F(x);
96 var X = x * sx;
97 var Y = Y0 - y * sy;
98 context.lineTo(X, Y);
99 }
100 context.stroke();
101 }
102
103 // Траектории
104
105 // al = 45 * deg;
106 function F0(x)
107 {
108 var y = x - g / (v0 * v0) * x * x;
109 return y;
110 }
111
112 // Произвольное al
113 function F1(x)
114 {
115 var t = x / v0 / Math.cos(al)
116 var y = v0 * Math.sin(al) * t - g * t * t / 2;
117 return y;
118 }
119 }
Файл "mg.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>mg</title>
6 <script src="mg.js"></script>
7 </head>
8 <body>
9 <canvas id="canvasGraph" width="400" height="упцупцупцупorder:1px solid #000000;"></canvas>
10
11 <!--Выбор графика (чекбоксы)-->
12 <div>
13 Траектория:
14 <font color="#000000" size="5"><B>—</B></font>
15 <input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>актуальная,
16 <font color="CCCCCC" size="5"><B>—</B></font>
17 <input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>оптимальная (<I>α</I> = 45˚)
18 </div>
19
20 <!--Установка параметров взаимодействия (текстовые поля и слайдеры)-->
21 <div>
22 Угол броска:
23 <font face= "Times New Roman">
24 <I>α</I> = <input id="Text_01" style="width: 2.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
25 // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
26 if (!this.checkValidity()) return;
27 app.set_01(this.value);
28 document.getElementById('Slider_01').value = this.value;
29 ">˚
30 <input type="range" id="Slider_01" style="width: 100px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
31 </font>
32 </div>
33
34 <script type="text/javascript">var app = new MainMG(
35 document.getElementById('canvasGraph')
36 );</script>
37
38 </body>
39 </html>
