How to get top right corner of image with rotation?

General discussion about LÖVE, Lua, game development, puns, and unicorns.
User avatar
ddabrahim
Party member
Posts: 115
Joined: Mon May 17, 2021 8:05 pm
Contact:

How to get top right corner of image with rotation?

Post by ddabrahim »

Hi all.

I would like to ask for some help with some generic math problem, not specific to Lua and LÖVE.

I would like to get the X and Y position of the top right corner of the image I draw on the screen with rotation taken in to account.

I know that by default graphics is drawn from the top left corner and so I can calculate the position of the top right corner as

topRightX = image.x + image.width
topRightY = image.y

What I don't know is that how to take rotation of the image in to account? Could someone please help with the formula?

I would appreciate any help.

Thank you.
User avatar
BrotSagtMist
Party member
Posts: 274
Joined: Fri Aug 06, 2021 10:30 pm

Re: How to get top right corner of image with rotation?

Post by BrotSagtMist »

out of my head it should be
x,y= math.cos(rot)*img.x, math.sin(rot)*img.x
Id be surprized if i memorized right tho :D
obey
User avatar
darkfrei
Party member
Posts: 737
Joined: Sat Feb 08, 2020 11:09 pm

Re: How to get top right corner of image with rotation?

Post by darkfrei »

Rotation of axis
https://en.wikipedia.org/wiki/Rotation_of_axes

Don't be scared, this two formulas (5 and 6 is enough).

The trivial rotation to 90, 180, 270 degrees of point (4, 3): (-3, 4), (-4, -3), (3, -4).
User avatar
ReFreezed
Party member
Posts: 585
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: How to get top right corner of image with rotation?

Post by ReFreezed »

Here's some vector math to solve the problem.

Code: Select all

local xInImage = image.width
local yInImage = 0

local xOnScreen = image.x + xInImage*math.cos(rotation) - yInImage*math.sin(rotation)
local yOnScreen = image.y + xInImage*math.sin(rotation) + yInImage*math.cos(rotation)

-- With scaling and origin values:
local xOnScreen = image.x + (xInImage-ox)*sx*math.cos(rotation) - (yInImage-oy)*sy*math.sin(rotation)
local yOnScreen = image.y + (xInImage-ox)*sx*math.sin(rotation) + (yInImage-oy)*sy*math.cos(rotation)
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
User avatar
ddabrahim
Party member
Posts: 115
Joined: Mon May 17, 2021 8:05 pm
Contact:

Re: How to get top right corner of image with rotation?

Post by ddabrahim »

Thanks a lot guys, really appreciate the replies!

I have tried all the suggestions here and was able to get it working with the formula ReFreezed was recommending:

Code: Select all

x = image.x + image.width * math.cos(image.rotation) - 0 * math.sin(image.rotation)
y = image.y + image.width * math.sin(image.rotation) + 0 * math.cos(image.rotation)
And this is an extremely good example why I struggle so much with vector math.
How on earth can someone get the idea to use image.y + image.width and subtract 0 * rotation from it to calculate the Y position?

I was really not expecting this to work and I have no idea why is it working. :awesome:

On the other hand the other 2 formulas was recommended makes sense to me yet for some reason they didn't work.
I have implemented the formula from the wiki article like this

Code: Select all

x = (image.x + image.width) * math.cos(image.rotation) + image.y * math.sin(image.rotation)
y = -(image.x + image.width) * math.sin(image.rotation) + image.y * math.cos(image.rotation)
Maybe one day I can wrap my head around this, for now I am just greateful for the working solution :awesome:

In case someone would like to play around with it, I have setup a project I was using to test this
rotation-test.zip
(2.35 KiB) Downloaded 17 times
Thanks a lot.
User avatar
ReFreezed
Party member
Posts: 585
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: How to get top right corner of image with rotation?

Post by ReFreezed »

x and y on the wiki page are relative to the point they rotate around, which in your case would be the top left corner of the image, therefore (x+width)*cos etc. doesn't make sense here as that assumes you're rotating around (0,0) in the global coordinate system (which is the top left of the screen by default). Also note that y+ in LÖVE and some other places is down, but in most coordinate systems y+ is up, therefore the sign for y values is sometimes flipped when you look at code in different places.

I'd say it's essential to know basic trigonometry for game development, so I highly recommend studying it.
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
User avatar
ddabrahim
Party member
Posts: 115
Joined: Mon May 17, 2021 8:05 pm
Contact:

Re: How to get top right corner of image with rotation?

Post by ddabrahim »

Also note that y+ in LÖVE and some other places is down, but in most coordinate systems y+ is up
I'd say it's essential to know basic trigonometry for game development, so I highly recommend studying it.
That's really useful, it is explain why I usually get a reversed effect.
I have tried to learn trigonometry number of times but I always end up just using formulas I find online or 3rd party libraries. But it is on my list to learn at some point.

Thanks.
User avatar
zorg
Party member
Posts: 3264
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: How to get top right corner of image with rotation?

Post by zorg »

ddabrahim wrote: Thu Aug 18, 2022 7:24 pm

Code: Select all

x = image.x + image.width * math.cos(image.rotation) - 0 * math.sin(image.rotation)
y = image.y + image.width * math.sin(image.rotation) + 0 * math.cos(image.rotation)
And this is an extremely good example why I struggle so much with vector math.
How on earth can someone get the idea to use image.y + image.width and subtract 0 * rotation from it to calculate the Y position?
Because you skipped over the important part; the sine and cosine functions. You can imagine those two giving you how much the rotation contributes on each axis separately, in the simplest of terms.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
User avatar
ddabrahim
Party member
Posts: 115
Joined: Mon May 17, 2021 8:05 pm
Contact:

Re: How to get top right corner of image with rotation?

Post by ddabrahim »

zorg wrote:Because you skipped over the important part; the sine and cosine functions. You can imagine those two giving you how much the rotation contributes on each axis separately, in the simplest of terms.
Yes it would certainly help to know what sine and cosine is and how it works and what it does exactly.
I definitely need to fill this gap in my knowledge if I want to use a framework like LÖVE.

Thank you for the brief explanation. I'll keep that in mind.
User avatar
GVovkiv
Party member
Posts: 399
Joined: Fri Jan 15, 2021 7:29 am
Contact:

Re: How to get top right corner of image with rotation?

Post by GVovkiv »

ddabrahim wrote: Fri Aug 19, 2022 5:21 pm Yes it would certainly help to know what sine and cosine is and how it works and what it does exactly.
I definitely need to fill this gap in my knowledge if I want to use a framework like LÖVE.
Well, this knowledges applies not only to love, but, well, any engine/framework.
It's really hard to do anything related to geometry (or, math in overall) in games when you have 0 geometry knowledge.
Post Reply

Who is online

Users browsing this forum: No registered users and 30 guests