tween jumps (jitters) to the final value at the end of animation

[KeeleyMoore]

Hi, thanks for this great lib its really useful!

But i've fallen into some trouble that i cant figure out. Within my three.js scene i have camera and avatar objects in a container object that is moved with my controller. On collision with another object in my scene the camera is meant to tween back and up slightly but instead of any animation it just jumps to the finished position.

This only happens while the avatar is being moved, if i initiate the tween straight away when the avatar isn't being moved the animation runs fine.

Is anybody aware of what might be causing this? and a possible fix? I'm truly stumped

This is the tween setup code i'm using incase its just a simple setup issue i've missed:

    var camPosition = { x : 0, y : 5, z : 50 };
    var camTarget1 = { x : 0, y : 10, z : 75};

    tweenCamToOrig = new TWEEN.Tween(camTarget1)
    .to(camPosition, 2000)
    .easing( TWEEN.Easing.Back.InOut )
    .onUpdate(function(){
        camera.position.x = camPosition.x;
        camera.position.y = camPosition.y;
        camera.position.z = camPosition.z;
    })
    .onComplete(function(){
    });

[sole]

It's hard to say what's going on with just a bit of code which has nothing to do with the moment where you actually start the tween. You should provide some working online example (with codepen or jsfiddle or similar) so I can see it happening.

If anything, I'd guess you're trying to tween to absolute values but what you want is a relative tween to the camera position when it collides with something. Try using something like camTarget = { x: "+0", y: "+10", z: "+75" } ?

[KeeleyMoore]

Ah okay sorry, i was hoping it might of been a regular or known issue.
Thanks for your suggestion, I implemented it but it made no change, I've created a much simpler version of my game and made a codePen out of it: http://codepen.io/Keeley/pen/Kpdyl

However looking in the chrome javascript console it says TWEEN is undefined, but nothing has change from my local file so it should work. I tried various different host for tween.js as well but it still doesn't recognise TWEEN.

This has puzzled me even more, i cant see any reason for it not to work within the pen. If you wouldnt mind taking a look for me i would appreciate it immensely.

If you manage to get it to recognise Tween and it runs, when you move the avatar into an object in front of you you'll see the tween jump to its finished position.
(its using the Three.js fly controller so WASD and mouse to look)

I also highlighted the tween.js code with large ////////////Comments\\\ so they will be easy to spot.

Thanks again!

[KeeleyMoore]

I thought it unfair, unlikely and a bit of a waste of time for me to ask you to debug codepen, so i found out how to create a Git repo and have added my working simplified code to it.

It should be much easier to read on there heres the repo: https://github.com/KeeleyMoore/Conquer-the-Cosmos-simplified

[sole]

The reason for asking you to use codepen or similar is so that I don't have to download/clone the repository then open the folder in my local drive, see what the structure is, figure out what's the error and send you a Pull Request - with codepen I can just save a new version and that should be it!

That aside, your code will never work because you're not including any of the libraries upon which your code depends :-P

So a couple of <script> tags with the right source should be added ;-)

[KeeleyMoore]

Ah my apologies, I'm fairly new to this style of coding and haven't really asked for help before!

I also thought that if i was to use the "add external resource" link in codepen that it would of worked as a source tag equivalent.

Anyhow turns out that the reason it didn't recognise TWEEN in the first place was because i was stupidly linking to a create.js's tweenJs. I just assumed when looking for a hosted version that it was the same thing, my bad.

I hosted my own version of tween.js just so i was positive its was the correct file and everything works now :P
The codepen URL: http://codepen.io/Keeley/pen/Kpdyl

Just hold down the left mouse button and guide the avatar until you collide with another sphere and you'll see the camera jumps to the target position

[sole]

Hey

Sorry I don't have the time/patience to make it collide but make sure you use "+10" and not just +10 when specifying the desired values to tween to. The quotes matter in this particular case. I'm afraid I still haven't got to document this yet, but have a look at the relative values example to see the syntax in use: https://github.com/sole/tween.js/blob/dev/examples/09_relative_values.html

[KeeleyMoore]

Hey again,

i implemented your suggestion but had no luck, i also studied the link your proved but that didnt help either. I have completely stripped the codePen down so now the camera tween is called on a 2 second delay from initialisation. http://codepen.io/Keeley/pen/Kpdyl

Im pretty sure that my error is with the code inside my Update function but i cant figure out the format i'm meant to use.

Sorry to keep on bugging you but i'm desperate!

[KeeleyMoore]

Im going to start off again by apologise for persistently bugging you. But i'm sure you'll be glad to hear that it will stop now :P

I managed to find a fix, once i knew the problem was in the update function it was easier to search for a solution. I stumbled upon this for anyone who may see this and have the same issue: http://www.96methods.com/2012/01/three-js-moving-objects/

