SlideShare une entreprise Scribd logo
1  sur  53
Télécharger pour lire hors ligne
Анимируем	
  объекты	
  	
  
с	
  использованием	
  физики	
  	
  
в	
  JavaScript	
  
Иванова	
  Елена	
  	
  
@liveldi90	
  
Фронтенд	
  разработчик	
  
Astroshock	
  
25	
  июня	
  2015	
  
СОДЕРЖАНИЕ	
  
Конструкторы	
  
Движение	
  
Сила	
  трения	
  
Ускорение	
  и	
  прыжки	
  
Пружины	
  и	
  колебания	
  
Анимация	
  
АНИМАЦИЯ	
  
4	
  /	
  42	
  
5	
  /	
  42	
  
setTimeout(func,	
  1000/fps);	
  
setInterval(func,	
  1000/fps);	
  
requestAnimaponFrame(func);	
  
6	
  /	
  42	
  
6	
  /	
  42	
  
setTimeout(func,	
  1000/fps);	
  
setInterval(func,	
  1000/fps);	
  
requestAnimaponFrame(func);	
  
var	
  t0	
  =	
  0,	
  dt;	
  
	
  
funcpon	
  onTimer()	
  {	
  
	
  	
  	
  	
  	
  	
  var	
  t1	
  =	
  new	
  Date().getTime();	
  
	
  	
  	
  	
  	
  	
  dt	
  =	
  t1	
  —	
  t0;	
  
	
  	
  	
  	
  	
  	
  t0	
  =	
  t1;	
  
	
  	
  	
  //	
  Меняем	
  кадры	
  
}	
  
7	
  /	
  42	
  
КОНСТРУКТОРЫ	
  
ОБЪЕКТ	
  —	
  параметры	
  
var	
  Obj	
  =	
  funcpon	
  (ops)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.$el	
  	
  	
  	
  	
  	
  //	
  Доступ	
  к	
  элементу	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.mass	
  	
  //	
  Масса	
  
	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.x	
  	
  	
  	
  	
  	
  	
  	
  	
  //	
  Позиция	
  x,	
  y	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.y	
  
	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.vx	
  	
  	
  	
  	
  	
  	
  //	
  Cкорость	
  по	
  x,	
  y	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.vy	
  
	
   	
   	
  …	
  };	
  
9	
  /	
  42	
  
ОБЪЕКТ	
  —	
  методы	
  	
  
Obj.prototype.pos	
  	
  
Obj.prototype.velo	
  
10	
  /	
  42	
  
ВЕКТОР	
  —	
  параметры	
  
var	
  Vector	
  =	
  funcpon	
  (x,	
  y)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  this.x	
  =	
  x;	
  
	
  	
  	
  	
  	
  	
  	
  this.y	
  =	
  y;	
  
};	
  
11	
  /	
  42	
  
ВЕКТОР	
  —	
  методы	
  
Vector.prototype.length()	
  
Vector.prototype.add(vec)	
  
Vector.prototype.subtract(vec)	
  
Vector.prototype.mulpply(k)	
  
Vector.prototype.divide(k)	
  	
  	
  
12	
  /	
  42	
  
ВЕКТОР	
  —	
  методы	
  
Vector.prototype.addScaled	
  =	
  	
  
	
  funcpon	
  (vec,	
  k)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
   	
  return	
  new	
  Vector(	
  
	
   	
   	
   	
   	
  this.x	
  +	
  k	
  *	
  vec.x,	
  	
  
	
   	
   	
   	
   	
   	
  this.y	
  +	
  k	
  *	
  vec.y);	
  
	
  };	
  
13	
  /	
  42	
  
ДВИЖЕНИЕ	
  
15	
  /	
  42	
  
16	
  /	
  42	
  
obj.pos	
  =	
  new	
  Vector(10,	
  0);	
  
obj.velo	
  =	
  new	
  Vector(60,	
  0);	
  
17	
  /	
  42	
  
obj.pos	
  =	
  new	
  Vector(10,	
  0);	
  
