Help me displaying my vector pls x_x

[Marcus Aseth]

Code and image below.
Basically I'm trying to diplay an arrow (pointing in the direction the ball is traveling) at the end of the yellow movement vector, I'm almost there but as you can see, one of the 2 "pointy-lines" of the arrow is pointing 270° instead of 90°.
If I negate the Y for that "pointy-line"in the code, it solve that particular case but as soon as the ball bounce the wall, the resoult is mirrored again, so I think it has to do with the circle's quadrants or something.
How do you guys achieve this the smart way?

Code: Select all

local function showDirection(entity, lineLenght)
  --find center pivot
  local lineStartX = entity.x + entity.width / 2
  local lineStartY = entity.y + entity.height / 2
  --find length of vector
  local lineEndX = lineStartX + entity.direction.x * entity.speed * lineLenght
  local lineEndY = lineStartY + entity.direction.y * entity.speed * lineLenght

  --main line
  love.graphics.setColor(235, 235, 0, 255)
  love.graphics.line(lineStartX, lineStartY, lineEndX, lineEndY)

  --degAngle is the angle of the movement vector range 0°-360°
  local degAngle = helpers.findDegAngle({ x = lineStartX, y = lineStartY }, { x = lineEndX, y = lineEndY })
  --arrow line 1
  local Radius = math.sqrt(math.pow(lineEndX - lineStartX, 2) + math.pow(lineEndY - lineStartY, 2)) / 3
  local arrow1Angle = (degAngle + 135) % 360
  local line1X = lineEndX + Radius * math.cos(math.rad(arrow1Angle))
  local line1Y = lineEndY + Radius * math.sin(math.rad(arrow1Angle))
  love.graphics.line(lineEndX, lineEndY, line1X, line1Y)

  --arrow line 2
  local arrow2Angle = (degAngle + 225) % 360
  local line2X = lineEndX + Radius * math.cos(math.rad(arrow2Angle))
  local line2Y = lineEndY + Radius * math.sin(math.rad(arrow2Angle))
  love.graphics.line(lineEndX, lineEndY, line2X, line2Y)
end

[Ref]

Something like this?

[Marcus Aseth]

So atan2 is the answer, I had though of trying that since in the lua documentation about it it says " but uses the signs of both parameters to find the quadrant of the result. (It also handles correctly the case of x being zero.)" Though I was trying to avoid it since I get confused when handling radians.
Oh well, I'll try that way then, thanks

[Marcus Aseth]

here it is, works beatifully, thanks again (though I still don't really like working with radians, I guess I need to understand them better in order to like them)

Breaker.love

(9.96 KiB) Downloaded 189 times

now my code looks like

Code: Select all

local function showDirection(entity, lineLenght)
  --find center pivot
  local lineStartX = entity.x + entity.width / 2
  local lineStartY = entity.y + entity.height / 2
  --find length of vector
  local lineEndX = lineStartX + entity.direction.x * entity.speed * lineLenght
  local lineEndY = lineStartY + entity.direction.y * entity.speed * lineLenght

  --main line
  love.graphics.setColor(235, 235, 0, 255)
  love.graphics.line(lineStartX, lineStartY, lineEndX, lineEndY)

  local radAngle = math.atan2((lineEndX - lineStartX), (lineEndY - lineStartY))
  --arrow line 1
  local Radius = math.sqrt(math.pow(lineEndX - lineStartX, 2) + math.pow(lineEndY - lineStartY, 2)) / 3
  local arrow1Angle = ( -0.25 * math.pi  - radAngle )
  local line1X = lineEndX + Radius * math.cos(arrow1Angle)
  local line1Y = lineEndY + Radius * math.sin(arrow1Angle)
  love.graphics.line(lineEndX, lineEndY, line1X, line1Y)

  --arrow line 2
  local arrow2Angle = (-0.75 * math.pi  - radAngle)
  local line2X = lineEndX + Radius * math.cos(arrow2Angle)
  local line2Y = lineEndY + Radius * math.sin(arrow2Angle)
  love.graphics.line(lineEndX, lineEndY, line2X, line2Y)
end

Can you guys give me further insight regarding the line "local arrow1Angle = ( -0.25 * math.pi - radAngle )", why it is changing the angle the way it is or just suggest me some me some way for me to think about radians that can help me make better sense of them?
Or any online resource that helped you in the past, whatever works, I just want to get hold of them

[s-ol]

here it is, works beatifully, thanks again (though I still don't really like working with radians, I guess I need to understand them better in order to like them)

Breaker.love

now my code looks like

Code: Select all

local function showDirection(entity, lineLenght)
  --find center pivot
  local lineStartX = entity.x + entity.width / 2
  local lineStartY = entity.y + entity.height / 2
  --find length of vector
  local lineEndX = lineStartX + entity.direction.x * entity.speed * lineLenght
  local lineEndY = lineStartY + entity.direction.y * entity.speed * lineLenght

  --main line
  love.graphics.setColor(235, 235, 0, 255)
  love.graphics.line(lineStartX, lineStartY, lineEndX, lineEndY)

  local radAngle = math.atan2((lineEndX - lineStartX), (lineEndY - lineStartY))
  --arrow line 1
  local Radius = math.sqrt(math.pow(lineEndX - lineStartX, 2) + math.pow(lineEndY - lineStartY, 2)) / 3
  local arrow1Angle = ( -0.25 * math.pi  - radAngle )
  local line1X = lineEndX + Radius * math.cos(arrow1Angle)
  local line1Y = lineEndY + Radius * math.sin(arrow1Angle)
  love.graphics.line(lineEndX, lineEndY, line1X, line1Y)

  --arrow line 2
  local arrow2Angle = (-0.75 * math.pi  - radAngle)
  local line2X = lineEndX + Radius * math.cos(arrow2Angle)
  local line2Y = lineEndY + Radius * math.sin(arrow2Angle)
  love.graphics.line(lineEndX, lineEndY, line2X, line2Y)
end

Can you guys give me further insight regarding the line "local arrow1Angle = ( -0.25 * math.pi - radAngle )", why it is changing the angle the way it is or just suggest me some me some way for me to think about radians that can help me make better sense of them?
Or any online resource that helped you in the past, whatever works, I just want to get hold of them

radians aren't very complicated, it's just that instead of defining a full circle as '360 degrees' you define it as 'two times pi'.
So
full rotation = 2 * pi
half rotation = pi
right angle = pi / 2

and so you can see that

(-0.75 * math.pi) = -3/4 * math.pi = - 3/8 * (math.pi * 2)

means 'three eights of a full rotation', counterclockwise, since positive angles in love2d rotate clockwise, and this one is negative.
The reason that 2 pi are the number chosen for radians is that when you have an arc that spans N radians with a radius R, then the length of that arc is R * N (as opposed to alpha/180° * math.pi * R, which - big surprise - is the same as doing the calculation in radians in the first place).

[Marcus Aseth]

Thanks for the explanation s-ol, I think that another reason I was a bit confused about it was that (unless I did something horribly wrong) the circle seems rotated 90° counter-clockwise compared to the image of it I see on google, meaning pi/2 is on the left

Edit: maybe is that multiplying by -0.75 and -0.25 is mirroring it?