Paper.js - Rotate segment points around a radius size

Question

I have an imported SVG in my paper.js project.

What i'm trying to do is to rotate each of the svg's segment points around a set radius, animating it with the onFrame() method.

I know how to position each segments point's x and y position but i cant really figure out how to position it in a 'rotation'.

What i have now :

var words = project.importSVG(document.querySelector("svg"));
words.visible = true; // Turn off the effect of display:none;;
words.position = view.center;

var letterR = words.children.letter_r;
var letterR_outside = letterR.children.letter_r_outside;
letterR_outside.selected = true;


var rotate_point = view.center;

function onFrame(event) {

  var _delta = Math.sin(event.time);

  //   console.log(Math.round(50 * Math.cos(theta[0])) * _delta);
  //   letterR_outside.segments[0].point.x = Math.round(_radius * Math.cos(theta[0]));
  //   letterR_outside.segments[0].point.y = Math.round(_radius * Math.sin(theta[0]));


  for (var i = 0; i < letterR_outside.segments.length; i++) {
    var segment = letterR_outside.segments[i];
    // segment.point.x += _delta;
    segment.point.rotate(3, rotate_point);
  }

}

Example of what i'm trying to achieve by rotating each points around a radius. [i made the black circles visible to show the rotation circle of each points]

I'm not exactly sure how to approach this. Any help is greatly appreciated

Answer 1

Calling the point.rotate() does nothing because it returns a clone of the point and doesn't modify it directly.
See the documentation:

Rotates the point by the given angle around an optional center point. The object itself is not modified. ...

So you might want to reasign the value:

segment.point = segment.point.rotate(3, rotate_point);