obj.velo	
  =	
  new	
  Vector(60,	
  0);	
  
	
  
funcpon	
  move()	
  {	
  
	
  obj.pos	
  =	
  obj.pos.addScaled(obj.velo,	
  dt);	
  
}	
  
17	
  /	
  42	
  
СИЛА	
  ТРЕНИЯ	
  
КИНЕТИЧЕСКАЯ	
  ЭНЕРГИЯ	
  
19	
  /	
  42	
  
20	
  /	
  42	
  
МОЩНОСТЬ	
  
МОЩНОСТЬ	
  
СИЛА	
  ТРЕНИЯ	
  
20	
  /	
  42	
  
МОЩНОСТЬ	
  
СИЛА	
  ТРЕНИЯ	
  
20	
  /	
  42	
  
ИЗМЕНЕНИЕ	
  КИНЕТИЧЕСКОЙ	
  
ЭНЕРГИИ	
  
21	
  /	
  42	
  
ИЗМЕНЕНИЕ	
  КИНЕТИЧЕСКОЙ	
  
ЭНЕРГИИ	
  
21	
  /	
  42	
  
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	
  
var	
  powerLoss	
  =	
  new	
  Vector(	
  
	
   	
   	
   	
  powerLossFactor	
  *	
  obj.vx	
  *	
  obj.vx	
  *	
  dt,	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  powerLossFactor	
  *	
  obj.vy	
  *	
  obj.vy	
  *	
  dt);	
  
	
  
ke	
  =	
  ke.subtract(powerLoss);	
  
ОБНОВЛЕНИЕ	
  КИНЕТИЧЕСКОЙ	
  
ЭНЕРГИИ	
  
23	
  /	
  42	
  
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);	
  
25	
  /	
  42	
  
ДОБАВЛЕНИЕ	
  МОЩНОСТИ	
  
if	
  (applyThrust)	
  {	
  
	
  	
  	
  	
  	
  ke	
  =	
  ke.add(new	
  Vector(	
  
	
   	
   	
   	
  	
   	
   	
  powerApplied	
  *	
  dt,	
  	
  
	
   	
   	
   	
  	
   	
   	
  powerApplied	
  *	
  dt)	
  
	
   	
   	
   	
   	
  );	
  	
  	
  	
  	
  	
  	
  	
  	
  
}	
  
26	
  /	
  42	
  
УСКОРЕНИЕ	
  	
  
И	
  ПРЫЖКИ	
  
Сила	
  	
  
сопротивления	
  (D)	
  
Гравитация	
  (W)	
  
УСКОРЕНИЕ	
  
28	
  /	
  42	
  
УСКОРЕНИЕ	
  
29	
  /	
  42	
  
30	
  /	
  42	
  
obj.force	
  =	
  new	
  Vector(0,	
  obj.mass	
  *	
  g	
  —	
  k	
  *	
  obj.vy);	
  
obj.acc	
  =	
  force.divide(obj.mass);	
  
РАСЧЕТ	
  СИЛЫ	
  
ОБНОВЛЕНИЕ	
  УСКОРЕНИЯ	
  
31	
  /	
  42	
  
obj.velo	
  =	
  obj.velo.addScaled(obj.acc,	
  dt);	
  
obj.pos	
  =	
  obj.pos.addScaled(obj.velo,	
  dt);	
  
ОБНОВЛЕНИЕ	
  СКОРОСТИ	
  
ОБНОВЛЕНИЕ	
  ПОЗИЦИИ	
  
УДАР	
  О	
  ПОВЕРХНОСТЬ	
  
32	
  /	
  42	
  
33	
  /	
  42	
  
ЗАЛИПАНИЯ	
  
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;	
  
}	
  
	
  
ПРОВЕРКА	
  УДАРА	
  
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;	
  
}	
  
	
  
ПРОВЕРКА	
  УДАРА	
  
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;	
  
}	
  
	
  
ПРОВЕРКА	
  УДАРА	
  
ПРУЖИНЫ	
  	
  
И	
  КОЛЕБАНИЯ	
  
