Page 1 of 1

Help me displaying my vector pls x_x

Posted: Sat Apr 15, 2017 9:41 pm
by 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? :P

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
Image

Re: Help me displaying my vector pls x_x

Posted: Sat Apr 15, 2017 10:26 pm
by Ref
Something like this?

Re: Help me displaying my vector pls x_x

Posted: Sat Apr 15, 2017 10:49 pm
by 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 :awesome:

Re: Help me displaying my vector pls x_x

Posted: Sat Apr 15, 2017 11:09 pm
by Marcus Aseth
here it is, works beatifully, thanks again :3 (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 182 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? :P
Or any online resource that helped you in the past, whatever works, I just want to get hold of them :awesome:

Re: Help me displaying my vector pls x_x

Posted: Sat Apr 15, 2017 11:27 pm
by s-ol
Marcus Aseth wrote: Sat Apr 15, 2017 11:09 pm here it is, works beatifully, thanks again :3 (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? :P
Or any online resource that helped you in the past, whatever works, I just want to get hold of them :awesome:
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).

Re: Help me displaying my vector pls x_x

Posted: Mon Apr 17, 2017 4:25 am
by 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? :shock: