How do I rotate around a point towards the mouse in PaperJS?

Question

I'm creating a simple game using PaperJS and I'm currently stuck on a small part of it.

In the game, there is a player (just a circle) who has two hands (two smaller circles)

I want the hands to always point towards the mouse position, but I can't figure out the equation needed to do so.

Here's some of the code I have so far, I just need help filling in the blank...

view.onMouseMove = function(event) {
    var mouseX = event.point.x;
    var mouseY = event.point.y;

    var rotation = ???

    playerHands.rotate(rotation, view.center)    
}

Here is a diagram of what I'm trying to accomplish:

I'm not familiar with paper.js, but recently I have answered this question regarding rotation towards the mouse. Maybe it will be helpful. I suppose you should write something like this: var rotation = Math.atan2(mouseY - view.center.y, mouseX - view.center.x) * 180 / Math.PI — Kirill Simonov
yes atan2 is the answer ... to get correct equation how ever we need to knoe your coordinate system (where x,y points and which way angle is increasing) otherwise you would need to play with +/- combinations ... You need player position (instead of view center... if they are not the same) and mouse position for this as input .... also you need to know if angle is in [deg] or [rad] and where is its zero — Spektre

Stefan Krüger s-light Stefan Krüger s-light · Accepted Answer · 2018-03-02T11:23:12

is really simple:

function onMouseMove(event) {
    let delta = (event.point - player.position);
    player.rotation = delta.angle+90;
}

the idea here is you can use two Points to do Vector-Geometry. more in depth descriptions are in the Vector-Geometry Tutorial

there is a +90 offset needed to align mouse with top of player as paperjs sees the x axis as 0° for rotation.

i have created a working example in sketch.paperjs.org

the above player.rotation is only working if the Player Group has its .applyMatrix set to false. additionally i set the Player-Group pivot point to the big circle center at creation:

let player = new Group(circle, handleleft, handleright);
player.applyMatrix = false;
player.pivot = circle.bounds.center;
player.position = position;

How do I rotate around a point towards the mouse in PaperJS?

1 Answers