also here is the working code's setUp function:

function tweenSetUp(){      
    var camPosition = { x : 0, y : 5, z : 50 };
    var camTarget1 = { x : 0, y : 10, z : 75};
    var camTarget2 = { x : 0, y : 100, z : 1000};

    var actualXpos= 0;
    var actualYpos = 5;
    var actualZpos= 50;
    tweenCam1 = new TWEEN.Tween(camPosition)
        .to(camTarget1, 2000)
        .easing( TWEEN.Easing.Quadratic.InOut )
        .onUpdate(function(){
              // Calculate the difference between current frame number and where we want to be:
            var differenceX = Math.abs(camPosition.x - actualXpos);
            actualXpos = camPosition.x;
            var differenceY = Math.abs(camPosition.y - actualYpos);
            actualYpos = camPosition.y;
            var differenceZ = Math.abs(camPosition.z - actualZpos);
            actualZpos = camPosition.z;
            // Moving in -Z direction:
            camera.translateX( +differenceX);
            camera.translateY( +differenceY);
            camera.translateZ( +differenceZ);
        });
}

Thanks again for your help, it's much appreciated, along with the effort you've put into this great lib :)

[sole]

Ah, that would make sense :-)

Glad you found where the error was and I'm thanking you for posting the solution here so more people can take advantage of it!

[rbary]

Thanks a lot KeeleyMoore this post helped me !!

[sole]

Perhaps we need to make an example / mention this in the docs!
@rbary what was your issue exactly and how did this issue or post link help you? I'd like to clarify whatever is it that is not clear! thanks!

[rbary]

Hi my issue was perspective camera (three) animation;

https://github.com/NephtysOrg/projet_sia/other_dev/js/app/game.js

Game.prototype.cameraTranslate = function(){
    var actualXpos =this.current_camera.position.x;
    var actualYpos =this.current_camera.position.y;
    var actualZpos =this.current_camera.position.z;
    console.log(this.current_camera.position);
    var differenceX = Math.abs(this.current_camera.position.x - actualXpos);
    actualXpos = this.current_camera.position.x ;
    var differenceY = Math.abs(this.current_camera.position.y - actualYpos);
    actualYpos = this.current_camera.position.y;
    var differenceZ = Math.abs(this.current_camera.position.z - actualZpos);
    actualZpos = this.current_camera.position.z;

    this.current_camera.position.x += differenceX;
    this.current_camera.position.y += differenceY;
    this.current_camera.position.z += differenceZ;    
};
Game.prototype.cameraTransition = function (position,look) {
    console.log("camera transition function using tweenjs");
    var tweenCam = new TWEEN.Tween(this.current_camera.position).to({
        x:position.x,
        y:position.y,
        z:position.z}, 600)
    .easing(TWEEN.Easing.Sinusoidal.InOut)
    .onUpdate(this.cameraTranslate())
    .start();
};

[rbary]

Finaly i found that it isn't necessary to call a translate function in
.onUpdate; this code works too:

Game.prototype.cameraTransition = function(position, look) {
    var that = this;
        var tweenCam = new TWEEN.Tween(that.current_camera.position).to({
            x: position.x,
            y: position.y,
            z: position.z}, 3000)
            .easing(TWEEN.Easing.Linear.None)
            .onUpdate(function() {
                that.current_camera.lookAt(look);
            })
            .onComplete(function() {
                //that.current_camera.rotation.y = 180 * Math.PI / 180;
                //that.current_camera.rotation.z = -45 * Math.PI /180;
            })
            .start();

            console.log("tween to player pos");
};

[trusktr]

This seems to be an issue with all tweens. The issue become apparent when a small change in the tweened number (the small amount that the number should change in one tick) translates to a visibly large rendering difference.

What I mean is, if suppose we change the rotation of a circle with a texture on it. If the circle has a large radius, then a small change in the rotation of the circle (by Tween.js) can make the jumping become obvious.

TweenMax has the exact same problem (see the live example there): https://greensock.com/forums/topic/14874-long-animations-jumping-at-the-startend-when-using-easing/

In many cases, this is not noticeable because if the small change in number value corresponds to a small visual difference, then you can't really see it with your eye.

But in that example TweenMax, the jump is obvious.

Here's some numbers of a tween that is slowing down, generated by Tween.js, and we can see the jump at the end:

10.046829364239343
10.042912961057219
10.039487976809298
10.036269246798945
10.033420811990638
10.030853057216234
10

This is an Exponential.Out you see, the last few numbers. There's clearly a jump at the last value that is out of proportion compared to the distance between the other values.

If this tween is the position of a pixel, you may definitely not notice it. But it this tween is tweening across a scaled distance, or rotating a huge object, you can definitely see it.

---

What causes this? Is it some sort of floating point error? Hmmmmm.......