linear function but with a falloff?

Question

Hi!

I'm using linear() for everything. It's my most common trick and I find it tremendously useful. But one thing I'm always missing is how to set it up so a have a falloff when the values end. Like this:

I have a 4 custom sliders each going from 0-100 driving some kind of animation. I then have a master slider also going from 0-100 that I want to drive ALL these four sliders in one go, for easier and more fluid setup.

If I here use linear() on each custom slider mapping 0-100 to 0-25 increments on the master slider, the value stays at 100 when the master slider goes past.
What I'm looking for is a way to use linear() but also have falloff range.

What's the best way to achieve this?

Mathias Moehl · Answer

One thing which can be handy in such a situation is a linear, which is not clipping, i.e. goes also above 100 or below 0.

Here is an implementation for you:

// linear function that in contrast to the build in linear
// does not clip at vMin and vMax
function myLinear(t,tMin,tMax,vMin,vMax) {
    if(tMax< tMin){
        var temp = tMax;
        tMax=tMin;
        tMin=temp;
        temp=vMax;
        vMax=vMin;
        vMin=temp;
        }
    var result = vMin;
    if(tMin==tMax){
        result = vMin;
        }
    else {
    result= vMin+( (t-tMin)/(tMax-tMin))*(vMax-vMin);
        }
    return result;
}

Then you can check if it is above 100 already, and if so, you can apply your fade out logic.

You could, for example, insert this before returning the result:

if (result > 100) result = linear(result, 100, 200, 100, 0);

Now instead of counting from 100 to 200, it counts back from 100 to 0 again (and then stays there). You can also use EaseIn or Ease, for example.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded