Экстраполировать разделенную кубическую безье на 1,1

первая половина - это легкость, которая является кубической-безье (.42,0,1,1) и графически http://cubic-bezier.com/#.42,0,1,1

Пожалуйста, проверьте это предположение. (исходные конечные точки кривых — 0,0 и 1,1 в css функция синхронизации) Первая половина кривой Безье [0,0, .42,0, .58,1, 1,1] не должна быть [0,0 .42,0, 1,1 , 1,1] Конечные точки правильные (после масштабирования до 1,1), но вы потеряли там непрерывность.

Значения, возвращаемые алгоритмом Майка, верны.

Попробуйте эту визуализацию, чтобы понять, почему ваше предположение может быть неверным.

Алгоритм, который вы используете для разделения, является хорошо известным алгоритмом, называемым алгоритмом де Кастельжо. Этот метод можно геометрически выразить очень просто. Посмотрите анимированные визуализации того, как возможно такое разделение в произвольной точке https://en.wikipedia.org/wiki/B%C3%A9zier_curve.

Однако вскоре вы можете столкнуться с проблемой, пытаясь правильно масштабировать разделенную часть кривой Безье, чтобы она соответствовала единичному квадрату с фиксированными конечными точками 0,0 и 1,1. Это, вероятно, вы можете легко попробовать на бумаге. Вероятно, самый простой способ - просто линейно масштабировать контрольные точки Безье, хотя в большинстве случаев вы получите сжатую кривую.

Я создал модифицированную версию функции разбиения Майка, чтобы она соответствовала единичному квадрату :) Она использует указатели hkrish для нормализации координат.

Просто установите для параметра fitUnitCell значение true. :)

function splitCubicBezier(options) {
  var z = options.z,
      cz = z-1,
      z2 = z*z,
      cz2 = cz*cz,
      z3 = z2*z,
      cz3 = cz2*cz,
      x = options.x,
      y = options.y;

  var left = [
    x[0],
    y[0],
    z*x[1] - cz*x[0], 
    z*y[1] - cz*y[0], 
    z2*x[2] - 2*z*cz*x[1] + cz2*x[0],
    z2*y[2] - 2*z*cz*y[1] + cz2*y[0],
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0]];

  var right = [
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0],
                    z2*x[3] - 2*z*cz*x[2] + cz2*x[1],
                    z2*y[3] - 2*z*cz*y[2] + cz2*y[1],
                                    z*x[3] - cz*x[2], 
                                    z*y[3] - cz*y[2], 
                                                x[3],
                                                y[3]];

  if (options.fitUnitSquare) {
    return {
      left: left.map(function(el, i) {
        if (i % 2 == 0) {
          //return el * (1 / left[6])
          var Xmin = left[0];
          var Xmax = left[6]; //should be 1
          var Sx = 1 / (Xmax - Xmin);
          return (el - Xmin) * Sx;
        } else {
          //return el * (1 / left[7])
          var Ymin = left[1];
          var Ymax = left[7]; //should be 1
          var Sy = 1 / (Ymax - Ymin);
          return (el - Ymin) * Sy;
        }
      }),
      right: right.map(function(el, i) {
        if (i % 2 == 0) {
          //xval
          var Xmin = right[0]; //should be 0
          var Xmax = right[6];
          var Sx = 1 / (Xmax - Xmin);
          return (el - Xmin) * Sx;
        } else {
          //yval
          var Ymin = right[1]; //should be 0
          var Ymax = right[7];
          var Sy = 1 / (Ymax - Ymin);
          return (el - Ymin) * Sy;
        }
      })
    }
  } else {
   return { left: left, right: right};
  }
}

var easeInOut = {
  xs: [0, .42, .58, 1],
  ys: [0,   0,   1, 1]
};


var splitRes = splitCubicBezier({
  z: .5,
  x: easeInOut.xs,
  y: easeInOut.ys,
  fitUnitSquare: false
});

alert(splitRes.toSource())