В данном докладе рассказывается о том, как применять физику в JS без использования каких-либо библиотек или фреймворков.

1. Анимируем
объекты
с
использованием
физики
в
JavaScript
Иванова
Елена
@liveldi90
Фронтенд
разработчик
Astroshock
25
июня
2015

2. СОДЕРЖАНИЕ
Конструкторы
Движение
Сила
трения
Ускорение
и
прыжки
Пружины
и
колебания
Анимация

3. АНИМАЦИЯ

4. 4
/
42

5. 5
/
42

6. setTimeout(func,
1000/fps);
setInterval(func,
1000/fps);
requestAnimaponFrame(func);
6
/
42

7. 6
/
42
setTimeout(func,
1000/fps);
setInterval(func,
1000/fps);
requestAnimaponFrame(func);

8. var
t0
=
0,
dt;
var
kSmothing
=
0.001;
funcpon
onTimer()
{
var
t1
=
new
Date().getTime();
dt
=
t1
—
t0;
t0
=
t1;
//
Меняем
кадры
}
7
/
42

9. КОНСТРУКТОРЫ

10. ОБЪЕКТ
—
параметры
var
Obj
=
funcpon
(ops)
{
this.$el
//
Доступ
к
элементу
this.mass
//
Масса
this.x
//
Позиция
x,
y
this.y
this.vx
//
Cкорость
по
x,
y
this.vy
…
};
9
/
42

11. ОБЪЕКТ
—
методы
Obj.prototype.pos
Obj.prototype.velo
10
/
42

12. ВЕКТОР
—
параметры
var
Vector
=
funcpon
(x,
y)
{
this.x
=
x;
this.y
=
y;
};
11
/
42

13. ВЕКТОР
—
методы
Vector.prototype.length()
Vector.prototype.add(vec)
Vector.prototype.subtract(vec)
Vector.prototype.mulpply(k)
Vector.prototype.divide(k)
12
/
42

14. ВЕКТОР
—
методы
Vector.prototype.addScaled
=
funcpon
(vec,
k)
{
return
new
Vector(
this.x
+
k
*
vec.x,
this.y
+
k
*
vec.y);
};
13
/
42

15. ДВИЖЕНИЕ

16. 15
/
42

17. 16
/
42

18. obj.pos
=
new
Vector(10,
0);
obj.velo
=
new
Vector(60,
0);
17
/
42

19. obj.pos
=
new
Vector(10,
0);
obj.velo
=
new
Vector(60,
0);
funcpon
move()
{
obj.pos
=
obj.pos.addScaled(obj.velo,
dt);
}
17
/
42

20. СИЛА
ТРЕНИЯ

21. КИНЕТИЧЕСКАЯ
ЭНЕРГИЯ
19
/
42

22. МОЩНОСТЬ
СИЛА
ТРЕНИЯ
20
/
42

23. ИЗМЕНЕНИЕ
КИНЕТИЧЕСКОЙ
ЭНЕРГИИ
21
/
42

24. var
displ
=
obj.pos.subtract(obj.pos0);
obj.velo
=
displ.divide((t1
—
t0)
*
kSmoothing);
ke
=
new
Vector(
0.5
*
obj.mass
*
obj.vx
*
obj.vx,
0.5
*
obj.mass
*
obj.vy
*
obj.vy);
НАЧАЛЬНЫЕ
РАСЧЕТЫ
22
/
42

25. var
powerLoss
=
new
Vector(
powerLossFactor
*
obj.vx
*
obj.vx
*
dt,
powerLossFactor
*
obj.vy
*
obj.vy
*
dt);
ke
=
ke.subtract(powerLoss);
ОБНОВЛЕНИЕ
КИНЕТИЧЕСКОЙ
ЭНЕРГИИ
23
/
42

26. obj.velo
=
new
Vector(
Math.sqrt(2
*
ke.x
/
obj.mass),
Math.sqrt(2
*
ke.y
/
obj.mass)
);
ОБНОВЛЕНИЕ
СКОРОСТИ
24
/
42
ОБНОВЛЕНИЕ
ПОЗИЦИИ
obj.pos
=
obj.pos.addScaled(obj.velo,
dt);

27. 25
/
42

28. ДОБАВЛЕНИЕ
МОЩНОСТИ
if
(applyThrust)
{
ke
=
ke.add(new
Vector(
powerApplied
*
dt,
powerApplied
*
dt)
);
}
26
/
42

29. УСКОРЕНИЕ
И
ПРЫЖКИ

30. Сила
сопротивления
(D)
Гравитация
(W)
УСКОРЕНИЕ
28
/
42

31. УСКОРЕНИЕ
29
/
42

32. 30
/
42
obj.force
=
new
Vector(0,
obj.mass
*
g
—
k
*
obj.vy);
obj.acc
=
force.divide(obj.mass);
РАСЧЕТ
СИЛЫ
ОБНОВЛЕНИЕ
УСКОРЕНИЯ

