0
527
ViewsRotate circle to vector (js)
I'm probably drastically overthinking this. But I have a circle I am dynamically generating with slices of PI. I would like to have the ability to click the circle and rotate it. Whatever point on the circle I click, That point on the circle is the one I would like to follow the mouse.
I've been playing around with it for awhile. And I can get it to work on one side of the circle. But the other side of the circle does the opposite of what I expect. Heres basically the setup
const currentDegrees = piCircle.current;
const rect = canvas.getBoundingClientRect();
const x = state.xy[0] - rect.left;
const y = state.xy[1] - rect.top;
const dx = state.delta[0];
const dy = state.delta[1];
x and y are the mouse positions on the circle, dx and dy is the normalized motion the mouse is moving in(typically 1/0/-1). currentDegrees is the current rotation of the circle.
My current, somewhat working approach was this
const degrees = toDegrees(Math.atan2(y + dy, x + dx));
That approach doesnt seem to respect the rotation of the circle. on the right side of the circle it works fine, on the left the motion is inverted.
To simplify the issue, I realize I can phrase it more like this. I have two vectors, mouse position(x&y) and delta(x&y). By adding those two together i would have a third vector which is the destination I would like my initial position to end up at when I apply some degree of rotation.
const x = state.xy[0] - rect.left;
const y = state.xy[1] - rect.top;
const dx = x + state.delta[0];
const dy = y + state.delta[1];
I drew an awful thing to also help visualize my problem
1 answers
Answer question0
This is my best guess for how to do this. Its not perfect. The circle rotates slightly slower than the pointer. I'm not sure how to improve it. I'm open to suggestions.
const x = state.xy[0] - rect.left;
const y = state.xy[1] - rect.top;
const dx = x + state.delta[0];
const dy = y + state.delta[1];
const startAngle = Math.atan2(y - centerY , x - centerX);
const endAngle = Math.atan2(dy - centerY, dx - centerX)
const cx = centerX + radius * Math.cos(startAngle);
const cy = centerY + radius * Math.sin(startAngle);
const dcx = centerX + radius * Math.cos(endAngle);
const dcy = centerY + radius * Math.sin(endAngle);
const rsa = Math.atan2(centerY - dcy, centerX - dcx);
const rea = Math.atan2(centerY - cy, centerX - cx);
const angle = toDegrees(rsa - rea)