gre / bezier-easing Goto Github PK

Hello,
I have a minified of a 2014's version of BezierEasing.
When I require with browserify into a var called BezierEasing it works, cause it's a function that return something.

Now I have installed the newest version of BezierEasing with NPM and required index.js into the same var, and GSAP give me an error, cause BezierEasing(myEase) passed into Ease object is not a function.

My Code

var BezierEasing = require('bezier-easing');

TweenMax.fromTo($myEl, .7, {
    yPercent: 40,
    autoAlpha:0
}, {
    yPercent: 0,
    autoAlpha:1,
    ease:new Ease(BezierEasing(0.51,0.01,0,1))
});

Can I have more info about that ?

Unfortunately I don't have the version number cause I found the min file on my PC from an old project.

Thank You,

Lorenzo

f.toCSS = function () { return css; };
This line has a non-standard white space right before return css; that breaks compilation using webpack.

New link should be https://www.w3.org/TR/css-timing-1/cubic-bezier-timing-curve.svg

First of all, this is an awesome library! I spent a long time looking for implementations a couple of weeks ago and didn't find this.

I'm looking at using this for some animations we are working on where we have some complex animation curves and I was wondering if you might be able to confirm if my idea should work, and also whether you might like it as a PR for this repo.

So, what we need is a way to specify curves with multiple control points and still interpolate from 0 -> 1.

This one, for example, does 80% of its movement in the first 20% of time and the final 20% in the last 80% of time.

The curve for the first bit is [0.23830050393398, 0, 0.25586732616931, 0.79011192334632] and the second is [0.21787238302442, 0.98324004924648, 0.58694150667646, 1].

What I'm planning is something taking a list of points and control points and be able to use them as if they were one curve:

var curve = [{
    cp: [0.23830050393398, 0, 0.25586732616931, 0.79011192334632],
}, {
    cp: [0.21787238302442, 0.98324004924648, 0.58694150667646, 1],
    p: [0.2, 0.8] // first curve will finish at [0.2, 0.8], rest of the curve follows the cp above
}];

var easing = cubicBezier(curve);

easing(0); // = 0
easing(0.2); // = 0.8 because we are at the end of the first curve
easing(1); // 1

So, the first curve would go from 0 -> 0.2, you would take the values from the curve and times them by 0.2 (because a 1 from the first curve would put you at 0.2 on the total curve). The second curves values would be 0.2 + 0.8*secondCurve.

I imagine it would work that, a single control point wouldnt need a p value because it would go from 0 -> 1 as normal, for two onwards you have p to tell you where the last curve finished.

So my two questions, does this work out mathematically as far as you can tell? And would you like a PR when I try this later?

Thanks again

Hi @gre ,
In the latest npm install of bezier-easings, the index.d.ts #29 file added by @MonsieurMan is missing. I am also getting this error in chrome TypeError: bezier_easing_1.bezier is not a function. Are they related or the cause is different?

Refer to the bezier library developed by your library,Thank you for your open source spirit!
https://github.com/wardenfeng/bezier

Hello, I draw curves in svg using path's C attribute, like:
C x1 y1, x2 y2, x y
<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

While function from this library takes only 4 numbers. I am wondering how can I "transform" the 6 number definition of cubic bezier curve in SVG's path to 4 number definition to be used with this library.
My ultimate goal is to know y of my svg's path as function of x.

Had to specify UTF-8 in the meta:

<meta charset="UTF-8">

I've run into a couple of places where I'm using arbitrary BezierEasing objects generated outside of my control, and it would be useful to have access to the four arguments that were used to create them. (For example, to create the inverse curve to determine the t at which the position reaches 0.1. Could be an easier way?) I wonder if you think it makes sense to expose the four values used to generate the function? Of course parsing the toString isn't what I'm looking for. =) (Very nice toString though!)

