7

I want to translate a point to specific distance, along a line whose angle is given in degrees.

var initialPoint = [0,0];   //Starting Point
var distance = 100;         //Distance in pixels to be translated
var degree = 45;            //Direction of move
var translatedPoint = moveByDegree(initialPoint, degree, distance);

function moveByDegree(initialPoint, degree, distance)
{
    //formula to generate translatedPoint by degree & distance
    // . . . 

    return translatedPoint;
}
  • 0 degree should move UP.
  • 180 degree should move DOWN.
  • 90 degree should move RIGHT.
  • 270 degree should move LEFT.
  • Other angles would correspond to a DIAGONAL direction.

Give me simple algorithm or JavaScript code.

Rashid
  • 1,244
  • 3
  • 13
  • 29
  • 1
    Basicly, from the origin: `x: Math.cos(angle) * dist` and `y` calculated with `sin`. Though in this formula `0` is to right, and `angle` should be in radians. If you start off origin, just add the corresponding offset to the results. – Teemu Dec 29 '16 at 12:17
  • Do you compute in screen coordinates or in Cartesian coordinates in the usual orientation? – Lutz Lehmann Dec 29 '16 at 15:03

1 Answers1

13

You have to give the initial point, the angle and the unit of movement.

Math.radians = function (degrees) {
  return degrees * Math.PI / 180;
};

function move(point, angle, unit) {
  const rad = Math.radians(angle % 360);

  let [x, y] = point;
  x += unit * Math.sin(rad);
  y -= unit * Math.cos(rad);

  return [x, y];
}

//////////////////
// demo:
const FPS = 60;
const jump = 3;
let angle = 135;
let point = [0, 0];

function animate () {
  // calculate new point
  point = move(point, angle, jump); 
  const [x, y] = point;
  
  // update ball position
  ball.style.left = x + 'px'
  ball.style.top = y + 'px'

  // continue animating while conditions fulfils
  if( x >= 100 && y >= 100 )
    angle = -45;
  else if( x <= 0 && y <= 0 )
    angle = 135;

  setTimeout(animate, 1000/FPS);
}

animate();
b {
  padding: 10px;
  background: red;
  position: absolute;
  border-radius: 50%;
}
<b id='ball'></b>

The output will look like [1.2246467991473532e-14, 100] - this due to how Floating-point unit (FPU) arithmetic works.

vsync
  • 118,978
  • 58
  • 307
  • 400
Ali Yousuf
  • 692
  • 8
  • 23
  • You mean to say the formula works fine for up and down only, but the on other angles, it is moving the point in the opposite direction, correct? – Ali Yousuf Mar 16 '17 at 10:23
  • Just answer the following, if the starting point is [0,0] and the angle is 90 degree, the unit movement is 100, what should be the output position? [100, 0] or [-100, 0] – Ali Yousuf Mar 16 '17 at 10:25
  • Sorry brother I was missing (angle % 360). Thank you so much. – Rashid Mar 17 '17 at 05:15
  • I'm glad it helped :) – Ali Yousuf Mar 17 '17 at 10:12
  • 1
    In order for `move([0, 0], 180, 100)` to output `[0, 100]` it should read `y += unit * -Math.cos(rad);` instead of `y += unit * Math.cos(rad);` – shlgug Nov 09 '20 at 19:14