Curves animation for rotation question

Help & Support
1

Hello - I’m trying to use the animation curves paradigm from this project: https://playcanvas.com/project/438191/overview/animate-entities-with-curves

I’m extremely amateur at programming, and who would have thought that Ctrl+F replacing every “Position” with “Rotation” in that script wouldn’t work :sweat_smile: The project that I forked is here https://playcanvas.com/project/744528/overview/curves-animation-test

Any pointers or tips on how to change the the scripts for rotation? I’m trying to make it so trees or grass or any foliage kind of wiggles/wobbles/rotates (from their center) at different speeds. Much appreciated for any info.

2

Hi @ahainen,

Your idea was correct, those scripts can work for rotation with some minimal changes. Instead of using rotate(), in this case it’s best to use setEulerAngles(), to work with meaningful numbers for angles.

Here is the updated script and a sample project:

var AnimateRotation = pc.createScript('animateRotation');

AnimateRotation.attributes.add("offsetCurve", {type: "curve", title: "Offset Curve", curves: [ 'x', 'y', 'z' ]});
AnimateRotation.attributes.add("duration", {type: "number", default: 3, title: "Duration (secs)"});

// initialize code called once per entity
AnimateRotation.prototype.initialize = function() {
    // Store the original position of the entity so we can offset from it
    this.startAngles = this.entity.getEulerAngles().clone();
    
    // Keep track of the current position
    this.rotation = new pc.Vec3();
    
    this.time = 0;
};

// update code called every frame
AnimateRotation.prototype.update = function(dt) {
    this.time += dt;
    
    // Loop the animation forever
    if (this.time > this.duration) {
        this.time -= this.duration;
    }
    
    // Calculate how far in time we are for the animation
    var percent = this.time / this.duration;
    var curveValue = this.offsetCurve.value(percent);
    
    // Create our new position from the startPosition and curveValue
    this.rotation.copy(this.startAngles);
    this.rotation.x += curveValue[0];
    this.rotation.y += curveValue[1];
    this.rotation.z += curveValue[2];
    
    this.entity.setEulerAngles(this.rotation);
};

https://playcanvas.com/editor/scene/1071723

2 Likes
3

THANK YOU so much :pray: I really appreciate this. I will give it a shot here later tonight and post back

1 Like
4

Thank you again, this worked perfectly. And, I love that I can parent entities and parent rotations/transformations with this as well. Thanks so much!

EDIT: And it works with parenting particles and cameras! Wooohoo, thank you, this opens up so many options.
https://playcanv.as/p/vJRj1Qcp/

1 Like
5

Nice example! Thanks for sharing it.

1 Like