Sign in to follow this  
JackFalcon

Quaternion Animation Stopping point.

Recommended Posts

Hello, 

      This may be a simple answer.

       A cube is rotating around the x axis with .addRotation(). 

      GOAL: detect when cube is flat on top, with z axis, to stop animation.

      So what are best ways to measure Quaternion rotation progress? And then stop the animation?

Thanks much,

 

Share this post


Link to post
Share on other sites

If you can figure out how far you need to rotate before you start the animation, that might be easier.


var animationRotation = new Animation('myAnimation', 'rotation.y', 30,
    Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CONSTANT)

var keys = []
keys.push({
    frame: 0,
    value: this.rotation.y
})

let newPositionY = this.isClockwise ? (Math.PI / 2) : (-(Math.PI / 2))

keys.push({
    frame: 30,
    value: this.rotation.y + newPositionY
})

animationRotation.setKeys(keys)
this.animations.push(animationRotation)

this.scene.beginAnimation(this, 0, 30, false, 1, () => {
   // after animation
});

Here I am rotating 90 degrees, but you can take current rotation and modulus PI / 2 to find the radians needed to be flat with z-axis.  If you are using a quaternion then you can do some crazy rolling animations - I haven't seen this documented anywhere, but you can rotate simultaneously on 2 axis.  I think you can set the Quaternion.RotationYawPitchRoll(0,?,?) to flatten with z axis.  If you make a PG I'm happy to give it a try.

var animationRotation = new Animation('arrowFlipRotation', 'rotationQuaternion', 30,
        Animation.ANIMATIONTYPE_QUATERNION, Animation.ANIMATIONLOOPMODE_CONSTANT)


    let startingQuaternion = (this.isClockwise === true)
        ? Quaternion.RotationYawPitchRoll(3 * (Math.PI / 4), Math.PI, 0)
        : Quaternion.RotationYawPitchRoll(Math.PI / 4, 0, 0)

    let destinationQuaternion = (this.isClockwise === true)
        ? Quaternion.RotationYawPitchRoll(Math.PI / 4, 0, 0)
        : Quaternion.RotationYawPitchRoll(3 * (Math.PI / 4), Math.PI, 0)

    this.rotationQuaternion = startingQuaternion

    var keys = []
    keys.push({
        frame: 0,
        value: this.rotationQuaternion
    })
    keys.push({
        frame: 30,
        value: destinationQuaternion
    })

    animationRotation.setKeys(keys)

    let easingFunction = new QuarticEase()
    easingFunction.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)

    animationRotation.setEasingFunction(easingFunction)
    this.animations.push(animationRotation)

    this.scene.beginAnimation(this, 0, 30, false, 1, () => {
        // done animation here
    })

 

Share this post


Link to post
Share on other sites

Stopping point for rotation animation, solution:

 /*****************************PLANET-FALLING-ANIMATION****************************/
            var orbitLimit = Math.PI / 2;  // total amount to rotate
            var deorbitRate = 0.6;         // amount to move each frame.
            var orbitCounter = 0;          // incremented amount across frames.
            var orbitRate = 0;             // calculation of orbit, based on direction.

            function animatePlanet(){
                //STOP-ORBIT-ANIMATION,
                if(orbitCounter>=orbitLimit){ //<---SOLUTION (radian-limit).
                    orbitCounter = 0;
                    return; //stop planet animation
                }else{ //ORBIT
                    //Calculate Orbit Heading.
                    if(rectHeading==='topnorth'){
                        orbitRate = -1*Math.PI/20;
                        orbitCounter += (-1* orbitRate) 
                    }else if (rectHeading==='topsouth'){
                        orbitRate = 1*Math.PI/20;
                        orbitCounter += orbitRate; 
                    }
                    //...
                }
                //ORBIT:
                    if(rectHeading==='topnorth'||rectHeading==='topsouth'){
                        world1.top.addRotation(orbitRate, 0, 0);
                        world1.north.addRotation(orbitRate, 0, 0);
                        world1.south.addRotation(orbitRate, 0, 0);
                        //...
                    }             
            }

 /*****************************END-PLANET-FALLING-ANIMATION****************************/

Description:  basic rotation interpolation. When applicable, render loop calls animatePlanet(), if radian-counter exceeds limit, animation stops, else it proceeds at given rate.

Context: this code is used to "orbit" a character around a planet, with the illusion of falling, Local Y of character stays constant. Single-Bevel-Cube shaped Planet orbits underneath.

The stopping-point keeps the world flat. It turned out to be  Math.PI / 2.

I do not understand why that number works, mathematically,  if someone can explain why Math.PI/2 rotates a cube to next face, that would be great!  

I keep incorrectly imagine it to be Math.PI/4... (?)

Cheers,

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.