PaperJS - How to move along path and rotate along the path

Question

The examples shown in here show how to move an object along the path in Paperjs but how do I rotate them correctly along the path?

In the examples shown on the link above, people suggested by using a circle as an example. But once changed to a rectangle new Path.Rectangle(new Point(20,20), new Size(20,20)); you can see that it moves along the path but does not actually rotate in the direction of the path.

How do I calculate the rotation and set it to my object?

Answer 1

In order to calculate the rotation, you need to know the tangent vector to the path at the position of your rectangle.
This can be retrieved with path.getTangentAt(offset) method.
Then, an easy way to animate the rotation of an item is to set item.applyMatrix to false and then animate the item.rotation property on each frame.

Here is a sketch demonstrating the solution.

// Create the rectangle to animate along the path.
// Note that matrix is not applied, this will allow us to easily animate its
// rotation.
var rectangle = new Path.Rectangle({
    point: view.center,
    size: new Size(100, 200),
    strokeColor: 'orange',
    applyMatrix: false
});

// Create the path along which the rectangle will be animated.
var path = new Path.Circle({
    center: view.center,
    radius: 250,
    strokeColor: 'blue'
});

// On each frame...
function onFrame(event) {
    // ...calculate the time of the animation between 0 and 1... 
    var slowness = 400;
    var time = event.count % slowness / slowness;
    // ...and move the rectangle.
    updateRectangle(time);
}

function updateRectangle(time) {
    // Calculate the offset relatively to the path length.
    var offset = time * path.length;
    // Get point to position the rectangle.
    var point = path.getPointAt(offset);
    // Get tangent vector at this point.
    var tangent = path.getTangentAt(offset);
    // Move rectangle.
    rectangle.position = point;
    // Rotate rectangle.
    rectangle.rotation = tangent.angle;
}