Математический маятник

@GyperPupok · Регистрация: 28.09.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, есть код математического маятника который реагирует на клики мышью, как сделать так чтобы он реагировал на прикосновения тач скрина?

PHP/HTML
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
<html>
<body>
<style>
    * {  margin: -100; }
    canvas {display: block; margin: 0 auto; }
</style>
<canvas id="canvas"></canvas>
<canvas id="canvas2" style="background: #eee"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var canvas2 = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var h = canvas.height = 450;
var w = canvas.width = 600;
var h2 = canvas2.height = 100;
var w2 = canvas2.width = 200;
 
var draggin = false; // В режиме перемещения  
var dragX = 0; // Центр канваса, относительно которого будем считать поворот
var dragY = 0;
var dragPhi = 0; // Угол маятника при нажатии
var dragKsy = 0; // Начальный угол при mousedown
 
ctx.translate(w / 2, h / 2);
ctx2.translate(0, h2 / 2);
ctx2.beginPath();
ctx2.moveTo(0, 0);
 
var initPhi = Math.PI * 0.2;
var L = 200;
var dt = 1 / 60;
var g = 1500;
var t = 0;
 
bob = {
  phi: initPhi,
  v: 0,
  a: 0
};
 
//getPos - определение позиции относительно центра элемента
function getPos(el) {
  var rect = el.getBoundingClientRect();
  return {
    x: rect.left + rect.width / 2.0,
    y: rect.top + rect.height / 2.0
  };
}
 
// Определяем угол поворота относительно центра канваса
function calcKsy(evt) {
  var deltaX = evt.clientX - dragX;
  var deltaY = evt.clientY - dragY;
  var Ksy = Math.atan2(deltaY, deltaX);
  return Ksy;
}
 
// Обрабатываем событие нажатия на левую кнопку мыши
canvas.addEventListener("mousedown", function(evt) {
  var gpc = getPos(canvas);
  dragX = gpc.x;
  dragY = gpc.y;
  draggin = true;
  dragPhi = bob.phi;
  dragKsy = calcKsy(evt);
});
 
// Поворачиваем маятник на угол между начальным углом при mousedown
// и текущим после перемещения курсора
canvas.addEventListener("mousemove", function(evt) {
  if(draggin){
     var Ksy = calcKsy(evt);
     bob.phi = dragPhi - Ksy + dragKsy;
  }
});
 
// Обрабатываем событие отжатия левой кнопки мыши
canvas.addEventListener("mouseup", function(evt) {
  draggin = false;
  bob.v = 0;
  bob.a = 0;
});
 
function drawPendulum() {
  ctx.beginPath()
  ctx.arc(Math.sin(bob.phi) * L, Math.cos(bob.phi) * L, 10, 0, 2 * Math.PI)
  ctx.fill()
  ctx.moveTo(0, 0)
  ctx.lineTo(Math.sin(bob.phi) * L, Math.cos(bob.phi) * L)
  ctx.stroke()
}
 
function update() {
  bob.a = -(g / L) * Math.sin(bob.phi)
  bob.v += bob.a * dt
  bob.phi += bob.v * dt
  t += dt
}
 
function drawGraph() {
  ctx2.lineTo(t * 20, (bob.phi % Math.PI) * 20)
  ctx2.stroke()
}
 
function draw() {
  ctx.clearRect(-w / 2, -h / 2, w, h)
  drawPendulum()
  // Если мы не в режиме перетаскивания, то качаем маятник
  if (draggin === false) {
    update()
  }
  drawGraph()
  requestAnimationFrame(draw)
}
 
draw()
</script>
</html>

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .