Как нарисовать и анимировать Деда Мороза?

"use strict";

let canvas;
// canvas.ctx, canvas.size (квадрат)

let _c, santa, ANIMATE;

/*****/

(function _namespace() {
  // canvas mini-lib
  
  _c /* GLOBAL */ = function (ctx) {
    return new ContextWrap(ctx);
  };

  _c.rotateMatrix = function (matrix, centerPoints, angle) {
    if (angle === 0) return matrix;

    var cx = centerPoints[0];
    var cy = centerPoints[1];
    var sin = Math.sin(angle * Math.PI / 180);
    var cos = Math.cos(angle * Math.PI / 180);

    for (var i = 0, len = matrix.length; i < len; i++) {
      var px = matrix[i][0];
      var py = matrix[i][1];

      matrix[i][0] = cos * (px - cx) - sin * (py - cy) + cx;
      matrix[i][1] = sin * (px - cx) + cos * (py - cy) + cy;
    }

    return matrix;
  };

  _c.rotatePoint = function (point, center, angle) {
    if (angle === 0) return point;

    var cx = center[0];
    var cy = center[1];
    var px = point[0];
    var py = point[1];

    var sin = Math.sin(angle * Math.PI / 180);
    var cos = Math.cos(angle * Math.PI / 180);

    return [
      cos * (px - cx) - sin * (py - cy) + cx,
      sin * (px - cx) + cos * (py - cy) + cy
    ];
  };

  function ContextWrap(ctx) {
    ctx.lineWidth = 1;
    this.ctx = ctx;
  }


  CreatePrototype.call(ContextWrap.prototype);

  /***/

  function CreatePrototype() {
    this.clear = function () {
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
      return this;
    };

    this.fillStyle = function (color) {
      this.ctx.fillStyle = color;
      return this;
    };

    this.path = function (matrix) {
      var ctx = this.ctx;

      ctx.beginPath();
      for (var i = 0; i < matrix.length; i++) {
        ctx.lineTo(matrix[i][0], matrix[i][1]);
      }
      ctx.closePath();
      ctx.fill();

      return this;
    };

    this.arc = function (cx, cy, r, start, end) {
      var ctx = this.ctx;
      ctx.beginPath();
      ctx.arc(cx, cy, r, start || 0, end || 2 * Math.PI);
      ctx.fill();

      return this;
    };

    this.ellipse = function (cx, cy, rx, ry, rotate, start, end) {
      var ctx = this.ctx;
      ctx.beginPath();
      ctx.ellipse(cx, cy, rx, ry, rotate || 0, start || 0, end || 2 * Math.PI);
      ctx.fill();

      return this;
    };
  };

})();


/*****/

canvas /* GLOBAL */ = (function () {

  let cnv = document.querySelector("#scene");
  let ctx = cnv.getContext("2d");
  let size = cnv.width = cnv.height = Math.min(innerWidth, innerHeight);

  let _data_ = { ctx, size };


  let timer = null;

  addEventListener("resize", function () {
    clearTimeout(timer);

    timer = setTimeout(function () {
      _data_.size = cnv.width = cnv.height = Math.min(innerWidth, innerHeight);
    }, 500);
  });


  return _data_;
})();


/*****/

function DRAW() {
  _c(canvas.ctx).clear();

  let _tmp = [santa /* , snow_maiden */];

  _tmp.forEach(char => {
    char.init_skelet(canvas);

    Object.values(char.render)
      .sort((a, b) => a.z_index - b.z_index)
      .forEach(function (obj) {
        char[obj.call](canvas, obj);
      });
  });
};


/*****/

santa = {};

santa.position = {
  // Относительные ключевые точки, домножаются на масштаб и рисуются.
  
  head: {
    dx: 0,
    dy: 0,
    r: 0.15,
  },

  body: {
    bot_x: 0.5,
    bot_y: 0.7,

    rotate: 0,
  },

  leg1: {
    dx: 1, // 0 → 1
  },

  leg2: {    
    dx: 1, // 0 → 1
  },
};

santa.skelet = null;

santa.render = {

  head: {
    z_index: 100,
    fill: "#ebba9a",
    call: "head",
  },

  body: {
    z_index: 40,
    fill: "#c11",
    call: "body",
  },

  hand: {
    z_index: 50,
    fill: "#c11",
    call: "hand",
  },

  foot: {
    z_index: 30,
    fill: "#c11",
    call: "foot",
  },

};

