CODEWITHSUNDEEP
javascriptmathrotationpaperjs
Evan Wild
Evan Wild

Reputation: 31

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

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:

img

Upvotes: 2

Views: 701

Answers (1)

Stefan Krüger s-light
Stefan Krüger s-light

Reputation: 1014

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;

Upvotes: 1

Related Questions