11223342124 - 5 months ago 33

Javascript Question

Div should follow the cursor, but shifted 20px by X and Y axis toward the center of the screen, based on the quarter in which is the mouse cursor?

Like this: https://i.imgur.com/XaDk1hI.png

I used trigonometry to find vector from cursor to center of the window, so I have cursor coordinates, center coordinates, and third point C, but div moves in strange circles and I don't where I made mistake.

`var lt = document.getElementById('lt')`

var ltPosition = lt.getBoundingClientRect();

var element = document.getElementById('element');

var mousePosX = 0;

var mousePosY = 0;

document.onmousemove = function(e){

function angle(xCursor, yCursor, xCenter, yCenter){

var distanceA = xCursor - xCenter;

var distanceB = yCursor - yCenter;

var distanceC = Math.sqrt(distanceA*distanceA + distanceB*distanceB);

var theta = Math.atan2(distanceA, distanceB);

theta *= 180 / Math.PI;

var offsetX = distanceC * Math.sin(theta);

var offsetY = distanceC * Math.cos(theta);

function follow(x,y){

element.style.left = x + "px";

element.style.top = y +"px";

}

follow(e.clientX + offsetX, e.clientY + offsetY);

}

angle(e.clientX, e.clientY, ltPosition.right, ltPosition.bottom);

}

Here is fiddle: https://jsfiddle.net/sgvpvqhc/

What else should I do here in order to have this functionality?

Answer

What is that `theta *= 180 / Math.PI;`

doing there? `sin`

and `cos`

take the angle in radians, just like `atan`

returns it. If you want to display it, sure, convert it to degrees, but inside the `Math`

API no conversion are needed.