36	
  /	
  42	
  
37	
  /	
  42	
  
ПРОСТОЕ	
  ГАРМОНИЧЕСКОЕ	
  
КОЛЕБАНИЕ	
  
Закон	
  Роберта	
  Гука	
  
Закон	
  Гука	
   Второй	
  закон	
  Ньютона	
  
УСКОРЕНИЕ	
  
38	
  /	
  42	
  
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]);	
  
РАСЧЕТ	
  СИЛЫ	
  
40	
  /	
  42	
  
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);	
  
	
  	
  	
  	
  	
  	
  	
  }	
  
}	
  
РАСЧЕТ	
  СИЛЫ	
  КУРСОРА	
  
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);	
  
	
  	
  	
  	
  	
  	
  	
  }	
  
}	
  
РАСЧЕТ	
  СИЛЫ	
  КУРСОРА	
  
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);	
  
	
  	
  	
  	
  	
  	
  	
  }	
  
}	
  
РАСЧЕТ	
  СИЛЫ	
  КУРСОРА	
  
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);	
  
	
  	
  	
  	
  	
  	
  	
  }	
  
}	
  
РАСЧЕТ	
  СИЛЫ	
  КУРСОРА	
  
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	
  
РАСЧЕТ	
  СИЛЫ	
  КУРСОРА	
  
Иванова	
  Елена	
  	
  
@liveldi90	
  
	
  
physicsdemos.liveldi.ru	
  

Contenu connexe

Tendances

Семинар 4. Многопоточное программирование на OpenMP (часть 4)
Семинар 4. Многопоточное программирование на OpenMP (часть 4)Семинар 4. Многопоточное программирование на OpenMP (часть 4)
Семинар 4. Многопоточное программирование на OpenMP (часть 4)Mikhail Kurnosov
 
Векторизация кода (семинар 2)
Векторизация кода (семинар 2)Векторизация кода (семинар 2)
Векторизация кода (семинар 2)Mikhail Kurnosov
 
Подобедов: Абстрактный Детерминизм
Подобедов: Абстрактный ДетерминизмПодобедов: Абстрактный Детерминизм
Подобедов: Абстрактный ДетерминизмAleximos
 
Семинар 2. Многопоточное программирование на OpenMP (часть 2)
Семинар 2. Многопоточное программирование на OpenMP (часть 2)Семинар 2. Многопоточное программирование на OpenMP (часть 2)
Семинар 2. Многопоточное программирование на OpenMP (часть 2)Mikhail Kurnosov
 
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"Nikolay Grebenshikov
 
Семинар 7. Многопоточное программирование на OpenMP (часть 7)
Семинар 7. Многопоточное программирование на OpenMP (часть 7)Семинар 7. Многопоточное программирование на OpenMP (часть 7)
Семинар 7. Многопоточное программирование на OpenMP (часть 7)Mikhail Kurnosov
 
Векторизация кода (семинар 3)
Векторизация кода (семинар 3)Векторизация кода (семинар 3)
Векторизация кода (семинар 3)Mikhail Kurnosov
 
Лекция 2: Абстрактные типы данных. Алгоритмы сортировки
Лекция 2: Абстрактные типы данных. Алгоритмы сортировкиЛекция 2: Абстрактные типы данных. Алгоритмы сортировки
Лекция 2: Абстрактные типы данных. Алгоритмы сортировкиMikhail Kurnosov
 
Школа-студия разработки приложений для iOS. Лекция 1. Objective-C
Школа-студия разработки приложений для iOS. Лекция 1. Objective-CШкола-студия разработки приложений для iOS. Лекция 1. Objective-C
Школа-студия разработки приложений для iOS. Лекция 1. Objective-CГлеб Тарасов
 
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ  ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ  ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...ITMO University
 
Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур
 Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур  Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур
Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур it-people
 
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...Nikolay Grebenshikov
 
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10Mikhail Kurnosov
 
C# Desktop. Занятие 03.
C# Desktop. Занятие 03.C# Desktop. Занятие 03.
C# Desktop. Занятие 03.Igor Shkulipa
 

