Animating multiple items in Paper.js while anchored to a path

Question

I have five rectangles placed at different points along a circle like this - https://i.sstatic.net/tiwCt.jpg.

Upon clicking any rectangle i want the circle to move to the left of the screen, gradually scaling down it's radius until the circle's center reaches x=0. I'd like the five rectangles to move along with the circle while its being scaled down and also adjust their own positions and scale on the circle so that they are within the view's bounds, like this - https://i.sstatic.net/0rZHN.jpg

I'd appreciate any help on how to go about doing this. Heres my code for getting to the 1st image and animating the circle:

var radius = 300;
var center = view.center;

var circle = new Path.Circle({
  center: view.center,
  radius: radius,
  strokeColor: 'black',
  name: 'circle'
});

var path = new Path.Rectangle({
  size: [230, 100],
  fillColor: '#1565C0'
});


var rectText = ['Text 1',
  'Text 2',
  'Text 3',
  'Text 4',
  'Text 5'
];
var symbol = new Symbol(path);

var corners = [
  new Point(center.x, center.y - radius),
  new Point(center.x - radius, center.y - radius / 2),
  new Point(center.x + radius, center.y - radius / 2),
  new Point(center.x - radius, center.y + radius / 2),
  new Point(center.x + radius, center.y + radius / 2)
];

var rectClicked = false;
var clickedRect = null;

var rectClick = function(event) {
  rectClicked = true;
  clickedRect = this;
};

function onFrame(event) {
  // Your animation code goes in here
  if (rectClicked) {
    for (var i = 0; i < 1; i++) {
      var item = project.activeLayer.children[i];
      if (item.name == 'circle') {
        if (item.position.x < 0) {
          rectClicked = false;
        } else {
          item.position.x -= 10;
          item.scale(1/1.01);
        }
      }
    }
  }
}

// Place the instances of the symbol:
for (var i = 0; i < corners.length; i++) {
  var placedSymbol = symbol.place(corners[i]);
  placedSymbol.onMouseDown = rectClick;
  var rText = new PointText({
    point: placedSymbol.bounds.topLeft + 20,
    content: rectText[i],
    fontSize: '20',
    fillColor: 'white'
  });
}

Answer 1

Paper.js provides rotations around a pivot out of the box.

var pivotPoint = new Point(10, 5);
circle.rotate(30,pivotPoint);

Here is the docs reference for this behaviour and here is a very basic Sketch example to illustrate this

The above snippet will rotate a circle(you can change this to rectangle in your case) by 30 degrees around a pivot point at coordinates 10,5 on the x/y axis.

Thus what you describe is certainly doable as long as the path that your elements will follow is always circular.

Bear in mind that in order for the pivot rotation to work the way you want them to you need to update the pivotPoint and reinitiate the rotation again.

Note: In case you want to move along an arbitrary shape instead of circular path, you should search for Paper.js animation-along-a-path which is something that I've seen been done before without much difficulty - e.g this simple Sketch by the creator of Paper.js himself.

---

The sketch I provided above is a basic example of rotation around a pivot point.

I'm dumping the Sketch code here in case the link goes dead:

//Create a center point
var centerCircle = new Path.Circle(paper.view.center, 100);
centerCircle.strokeColor = 'black';
centerCircle.dashArray = [10, 12];


//Create the circles
var circle1Radius = 30;
var circle1 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle1Radius, circle1Radius);
circle1.fillColor = '#2196F3';

var circle2Radius = 40;
var circle2 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle2.fillColor = '#E91E63';

var circle3Radius = 40;
var circle3 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle3.fillColor = '#009688';


var i=0;
var animationGap = 125; //how long to move before animating the next circle
var rotationSpeed = 2;
function onFrame(event) {

    circle1.rotate(rotationSpeed,centerCircle.position);

    if(i>animationGap)
        circle2.rotate(rotationSpeed,centerCircle.position);

    if(i>animationGap*2)
        circle3.rotate(rotationSpeed,centerCircle.position);
    i++;
}