css cubic-bezier javascript function

Я пишу функцию анимации и сейчас пытаюсь реализовать cubic-bezier как в css. Использую формулу для 4-ёх точек вот отсюда.

У меня получилась вот таккая фукция:

function cubicBezier(p, t){
   var y = 1 - t;

   return ((0 * Math.pow(y, 3)) + (p[0] * t * Math.pow(y, 2)) + (p[1] * Math.pow(t, 2) * y) + (1 * Math.pow(t, 3)));
}

где t - [0,1]

Вот что он рисует.

Вот код который рисует:

var p = [.5, 0, .5, 1];

        var ctx = cubic.getContext('2d');

        function cubicBezier(p, t){
            var y = 1 - t;

            return ((0 * Math.pow(y, 3)) + (p[0] * t * Math.pow(y, 2)) + (p[1] * Math.pow(t, 2) * y) + (1 * Math.pow(t, 3)));

        }

        cubic.width = cubic.offsetWidth;
        cubic.height = cubic.offsetHeight;

        ctx.beginPath();
        ctx.strokeStyle = "#F44336";



        function X(i){
            return i * 400 + 50;
        }

        ctx.moveTo(50, 50);

        ctx.lineTo(X(p[0]),X(p[1]));
        ctx.lineTo(X(p[2]),X(p[3]));
        ctx.lineTo(X(1),X(1));

        ctx.stroke();
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = "#4CAF50";
        ctx.moveTo(50, 50);

        for(var t = 0; t<1; t = t + .01){
            ctx.lineTo(X(cubicBezier([p[0], p[1]], t)), X(cubicBezier([p[2], p[3]], t)));
        }

        ctx.stroke();

Поскажите пожалуйста правельную формулу для вычесления.

P.s. В гугле на эту тему от силы статей 5 и все на английском, я мало что понял там(