Tendances (20)

Семинар 4. Многопоточное программирование на OpenMP (часть 4)
Семинар 4. Многопоточное программирование на OpenMP (часть 4)Семинар 4. Многопоточное программирование на OpenMP (часть 4)
Семинар 4. Многопоточное программирование на OpenMP (часть 4)
 
Векторизация кода (семинар 2)
Векторизация кода (семинар 2)Векторизация кода (семинар 2)
Векторизация кода (семинар 2)
 
Подобедов: Абстрактный Детерминизм
Подобедов: Абстрактный ДетерминизмПодобедов: Абстрактный Детерминизм
Подобедов: Абстрактный Детерминизм
 
Метод отдельных тел
Метод отдельных телМетод отдельных тел
Метод отдельных тел
 
Семинар 2. Многопоточное программирование на OpenMP (часть 2)
Семинар 2. Многопоточное программирование на OpenMP (часть 2)Семинар 2. Многопоточное программирование на OpenMP (часть 2)
Семинар 2. Многопоточное программирование на OpenMP (часть 2)
 
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"
Лекция №16. Поиск подстрок. Предмет "Структуры и алгоритмы обработки данных"
 
Семинар 7. Многопоточное программирование на OpenMP (часть 7)
Семинар 7. Многопоточное программирование на OpenMP (часть 7)Семинар 7. Многопоточное программирование на OpenMP (часть 7)
Семинар 7. Многопоточное программирование на OpenMP (часть 7)
 
Векторизация кода (семинар 3)
Векторизация кода (семинар 3)Векторизация кода (семинар 3)
Векторизация кода (семинар 3)
 
Лекция 2: Абстрактные типы данных. Алгоритмы сортировки
Лекция 2: Абстрактные типы данных. Алгоритмы сортировкиЛекция 2: Абстрактные типы данных. Алгоритмы сортировки
Лекция 2: Абстрактные типы данных. Алгоритмы сортировки
 
Generics
GenericsGenerics
Generics
 
лекция10
лекция10лекция10
лекция10
 
Школа-студия разработки приложений для iOS. Лекция 1. Objective-C
Школа-студия разработки приложений для iOS. Лекция 1. Objective-CШкола-студия разработки приложений для iOS. Лекция 1. Objective-C
Школа-студия разработки приложений для iOS. Лекция 1. Objective-C
 
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ  ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ  ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...
ПРИМЕНЕНИЕ ДИСКРЕТНОГО КОСИНУСНОГО ПРЕОБРАЗОВАНИЯ ДЛЯ ПОСТРОЕНИЯ ГОЛОГРАММЫ ...
 
Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур
 Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур  Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур
Кодогенерация на службе оптимизации, Игорь Чевдарь, СКБ Контур
 
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...
Лекция №14. Графы: кратчайшие пути и максимальные потоки. Предмет "Структуры ...
 
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10
Лекция 12 (часть 2): Языки программирования семейства PGAS: IBM X10
 
Основы SciPy
Основы SciPyОсновы SciPy
Основы SciPy
 
C# Desktop. Занятие 03.
C# Desktop. Занятие 03.C# Desktop. Занятие 03.
C# Desktop. Занятие 03.
 
Основы NumPy
Основы NumPyОсновы NumPy
Основы NumPy
 
fiz-mat
fiz-matfiz-mat
fiz-mat
 

Plus de MoscowJS

Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionАлександр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionMoscowJS
 
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public APIВиктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public APIMoscowJS
 
Favicon на стероидах
Favicon на стероидахFavicon на стероидах
Favicon на стероидахMoscowJS
 
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложенийE2E-тестирование мобильных приложений
E2E-тестирование мобильных приложенийMoscowJS
 
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkeyReliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkeyMoscowJS
 
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA FrameworkBasis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA FrameworkMoscowJS
 
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31MoscowJS
 
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31MoscowJS
 
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31MoscowJS
 
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31MoscowJS
 
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33MoscowJS
 
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33MoscowJS
 
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33MoscowJS
 
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...MoscowJS
 
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
 
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29MoscowJS
 
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29MoscowJS
 
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29MoscowJS
 
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28MoscowJS
 
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27MoscowJS
 