If so: exposing them as simple mutable properties might be bad, as it gives the impression that they should be mutable (I don't think they should be). Proper getters and setters aren't cross-platform enough. Maybe a function like toString that returns an array?

Anyway, if you have any thoughts on this, I'd be happy to execute and make a pull request.

Can you tell why this is always liniar?
Here it is:

var bezier = function(mX1, mY1, mX2, mY2) {
    this.mX1 = mX1;
    this.mY1 = mY1;
    this.mX2 = mX1;
    this.mY2 = mY2;
    return bz.pB(mX1, mY1, mX2, mY2);
}
var bz = bezier.prototype;

// These values are established by empiricism with tests (tradeoff: performance VS precision)
bz.ni    = 4; // NEWTON_ITERATIONS
bz.nms   = 0.001; // NEWTON_MIN_SLOPE
bz.sp    = 0.0000001; // SUBDIVISION_PRECISION
bz.smi   = 10, // SUBDIVISION_MAX_ITERATIONS

bz.ksts = 11; // k Spline Table Size
bz.ksss = 1.0 /  (bz.ksts - 1.0); // k Sample Step Size

bz.f32as = 'Float32Array' in window; // float32ArraySupported
bz.msv = bz.f32as ? new Float32Array (bz.ksts) : new Array (bz.ksts); // m Sample Values
bz._p = false;

bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
bz.C = function(aA1)      { return 3.0 * aA1; };

// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
bz.cB = function(aT, aA1, aA2) { // calc Bezier
    return ((bz.A(aA1, aA2)*aT + bz.B(aA1, aA2))*aT + bz.C(aA1))*aT;
};

// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
bz.gS = function (aT, aA1, aA2) { // getSlope
    return 3.0 * bz.A(aA1, aA2)*aT*aT + 2.0 * bz.B(aA1, aA2) * aT + bz.C(aA1);
};

bz.bS = function(a, aA, aB) { // binary Subdivide
    var x, t, i = 0;
    do {
        t = aA + (aB - aA) / 2.0;
        x = bz.cB(t, bz.mX1, bz.mX2) - a;
        if (x > 0.0) {
            aB = t;
        } else {
            aA = t;
        }
    } while (Math.abs(x) > bz.sp && ++i < bz.smi);
    return t;
};

bz.nri = function (aX, agt) { // newton Raphs on Iterate
    for (var i = 0; i < bz.ni; ++i) {
        var cs = bz.gS(agt, bz.mX1, bz.mX2);
        if (cs === 0.0) return agt;
        var x = bz.cB(agt, bz.mX1, bz.mX2) - aX;
        agt -= x / cs;
    }
    return agt;
};

bz.csv = function () { // calc Sample Values
    for (var i = 0; i < bz.ksts; ++i) {
        bz.msv[i] = bz.cB(i * bz.ksss, bz.mX1, bz.mX2);
    }
};

bz.gx = function (aX) { //get to X
    var is = 0.0, cs = 1, ls = bz.ksts - 1;

    for (; cs != ls && bz.msv[cs] <= aX; ++cs) {
        is += bz.ksss;
    }
    --cs;

    // Interpolate to provide an initial guess for t
    var dist = (aX - bz.msv[cs]) / (bz.msv[cs+1] - bz.msv[cs]),
        gt = is + dist * bz.ksss,
        ins = bz.gS(gt, bz.mX1, bz.mX2);

    if (ins >= bz.nms) {
        return bz.nri(aX, gt);
    } else if (ins === 0.0) {
        return gt;
    } else {
        return bz.bS(aX, is, is + bz.ksss, bz.mX1, bz.mX2);
    }
};

bz.pB = function (mX1, mY1, mX2, mY2) {
    bz.mX1 = mX1;
    bz.mX2 = mX2;
    bz.mY1 = mY1;
    bz.mY2 = mY2;

    return function(aX) { // process bezier

        if (!bz._p) bz.pc();
        if (bz.mX1 === bz.mY1 && bz.mX2 === bz.mY2) return aX; // linear

        if (aX === 0) return 0;
        if (aX === 1) return 1;
        return bz.cB(bz.gx(aX), bz.mY1, bz.mY2);
    };
};

bz.pc = function() {
   bz._p = true;
    if (bz.mX1 != bz.mY1 || bz.mX2 != bz.mY2)
    bz.csv();
};

BTW: this is the fastest blade in the land in terms of performance.

Thanks for any reply.

Hey...

We were using your version from April 14th. And the new 1.0.0 is broken when we try to load it via bower in an angular app.

When reaching the module.exports sentence at the end it says that module is undefined.

Hello, I am writing a plugin for custom scrollbar. The basic library uses jQuery, but the jQuery.fn.animate() function is not really fast, so I am writing a high-performance animation scheme by myself, and easing is one of them A part that can't be overlooked, I used bezier-easing to animate first, but then I suddenly realized that bezier-easing is not necessarily faster than jQuery.easing, as if no one ever mentioned this? So I searched on Google and StackOverflow, but didn't find any useful information, maybe there is something wrong with my keywords? These two animations involve a lot of parameters, and I am not good at mathematics, so it is difficult for me to compare the differences between the two schemes in detail.

In short, I would like to know if you have done such a comparison, or is there any relevant information on the Internet? If there isn't, then I'll do a comparison of them, which may take a lot of my time, so I think it's better to ask first.

That all, thanks.

Hi, when building angular apps there is a warning if we use this package.

Is there any workaround?

I know i can add the package to allowedCommonJsDependencies to get rid of the warning, but the issue remains.

should not append at creation time.
That was a premature optimization which might actually be less performant (e.g. when creating a lot of BezierCurve without using it – direct use-case from GLSL.io)

I remember your code can do multiple point bezier curves. If that's true, please make some example:

• elastic in, out, inOut
• bounce in, out, inOut

:)

