Движение объекта по заданной траектории в JavaScript (кривые Безье)

Кривые Безье в javaScript и движение объекта по кривой линииСегодня решили задачу движения объекта по произвольной кривой. Нарисовал траекторию, создал набор точек при помощи http://htmlmapgenerator.ru/index.php (хотя можно было программами Adobe это реализовать или написать свой "собиратель точек"), перевел их координаты в JavaScript, в массив объектов. Чем больше точек сделать, тем точнее будут учитывать изгибы начальной траектории.

  1. var source = [43,207,49,173,73,157,106,154,145,134
  2. ,154,91,179,66,274,76,365,38,416,36,455,102,455,
  3. 142,432,179,408,196,348,188,285,182,216,194,169,
  4. 221,128,243,89,242,55,231,39,208];

Вооружился формулами кривых Безье. Здесь полезно почитать

Чтобы прочувствовать ситуацию, написал свои js-функции реализующие расчёт координат промежуточных точек и в режиме анимации их нарисовал. За бортом остался вопрос поворота объекта, то есть при движении не точки, а фигуры, надо учитывать направление движения по касательной к точке движения.

  1. function fact(n){
  2. return (n > 1)?n*fact(n-1):1;
  3. }
  4. console.log("Факториал 5 = ",fact(5));
  5.  
  6. function ni(n,i){
  7. return fact(n)/(fact(i)*fact(n-i));
  8. }
  9.  
  10. function bin(n,i,t){
  11. return ni(n,i)*Math.pow(t,i)*Math.pow(1-t,n-i);
  12. }
  13.  
  14. function bezier(t,maps){
  15. var res = {x:0,y:0}, sumX = 0, sumY = 0;
  16. for(var i = 0; i < maps.length; i++){
  17. sumX += maps[i]["x"]*bin(maps.length-1,i,t);
  18. sumY += maps[i]["y"]*bin(maps.length-1,i,t);
  19. }
  20. return {x:sumX,y:sumY};
  21. }

Как обычно, подробности можно обсудить на курсах или в закрытой группе в ВК.

Пример работы