santa.init_skelet = function (cnv) {

  let size = cnv.size;
  let pos = santa.position;
  let skel = santa.skelet = {};


  /*** BODY */

  let b = pos.body;
  let neck_x = b.bot_x * size;
  let neck_y = b.bot_y * size - 0.2 * size;

  skel.body = _c.rotateMatrix(
    [
      [b.bot_x * size - 0.1 * size, b.bot_y * size],
      [neck_x - 0.1 * size, neck_y],
      [neck_x + 0.1 * size, neck_y],
      [b.bot_x * size + 0.1 * size, b.bot_y * size],
    ],
    [b.bot_x * size, b.bot_y * size],
    b.rotate
  );


  /*** HEAD */
  let h = pos.head;

  let head_center = _c.rotatePoint(
    [neck_x, neck_y - h.r * size],
    [b.bot_x * size, b.bot_y * size],
    b.rotate
  );

  skel.head = {
    cx: head_center[0],
    cy: head_center[1],
    r: h.r * size,
  };

  /*** EYES */
  skel.eyes = {
    "1": {
      cx: skel.head.cx - 0.04 * size,
      cy: skel.head.cy,
      rx: size * h.r * 0.25,
      ry: size * h.r * 0.35,
    },
    "2": {
      cx: skel.head.cx + 0.04 * size,
      cy: skel.head.cy,
      rx: size * h.r * 0.25,
      ry: size * h.r * 0.35,
    }
  };

  /*** NOSE */
  skel.nose = {
    cx: skel.head.cx,
    cy: skel.head.cy + 0.06 * size,
    rx: size * h.r * 0.4,
    ry: size * h.r * 0.25,
  };

  /*** BEARD */
  let hx = skel.head.cx;
  let hy = skel.head.cy;

  skel.beard = [
    [hx - size * h.r, hy - 0.06 * size],
    [hx - size * h.r * 0.8, hy],
    [hx, hy + 0.08 * size],
    [hx + size * h.r * 0.8, hy],
    [hx + size * h.r, hy - 0.06 * size],

    [hx + size * h.r, hy + 0.05 * size],
    [hx + size * h.r * 0.8, hy + 0.15 * size],
    [hx, hy + 0.25 * size],
    [hx - size * h.r * 0.8, hy + 0.15 * size],
    [hx - size * h.r, hy + 0.05 * size],
  ];

  /*** HAT_TOP */
  skel.hat_top = {
    cx: hx,
    cy: hy - 0.2 * size,
    r: size * h.r * 0.4
  };

  /*** HAT */
  skel.hat = [    
    [hx - size * h.r, hy - 0.05 * size],
    [hx - size * h.r, hy - 0.07 * size],
    [hx - size * h.r * 0.6, hy - 0.15 * size],
    [hx, hy - 0.2 * size],
    [hx + size * h.r * 0.6, hy - 0.15 * size],
    [hx + size * h.r, hy - 0.07 * size],
    [hx + size * h.r, hy - 0.05 * size],
    
    [hx + size * h.r * 0.6, hy - 0.06 * size],
    [hx - size * h.r * 0.6, hy - 0.06 * size],
  ];



  /***/

  /*** HANDS */
  //  shoulder
  let sh1_x = skel.body[1][0];
  let sh1_y = skel.body[1][1];

  skel.hand1 = [
    [sh1_x - size * 0.042, sh1_y - size * 0.08],
    [sh1_x, sh1_y],
    [sh1_x - size * 0.03, sh1_y + size * 0.05],
    [sh1_x, sh1_y + size * 0.12],
    [sh1_x - size * 0.03, sh1_y + size * 0.18],
    [sh1_x - size * 0.09, sh1_y + size * 0.05],    
  ];

  let sh2_x = skel.body[2][0];
  let sh2_y = skel.body[2][1];

  skel.hand2 = [
    [sh2_x + size * 0.042, sh2_y - size * 0.08],
    [sh2_x, sh2_y],
    [sh2_x + size * 0.03, sh2_y + size * 0.05],
    [sh2_x, sh2_y + size * 0.12],
    [sh2_x + size * 0.03, sh2_y + size * 0.18],
    [sh2_x + size * 0.09, sh2_y + size * 0.05],    
  ];

  /*** FEET */
  let leg1_dx = pos.leg1.dx * 0.05;
  let f1_x = skel.body[0][0];
  let f1_y = skel.body[0][1];

  skel.foot1 = [
    [f1_x, f1_y],
    [f1_x + size * 0.08, f1_y],
    [f1_x + size * 0.09 - size * leg1_dx, f1_y + size * 0.1],
    [f1_x + size * 0.1, f1_y + size * 0.24],
    [f1_x - size * 0.05, f1_y + size * 0.24],
    [f1_x - size * leg1_dx, f1_y + size * 0.1],
  ];

  let leg2_dx = pos.leg2.dx * 0.05;
  let f2_x = skel.body[3][0];
  let f2_y = skel.body[3][1];

  skel.foot2 = [
    [f2_x, f2_y],
    [f2_x - size * 0.08, f2_y],
    [f2_x - size * 0.09 + size * leg2_dx, f2_y + size * 0.1],
    [f2_x - size * 0.1, f2_y + size * 0.24],
    [f2_x + size * 0.05, f2_y + size * 0.24],
    [f2_x + size * leg2_dx, f2_y + size * 0.1],
  ];
};


/*****/
santa.body = function (cnv, obj) {
  _c(cnv.ctx)
    .fillStyle(obj.fill)
    .path(santa.skelet.body);
};