As per javascript naming style guide.

The two for loops look like this:

var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

for (var i = 0; i < kSplineTableSize; ++i) {
	sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}

var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;

for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
	intervalStart += kSampleStepSize;
}
--currentSample;

// Interpolate to provide an initial guess for t
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;

So as you can see, the first loop creates an array with keys [0, 10]. The second loop runs for keys [1, 9]. This means that currentSample cannot be 9 (after --currentSample), which also means intervalStart can not be 1, even if sampleValues[10] <= aX. In other words, currentSample is 8 at max and intervalStart is 0.9 max. That means that the dist estimate will at max will use the values sampleValues[8] and sampleValues[9].

I am not sure whether this is intentional or a bug.

If it is intentional, there is no reason to have the first for loop run for i=10 and should only go to 9, as sampleValues[10] is never used by this code.

http://greweb.me/glsl-transition/

cache and pre-compute some samples for faster computation.

From @dcporter:

In Safari (7.0.5 on Mavericks but I believe generally), typeof Float32Array returns "object" because reasons. (Safari appears to remove the 'call' method from native constructors, which is how typeof tells something is a function.)

see 0d8d62a#diff-168726dbe96b3ce427e7fedce31bb0bcR29

I'm trying to use this project to ease animations in a QML canvas. Implementing and using works fine, at least when run on a Windows machine in Qt 5.7.0
But as soon as I try to run it cross compiled on a Raspberry Pi 3 the curve becomes a linear function. I have no idea what's going wrong here, Qt reports that JIT support is not enabled on the Pi, maybe that is a possible cause for the problem?
Every time calcBezier is run I print the input and output values, also float32ArraySupported. On both machines float32ArraySupported is true, and the values are about the same. The code is 100% identical.
I have no clue how to fix this.

My curve is (0.7, 0, 1-0.7, 1)

I began using this library today and I might consider adding d.ts file for it later on.

In line 51, the variable mX1, mX2 are not declared , it will throw an exception when the function is called.

I need this function。

I am using this package through bower like this:

import BezierEasing from '../bower_components/bezier-easing/bezier-easing';

And it broken because in browsers it's no longer possible to reference the window object through this inside a strict mode function:

Need a better interpolation, there is a serious imprecision for values when the curve slope becomes asymptotic.

I've made a lebab conversion of your code, imported into my test setup and my compilation time jumped from 700-1100ms to 15-17s.

I've searched the web all day for a solution, people talk about leaky scripts, I've re-installed node.js couple of times, searched for self executing anonymous functions, and other shenanigands, I didn't realize it's your script until I made a build without your it.

Any plans to help solve this issue?

I kept having this
index.js:54 Uncaught ReferenceError: module is not defined

On line 54 of index.js.
Any idea why?

module.exports = function bezier (mX1, mY1, mX2, mY2) {
  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
    throw new Error('bezier x values must be in [0, 1] range');
  }