get values of interpolated points from custom ease function?

[macl]

Hi there,

I have a custom ease function which I am using to animate particles within a 3d space. I am trying to draw a line between the start point and end point using three.js

My easing equation looks like this

let EasingEquation = CustomEase.create("custom", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 ");

 

currently I am able to create a straight line between the points with simple linear interpolation (lerping the 3d vector values) like this:

let from = [100,100,100];
let to = [10,10,10];
let linevertices = [];
let newpos = new THREE.Vector3();
for(let j = 0; j < 10; j ++)
{
     //this loop runs 10 times for 10 points along the line to build linear geometry 
	newpos.lerpVectors(new THREE.Vector3(from[0],from[1],from[2]),new THREE.Vector3(to[0],to[1],to[2]),(1.0/10)*j);
	linevertices.push(newpos);
}
//this sucessfully outputs the linearly interpolated values

 

What I am trying to achieve is:

 

instead of simply drawing a straight line with the linear interpolation, i would like to draw the animation path which is created using the  custome EasingEquation but so far all I have managed to create is NaNs and Errors.

 

Does anyone know how this might be achieved?

 

Thanks very much

 

[GreenSock]

It's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

If you're simply trying to interpolate those values according to a custom ease, there are a bunch of ways you could do it. One would be to use a paused tween:

 

let point = {x: 100, y: 100, z: 100},
    interp = gsap.to(point, {
      x: 10,
      y: 10,
      z: 10,
      ease: CustomEase.create("", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 "),
      paused: true
    });

for (let j = 0; j < 10; j++) {
  interp.progress(i / 9);
  linevertices.push(new THREE.vector3(point.x, point.y, point.z));
}

 

Another way would be to use the gsap.utils.interpolate() and then feed in a progress value that has been run through your CustomEase, but that may not be as obvious/simple. 

 

Does that help at all?

[macl]

thanks for the response.

I've been bad about doing codepens in my posts here but in my defense on this thread the codebase I'd be extracting from is pretty complex with 3d wind simulation particle engines using GPGPU in threejs and webgl and it would have taken a while so I'm sorry and will try to do better moving forward

Thanks for the response. you put me onto the utils.interpolate() which seemed to be only linear however I did dig deeper on this and found elsewhere on the forums that I can just use the "EasingEquation" as a function to return a scalar float which I can use as a multiplier for my 3d vector like so. this now works perfectly and is drawing awesome curved lines to show the animation paths of my particles

 

let EasingEquation = CustomEase.create("custom", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 ");
let from = new THREE.Vector3(100,100,100);
let to = new THREE.Vector3(10,10,10);
let linevertices = [];
//3d vector distance
let distance = to.clone().sub(from);
//loop steps
for(let j = 0; j < 10; j ++)
{
    //create a float to represent the eased value of the line
    let easingVal = EasingEquation(j*(1/lineVertices));
    //create a new vector position and apply the float value as a multiplier
    let newpos = distance.clone().multiplyScalar(easingVal)
    //push the value into the vertex array
    linevertices.push(newpos.add(frompos));
}

Thank you for your help!

Edited June 2, 2022 by macl
corrected code error

[GreenSock]

6 hours ago, macl said:

you put me onto the utils.interpolate() which seemed to be only linear however I did dig deeper on this and found elsewhere on the forums that I can just use the "EasingEquation" as a function to return a scalar float which I can use as a multiplier for my 3d vector like so. this now works perfectly and is drawing awesome curved lines to show the animation paths of my particles

 

Yeah, that's why I was suggesting that you just feed that easingVal into the interpolate() as the progress. Same idea as what you ended up doing, I guess

 

Glad you got it figured out. Have fun!

[lingme]

On 6/1/2022 at 7:51 PM, macl said:

thanks for the response.

I've been bad about doing codepens in my posts here but in my defense on this thread the codebase I'd be extracting from is pretty complex with 3d wind simulation particle engines using GPGPU in threejs and webgl and it would have taken a while so I'm sorry and will try to do better moving forward

Thanks for the response. you put me onto the utils.interpolate() which seemed to be only linear however I did dig deeper on this and found elsewhere on the forums that I can just use the "EasingEquation" as a function to return a scalar float which I can use as a multiplier for my 3d vector like so. this now works perfectly and is drawing awesome curved lines to show the animation paths of my particles

 

let EasingEquation = CustomEase.create("custom", "M0,0 C0.33,0.024 0.396,1.258 0.658,1.15 0.777,1.1 0.804,1 1,1 ");
let from = new THREE.Vector3(100,100,100);
let to = new THREE.Vector3(10,10,10);
let linevertices = [];
//3d vector distance
let distance = to.clone().sub(from);
//loop steps
for(let j = 0; j < 10; j ++)
{
    //create a float to represent the eased value of the line
    let easingVal = EasingEquation(j*(1/lineVertices));
    //create a new vector position and apply the float value as a multiplier
    let newpos = distance.clone().multiplyScalar(easingVal)
    //push the value into the vertex array
    linevertices.push(newpos.add(frompos));
}

Thank you for your help!

First of all, thank you very much, this answer is full marks, I have been looking for how to get the ease alpha value, this value is usually [0~1], your answer let me find the answer.