santa.head = function (cnv, obj) {
  let skel = santa.skelet;
  let { cx, cy, r } = skel.head;

  _c(cnv.ctx)
    .fillStyle(obj.fill)
    .arc(cx, cy, r);

  santa.beard(cnv);
  santa.eyes(cnv);
  santa.nose(cnv);
  santa.hat(cnv);
};

santa.beard = function (cnv) {
  _c(cnv.ctx)
    .fillStyle("#fff")
    .path(santa.skelet.beard);
};

santa.eyes = function (cnv) {
  let e = santa.skelet.eyes;

  _c(cnv.ctx)
    .fillStyle("#123")
    .ellipse(e[1].cx, e[1].cy, e[1].rx, e[1].ry)
    .ellipse(e[2].cx, e[2].cy, e[2].rx, e[2].ry);
};

santa.nose = function (cnv) {
  let n = santa.skelet.nose;

  _c(cnv.ctx)
    .fillStyle("#a00")
    .ellipse(n.cx, n.cy, n.rx, n.ry);
};

santa.hat = function (cnv) {
  let t = santa.skelet.hat_top;

  _c(cnv.ctx)
    .fillStyle("#fff")
    .arc(t.cx, t.cy, t.r)

    .fillStyle("#c11")
    .path(santa.skelet.hat);
};

//...

santa.hand = function (cnv) {

  _c(cnv.ctx)
    .fillStyle("#c11")
    .path(santa.skelet.hand1)
    .path(santa.skelet.hand2);
};

santa.foot = function (cnv) {
  _c(cnv.ctx)
    .fillStyle("#c11")
    .path(santa.skelet.foot1)
    .path(santa.skelet.foot2);
};


/*****/
ANIMATE /* GLOBAL */ = {

  // 1. ANIMATE.add(obj) — заворачивает obj в функию,
  // 2. Добавляет её в хранилище _fn_storage,
  // 3. На каждом animationFrame оттуда циклом вызываются все функции
  // 4. На основе данных из obj, каждая функция меняет анимируемые значения
  //    (сколько необходимо за один кадр)
    
  _unique_key: 0,
  _fn_storage: {},

  add: function (obj) {    
    this._fn_storage[obj._self = this._unique_key++] = this._get_closure_fn(obj);

    return this;
  },

  _get_closure_fn: function (obj) {
    /* obj = { 
         root: santa.position.hand,
         prop: "rotate",
         chain: [
           {to: -90, ms: 1000},
           {sleep: 1000, callback: fn},
           {to: 70, ms: 1000, callback: fn},
         ],
       } */

    /***/

    let i = 0, curr = obj.chain[i];

    let change_per_ms; // {Number} : изменение анимируемого значения за 1 мс.
    let reached_end; // {Function → return Boolean}

    _update_params();

    return function _animate(dt) {
      /*** dt {Number} : Время, прошедшее после предыдущего вызова animationFrame ***/

      if (curr._sleeping) return;
      /*** Будет прерываться, пока не пройдет curr.sleep миллисекунд ***/

      if (curr.sleep) {
        curr._sleeping = true;

        setTimeout(
          function () {
            curr._sleeping = false;
            next();
          },
          curr.sleep
        );

        return;
      }

      let newVal = obj.root[obj.prop] + change_per_ms * dt;
      if (reached_end(newVal)) {
        obj.root[obj.prop] = curr.to;
        next();
        return;
      }

      obj.root[obj.prop] = newVal;

      /***/
      function next() {
        if (curr.callback) curr.callback(obj);

        i = typeof curr.goto == "number" ? curr.goto : i + 1;

        curr = obj.chain[i];
        if (!curr) return ANIMATE.remove(obj);

        _update_params();
      }
    }

    /***/
    function _update_params() {
      if (curr.sleep) return;

      let from = curr.from || obj.root[obj.prop];

      change_per_ms = (curr.to - from) / curr.ms;
      reached_end = (from > curr.to) ?
        (newVal) => newVal <= curr.to :
        (newVal) => newVal >= curr.to;
    }
  },

  remove: function (obj) {
    delete this._fn_storage[obj._self];
  },
};


/*****/

ANIMATE.add({
  root: santa.position.leg1,
  prop: "dx",
  chain: [
    { to: -0.2, ms: 138 },
    { to: 1, ms: 276, goto: 0 },
  ],
}).add({
  root: santa.position.leg2,
  prop: "dx",
  chain: [
    { to: -0.2, ms: 138 },
    { to: 1, ms: 276, goto: 0 },
  ],
});

ANIMATE.start = function () {
  let k = 0, last_call = null;

  let loop = (time) => {
    if (k++ % 2) return requestAnimationFrame(loop); // 30 fps

    let dt = time - last_call;

    for (let fn in this._fn_storage) {
      this._fn_storage[fn](dt);
    }

    DRAW();

    last_call = time;

    requestAnimationFrame(loop);
  };

  requestAnimationFrame(function (init_time) {
    last_call = init_time;
    requestAnimationFrame(loop);
  });
};

ANIMATE.start();

* { margin: 0; padding: 0 } canvas { background-color: #ddd }

<canvas id="scene"></canvas>