Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Анимируем	
  объекты	
  	
  
с	
  использованием	
  физики	
  	
  
в	
  JavaScript	
  
Иванова	
  Елена	
  	
  
@liveldi90...
СОДЕРЖАНИЕ	
  
Конструкторы	
  
Движение	
  
Сила	
  трения	
  
Ускорение	
  и	
  прыжки	
  
Пружины	
  и	
  колебания	
  ...
АНИМАЦИЯ	
  
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()...
КОНСТРУКТОРЫ	
  
ОБЪЕКТ	
  —	
  параметры	
  
var	
  Obj	
  =	
  funcpon	
  (ops)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  this.$el	
  	
  ...
ОБЪЕКТ	
  —	
  методы	
  	
  
Obj.prototype.pos	
  	
  
Obj.prototype.velo	
  
10	
  /	
  42	
  
ВЕКТОР	
  —	
  параметры	
  
var	
  Vector	
  =	
  funcpon	
  (x,	
  y)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  this.x	
  =	
...
ВЕКТОР	
  —	
  методы	
  
Vector.prototype.length()	
  
Vector.prototype.add(vec)	
  
Vector.prototype.subtract(vec)	
  
V...
ВЕКТОР	
  —	
  методы	
  
Vector.prototype.addScaled	
  =	
  	
  
	
  funcpon	
  (vec,	
  k)	
  {	
  
	
  	
  	
  	
  	
  ...
ДВИЖЕНИЕ	
  
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()	
  {	
  ...
СИЛА	
  ТРЕНИЯ	
  
КИНЕТИЧЕСКАЯ	
  ЭНЕРГИЯ	
  
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);	
 ...
var	
  powerLoss	
  =	
  new	
  Vector(	
  
	
   	
   	
   	
  powerLossFactor	
  *	
  obj.vx	
  *	
  obj.vx	
  *	
  dt,	
...
obj.velo	
  =	
  new	
  Vector(	
  
	
   	
  Math.sqrt(2	
  *	
  ke.x	
  /	
  obj.mass),	
  	
  
	
   	
  Math.sqrt(2	
  *...
25	
  /	
  42	
  
ДОБАВЛЕНИЕ	
  МОЩНОСТИ	
  
if	
  (applyThrust)	
  {	
  
	
  	
  	
  	
  	
  ke	
  =	
  ke.add(new	
  Vector(	
  
	
   	
  ...
УСКОРЕНИЕ	
  	
  
И	
  ПРЫЖКИ	
  
Сила	
  	
  
сопротивления	
  (D)	
  
Гравитация	
  (W)	
  
УСКОРЕНИЕ	
  
28	
  /	
  42	
  
УСКОРЕНИЕ	
  
29	
  /	
  42	
  
30	
  /	
  42	
  
obj.force	
  =	
  new	
  Vector(0,	
  obj.mass	
  *	
  g	
  —	
  k	
  *	
  obj.vy);	
  
obj.acc	
  =	
  ...
31	
  /	
  42	
  
obj.velo	
  =	
  obj.velo.addScaled(obj.acc,	
  dt);	
  
obj.pos	
  =	
  obj.pos.addScaled(obj.velo,	
  ...
УДАР	
  О	
  ПОВЕРХНОСТЬ	
  
32	
  /	
  42	
  
33	
  /	
  42	
  
ЗАЛИПАНИЯ	
  
34	
  /	
  42	
  
floor	
  =	
  new	
  Vector(0,	
  winH	
  —	
  floorH);	
  
	
  
var	
  displ	
  =	
  floor.subtract(obj.po...
34	
  /	
  42	
  
floor	
  =	
  new	
  Vector(0,	
  winH	
  —	
  floorH);	
  
	
  
var	
  displ	
  =	
  floor.subtract(obj.po...
34	
  /	
  42	
  
floor	
  =	
  new	
  Vector(0,	
  winH	
  —	
  floorH);	
  
	
  
var	
  displ	
  =	
  floor.subtract(obj.po...
ПРУЖИНЫ	
  	
  
И	
  КОЛЕБАНИЯ	
  
36	
  /	
  42	
  
37	
  /	
  42	
  
ПРОСТОЕ	
  ГАРМОНИЧЕСКОЕ	
  
КОЛЕБАНИЕ	
  
Закон	
  Роберта	
  Гука	
  
Закон	
  Гука	
   Второй	
  закон	
  Ньютона	
  
УСКОРЕНИЕ	
  
38	
  /	
  42	
  
39	
  /	
  42	
  
var	
  displ	
  =	
  obj.pos.subtract(center);	
  
var	
  restoring	
  =	
  displ.mulpply(—kSpring);	
  ...
40	
  /	
  42	
  
41	
  /	
  42	
  
cursorForce	
  =	
  new	
  Vector(0,	
  0);	
  
	
  
if	
  (cursorPos.x	
  >=	
  0)	
  {	
  
	
  displCu...
41	
  /	
  42	
  
cursorForce	
  =	
  new	
  Vector(0,	
  0);	
  
	
  
if	
  (cursorPos.x	
  >=	
  0)	
  {	
  
	
  displCu...
41	
  /	
  42	
  
cursorForce	
  =	
  new	
  Vector(0,	
  0);	
  
	
  
if	
  (cursorPos.x	
  >=	
  0)	
  {	
  
	
  displCu...
41	
  /	
  42	
  
cursorForce	
  =	
  new	
  Vector(0,	
  0);	
  
	
  
if	
  (cursorPos.x	
  >=	
  0)	
  {	
  
	
  displCu...
cursorForce	
  =	
  new	
  Vector(0,	
  0);	
  
	
  
if	
  (cursorPos.x	
  >=	
  0)	
  {	
  
	
  displCursor	
  =	
  obj.p...
Иванова	
  Елена	
  	
  
@liveldi90	
  
	
  
physicsdemos.liveldi.ru	
  
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Александр Русаков - TypeScript 2 in action
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

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

    Oct. 11, 2016
  • kuvaleksandr

    Jan. 5, 2016
  • brodybroderix

    Jul. 30, 2015

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

Views

Total views

1,212

On Slideshare

0

From embeds

0

Number of embeds

15

Actions

Downloads

10

Shares

0

Comments

0

Likes

3

×