Calculate point B coordinates knowing angle and distance from point A

Question

Can someone help me with a math thing. I'm trying to calculate the travel distance from point A to point b. this is what i have so far: https://editor.p5js.org/Marcel0024/sketches/Np03rgmxO I can't get the **angle ** to work, in this case i want the circle to be drawn the direction of the mouse click.

Calculate angle formula i got here: https://maththebeautiful.com/angle-between-points/

New point formula i got here: Angle between two Vectors 2D

But i can't get them to work together.

So i have (using mouse position as Point B)

function mouseClicked(){
  var angle = Math.atan2(mouseY - point1.y, mouseX - point1.x)

  const x = point1.x + Math.sin(angle) * travelDistance;
  const y = point1.y - Math.cos(angle) * travelDistance;
  
  circle(x, y, 10)
}

But the angle is way off

I don't quite get it. How is mouse position related to the angle and distance? — Konrad, Mar 12 '23 at 20:02
i'm using point B as the mouse for testing. So want i want draw a circle between point A to Point B with a limited distance. @konrad — Marcel, Mar 12 '23 at 20:05
So you want to draw a circle exactly in between two points with the radius of half of the distance between these points? — Konrad, Mar 12 '23 at 20:07
Noo, almost, so the use case is an object traveling to point b, but can only travel X distance. So given Point A and point B, point B being to far to travel to. I want to calculate a new point C. So i need the angle from Point A to Point B and with the max distance calculate Point C @konrad, see the editor.js5 example, i'm using the circle as the new point C — Marcel, Mar 12 '23 at 20:11
@Marcel Have a play with [`p5.Vector`'s `angleBetween()`](https://p5js.org/reference/#/p5.Vector/angleBetween) and [`dist()`](https://p5js.org/reference/#/p5.Vector/dist). — George Profenza, Mar 12 '23 at 23:37

score 2 · Accepted Answer · answered Mar 12 '23 at 20:27

You don't really need an angle, a vector would be enough

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const A = {
  x: canvas.width / 2,
  y: canvas.height / 2
}

const balls = 10

canvas.addEventListener('mousemove', (e) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const vector = getVector(A, getMousePos(canvas, e))
  
  for (let i = 1; i <= balls; i += 1) {
    const x = A.x + vector.x * 20 * i
    const y = A.y + vector.y * 20 * i
    ctx.fillStyle = `hsl(${i * 360 / balls}, 50%, 50%)`
    ctx.beginPath()
    ctx.arc(x, y, 5, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fill()
  }
})

function getVector(A, B) {
  const vector = {
    x: B.x - A.x,
    y: B.y - A.y
  }
  const magnitude = Math.sqrt(vector.x ** 2 + vector.y ** 2)
  const normalized = {
    x: vector.x / magnitude,
    y: vector.y / magnitude
  }
  return normalized
}

function getMousePos(canvas, evt) {
  const rect = canvas.getBoundingClientRect()
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  }
}

canvas {
  border: 1px solid black;
}

<canvas></canvas>

score 2 · Answer 2 · answered Mar 12 '23 at 20:40

There were a few issues in your code, including mixing up sin and cos, mixing positives and negatives, and not retrieving the mouse coordinates properly. This will work:

function setup() {
  createCanvas(400, 400);
}

var point1 = {
  x: 300,
  y: 200
}
var travelDistance = 50;

function draw() {
  circle(point1.x, point1.y, 10)
}

function mouseClicked({x:mouseX, y:mouseY}){
  var angle = Math.atan2(mouseY - point1.y, mouseX - point1.x)
  const x = point1.x + Math.cos(angle) * travelDistance;
  const y = point1.y + Math.sin(angle) * travelDistance;
  circle(x, y, 10)
}

Calculate point B coordinates knowing angle and distance from point A

2 Answers2