Can't figure out BezierPlugin and autoRotate

[miguderp 0 Likes (Newbie)]

Hello everyone,

 

I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature.

For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path.

 

The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP).

 

You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button.

 

Here's how my Bezier tween is written:

path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}];
TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}});

If needed to be looked into a bigger scope, it's in my app.js file, line 182.

 

What am I missing here?  Thanks!

See the Pen by (@) on CodePen

[OSUblake 13,949 Likes (Superhero)]

Pixi uses radians.

var bezier = {
  autoRotate: ["x", "y", "rotation", 0, true], // 4th param is angle in rad
  values: path         
};

Just a demo

See the Pen XXbLer?editors=0010 by osublake (@osublake) on CodePen

[miguderp 0 Likes (Newbie)]

Thanks for the answer OSUblake

 

Okay so in which case does the "true" statement by itself work out?

Also I have no idea why but Math.PI / 2 seems to be a "natural" value.

[GreenSock 12,851 Likes (Superhero)]

From the docs: 

autoRotate : Boolean, Number, or Array (default:false) - to automatically rotate the target according to its position on the Bezier path, you can use the autoRotate feature. If your Bezier is affecting the "x" and "y" (or "left" and "top") properties of your target and you don't need to offset the rotation by a certain amount more than normal, then you can simply setautoRotate:true. Or if you want to offset the rotation by a certain amount (in degrees), you can define a number like autoRotate:90 (adding 90 degrees in this example). Or for more advanced controls, you can define autoRotate as an array. In order to adjust a rotation property accurately, the plugin needs 5 pieces of information:

 

1) Position property 1 (typically "x" or "left")

2) Position property 2 (typically "y" or "top")

3) Rotational property (typically "rotation")

4) Number of degrees (or radians) to add to the new rotation (optional - makes it easy to orient your target properly)

5) Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)

 

The autoRotate property should be an Array containing these values, like ["x","y","rotation",90*Math.PI/180,true]. And if you need to affect multiple rotational properties (like in 3D tweens where the Bezier is going through x,y,z points which could affect rotationX, rotationY, and rotationZ), you can use an array of arrays, like["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false]

 

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

If you're using radians, Math.PI / 2 is just 90 degrees. 

[OSUblake 13,949 Likes (Superhero)]

If you're not up-to-date on your trig, working with radians can be confusing. Pixi has some constants you can use to convert your values.

PIXI.DEG_TO_RAD
PIXI.RAD_TO_DEG

That's rather verbose. Here's what I do...

// Create your constants
var toRad = Math.PI / 180;
var toDeg = 180 / Math.PI;

// To convert, just multiply
var deg = 3.141592653589793 * toDeg; // 180
var rad = 90 * toRad; // 1.5707963267948966