33. 31
/
42
obj.velo
=
obj.velo.addScaled(obj.acc,
dt);
obj.pos
=
obj.pos.addScaled(obj.velo,
dt);
ОБНОВЛЕНИЕ
СКОРОСТИ
ОБНОВЛЕНИЕ
ПОЗИЦИИ

34. УДАР
О
ПОВЕРХНОСТЬ
32
/
42

35. 33
/
42
ЗАЛИПАНИЯ

36. 34
/
42
floor
=
new
Vector(0,
winH
—
floorH);
var
displ
=
floor.subtract(obj.pos);
if
(displ.y
—
obj.radius
<=
0)
{
obj.y
=
floor.y
—
obj.radius;
obj.vy
*=
—vfac;
}
ПРОВЕРКА
УДАРА

37. 34
/
42
floor
=
new
Vector(0,
winH
—
floorH);
var
displ
=
floor.subtract(obj.pos);
if
(displ.y
—
obj.radius
<=
0)
{
obj.y
=
floor.y
—
obj.radius;
obj.vy
*=
—vfac;
}
ПРОВЕРКА
УДАРА

38. 34
/
42
floor
=
new
Vector(0,
winH
—
floorH);
var
displ
=
floor.subtract(obj.pos);
if
(displ.y
—
obj.radius
<=
0)
{
obj.y
=
floor.y
—
obj.radius;
obj.vy
*=
—vfac;
}
ПРОВЕРКА
УДАРА

39. ПРУЖИНЫ
И
КОЛЕБАНИЯ

40. 36
/
42

41. 37
/
42
ПРОСТОЕ
ГАРМОНИЧЕСКОЕ
КОЛЕБАНИЕ
Закон
Роберта
Гука

42. Закон
Гука
Второй
закон
Ньютона
УСКОРЕНИЕ
38
/
42

43. 39
/
42
var
displ
=
obj.pos.subtract(center);
var
restoring
=
displ.mulpply(—kSpring);
var
damping
=
obj.velo.mulpply(—kDamping);
obj.force
=
Vector.add([restoring,
damping]);
РАСЧЕТ
СИЛЫ

44. 40
/
42

45. 41
/
42
cursorForce
=
new
Vector(0,
0);
if
(cursorPos.x
>=
0)
{
displCursor
=
obj.pos.subtract(cursorPos);
cursorDist
=
displCursor.length();
if
(cursorDist
>
1
&&
cursorDist
<=
cursorForceZoomed)
{
var
func
=
cursorForceZoomed
/
(cursorDist
*
cursorDist
)
cursorForce
=
displCursor.mulpply(func);
}
}
РАСЧЕТ
СИЛЫ
КУРСОРА

46. 41
/
42
cursorForce
=
new
Vector(0,
0);
if
(cursorPos.x
>=
0)
{
displCursor
=
obj.pos.subtract(cursorPos);
cursorDist
=
displCursor.length();
if
(cursorDist
>
1
&&
cursorDist
<=
cursorForceZoomed)
{
var
func
=
cursorForceZoomed
/
(cursorDist
*
cursorDist
)
cursorForce
=
displCursor.mulpply(func);
}
}
РАСЧЕТ
СИЛЫ
КУРСОРА

47. 41
/
42
cursorForce
=
new
Vector(0,
0);
if
(cursorPos.x
>=
0)
{
displCursor
=
obj.pos.subtract(cursorPos);
cursorDist
=
displCursor.length();
if
(cursorDist
>
1
&&
cursorDist
<=
cursorForceZoomed)
{
var
func
=
cursorForceZoomed
/
(cursorDist
*
cursorDist
)
cursorForce
=
displCursor.mulpply(func);
}
}
РАСЧЕТ
СИЛЫ
КУРСОРА

48. 41
/
42
cursorForce
=
new
Vector(0,
0);
if
(cursorPos.x
>=
0)
{
displCursor
=
obj.pos.subtract(cursorPos);
cursorDist
=
displCursor.length();
if
(cursorDist
>
1
&&
cursorDist
<=
cursorForceZoomed)
{
var
func
=
cursorForceZoomed
/
(cursorDist
*
cursorDist
)
cursorForce
=
displCursor.mulpply(func);
}
}
РАСЧЕТ
СИЛЫ
КУРСОРА

49. cursorForce
=
new
Vector(0,
0);
if
(cursorPos.x
>=
0)
{
displCursor
=
obj.pos.subtract(cursorPos);
cursorDist
=
displCursor.length();
if
(cursorDist
>
1
&&
cursorDist
<=
cursorForceZoomed)
{
var
func
=
cursorForceZoomed
/
(cursorDist
*
cursorDist
)
cursorForce
=
displCursor.mulpply(func);
}
}
41
/
42
РАСЧЕТ
СИЛЫ
КУРСОРА

50. Иванова
Елена
@liveldi90
physicsdemos.liveldi.ru