John Davidson

Message:

I have 2 images I am placing on top of a 1080X1920 canvas.

One is a rectangle that is 800x400 and it is sitting on the 1080X1920 canvas with top left coordinates of x=140 and y=1200

Then I have another image that is the same size of the canvas 1080X1920, but also has a rectangle on it at the exact same coordinates as the first rectangle. I am overlaying this 1080X1920 image at x=0 and y=0 on the canvas so that the rectangle already in this image lines up perfectly with the rectangle that is already placed on the canvas.

My problem is, I need to apply a rotation to both of these and the black and red rectangles need to match up in positioning AFTER the rotation is applied. Could be any rotation, but let's say it is a 15 degree rotation.

When each element is placed on the canvas and then the 15 degree rotation is applied, the rectangles no longer align because of the difference in image size and the offset in rotation as they both rotate around the center point which looks to be my only option in this case.

So I am hoping to sort out a formula I can use that would rectify the positioning of the 1080X1920 image so that the object already embedded in that image lines up with separately overlaid image.

There are of course other ways to deal with this problem, but right now, they would make things quite a bit more difficult, so I wanted to see if this was possible to calculate first.

I have tried several ways to calculate this, but am not super mathematically proficient, so I am grasping at straws at best.

Oh and because I am not extremely mathematically proficient, any dumbing-down of mathematical terms is appreciated. ;)

Oh and possibly this post answers this question, but I can't wrap my head around whether or not it does, so if someone can let me know if it does, I will try harder to understand and apply it to my particular case.

How to recalculate the coordinates of a point after scaling and rotation?

---

My Answer:
To recalculate the position of the rectangle in the 1080X1920 image after applying a 15 degree rotation, you can use the following steps:

1. Calculate the center point of the 1080X1920 image:
- CenterX = 1080 / 2 = 540
- CenterY = 1920 / 2 = 960

2. Calculate the new coordinates of the rectangle in the 1080X1920 image after rotation:
- Let's say the original coordinates of the rectangle in the 1080X1920 image are (x1, y1)
- Calculate the distance between the center point and the original coordinates:
deltaX = x1 - CenterX
deltaY = y1 - CenterY
- Calculate the new coordinates after rotation:
newX = CenterX + (deltaX * cos(15 degrees) - deltaY * sin(15 degrees))
newY = CenterY + (deltaX * sin(15 degrees) + deltaY * cos(15 degrees))

3. Place the 1080X1920 image on the canvas at x=0 and y=0, and then apply the rotation to align the rectangles.

By using these calculations, you should be able to re-align the rectangles after applying the rotation. Let me know if you need further clarification or assistance with the calculations.