Plus de MoscowJS (20)

Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionАлександр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
 
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public APIВиктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
 
Favicon на стероидах
Favicon на стероидахFavicon на стероидах
Favicon на стероидах
 
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложенийE2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
 
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkeyReliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
 
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA FrameworkBasis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
 
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
 
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
 
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
 
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
 
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
 
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
 
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
 
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
 
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
 
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
 
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
 
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
 
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
 
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
 

"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, MoscowJS 23

  • 1. Анимируем  объекты     с  использованием  физики     в  JavaScript   Иванова  Елена     @liveldi90   Фронтенд  разработчик   Astroshock   25  июня  2015  
  • 2. СОДЕРЖАНИЕ   Конструкторы   Движение   Сила  трения   Ускорение  и  прыжки   Пружины  и  колебания   Анимация  
  • 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;     funcpon  onTimer()  {              var  t1  =  new  Date().getTime();              dt  =  t1  —  t0;              t0  =  t1;        //  Меняем  кадры   }   7  /  42  
  • 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  
  • 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  
  • 22. 20  /  42   МОЩНОСТЬ  
  • 27. 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  
  • 28. var  powerLoss  =  new  Vector(          powerLossFactor  *  obj.vx  *  obj.vx  *  dt,                                            powerLossFactor  *  obj.vy  *  obj.vy  *  dt);     ke  =  ke.subtract(powerLoss);   ОБНОВЛЕНИЕ  КИНЕТИЧЕСКОЙ   ЭНЕРГИИ   23  /  42  
  • 29. 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);  
  • 31. ДОБАВЛЕНИЕ  МОЩНОСТИ   if  (applyThrust)  {            ke  =  ke.add(new  Vector(                powerApplied  *  dt,                  powerApplied  *  dt)            );                   }   26  /  42  
  • 32. УСКОРЕНИЕ     И  ПРЫЖКИ  
  • 33. Сила     сопротивления  (D)   Гравитация  (W)   УСКОРЕНИЕ   28  /  42  
  • 35. 30  /  42   obj.force  =  new  Vector(0,  obj.mass  *  g  —  k  *  obj.vy);   obj.acc  =  force.divide(obj.mass);   РАСЧЕТ  СИЛЫ   ОБНОВЛЕНИЕ  УСКОРЕНИЯ  
  • 36. 31  /  42   obj.velo  =  obj.velo.addScaled(obj.acc,  dt);   obj.pos  =  obj.pos.addScaled(obj.velo,  dt);   ОБНОВЛЕНИЕ  СКОРОСТИ   ОБНОВЛЕНИЕ  ПОЗИЦИИ  
  • 38. 33  /  42   ЗАЛИПАНИЯ  
  • 39. 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;   }     ПРОВЕРКА  УДАРА  
  • 40. 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;   }     ПРОВЕРКА  УДАРА  
  • 41. 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;   }     ПРОВЕРКА  УДАРА  
  • 42. ПРУЖИНЫ     И  КОЛЕБАНИЯ  
  • 44. 37  /  42   ПРОСТОЕ  ГАРМОНИЧЕСКОЕ   КОЛЕБАНИЕ   Закон  Роберта  Гука  
  • 45. Закон  Гука   Второй  закон  Ньютона   УСКОРЕНИЕ   38  /  42  
  • 46. 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]);   РАСЧЕТ  СИЛЫ  
  • 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. 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);                }   }   РАСЧЕТ  СИЛЫ  КУРСОРА  
  • 50. 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);                }   }   РАСЧЕТ  СИЛЫ  КУРСОРА  
  • 51. 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);                }   }   РАСЧЕТ  СИЛЫ  КУРСОРА  
  • 52. 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   РАСЧЕТ  СИЛЫ  КУРСОРА  
  • 53. Иванова  Елена     @liveldi90     physicsdemos.liveldi.ru