Mapping points inside one 2D rectangle into another smaller one

[xovangam]

in some work I'm doing i have a 2D rectangle that can be rotated and/or translated in any direction in 2D space. for example it might look like this:

(x=30,y=-10) +-----------+ (x=30,y=2)              +-- +y
                   |                |                              |
                   |    *P         |                              -x
(x=20,y=-10) +-----------+ (x=20,y=2)

i would like for that to map to another smaller 2D rectangle that has its origin fixed at the top left corner. such that if i pick some point (P) that's on the larger rectangle i want to map it to the coordinate space of the smaller rectangle:

(x=0,y=0) +-------+ (x=5,y=0)                          +-- +x
              |           |                                        |
              |  *P      |                                        +y
(x=0,y=3) +-------+ (x=5,y=3)

not quite sure how to go about setting that up...any thoughts?

TIA

 

[micromass]

Hi xovangam!

There are quite few ways in which to achieve this. The most simp way is to translate the rectangle first to the top left corner and then shrinking it accordingly.

Some notation:
Let $(x_0,y_0)$ be the top left corner of the original rectangle, let $(x_1,y_1)$ be the top right corner and let $(x_2,y_2)$ be the bottom left corner.
Let $(x_1^\prime,0)$ be the top right corner of the new rectangle and let $(0,y_2^\prime)$ be the bottom left corner. In your example, we have

$(x_0,y_0)=(30,-10)$
$(x_1,y_1)=(20,-10)$
$(x_2,y_2)=(30,2)$
$(x_1^\prime,0)=(5,0)$
$(0,y_2^\prime)=(0,3)$

The function you are looking for is

$$\left(\begin{array}{c} x\\ y\\ \end{array}\right) = \left(\begin{array}{cc} \frac{x_1^\prime}{x_1-x_0} & 0\\ 0 & \frac{y_2^\prime}{y_2-y_0}\\ \end{array}\right) \left(\begin{array}{c} x-x_0\\ y-y_0\\ \end{array}\right)$$

And indeed, we have here that (30,-10) is mapped to (0,0), that (20,-10) is mapped to (5,0) and that (30,2) is mapped to (0,3).

 

[xovangam]

thanks for the response micromass!

however, if (x1,y1) is the top right corner of the larger rectangle then it would be (30,2) and not (20,-10) as you state using my example. and that actually is what demonstrates the issue i have in that in this example the larger rectangle has been rotated such that it is oriented +y from the left to the right side on the top and bottom, and the smaller rectangle differs in that it has +x in that same direction. but i still want to project points inside the larger rectangle at that orientation into the smaller rectangle. so it's almost like i need a change of basis or something, but I'm not quite sure how to put that into the transformation matrix.

 

[micromass]

thanks for the response micromass!

however, if (x1,y1) is the top right corner of the larger rectangle then it would be (30,2) and not (20,-10) as you state using my example. and that actually is what demonstrates the issue i have in that in this example the larger rectangle has been rotated such that it is oriented +y from the left to the right side on the top and bottom, and the smaller rectangle differs in that it has +x in that same direction. but i still want to project points inside the larger rectangle at that orientation into the smaller rectangle. so it's almost like i need a change of basis or something, but I'm not quite sure how to put that into the transformation matrix.

Ah, you do want the rotation?? I just thought you messed up the drawing for some reason I'm sorry, I should have asked.

Anyway, you have

(x0,y0)=(30,−10)
(x1,y1)=(30,2)
(x2,y2)=(20,-10)
(x′1,0)=(5,0)
(0,y′2)=(0,3)

Anyway, then the matrix should be

$$\left(\begin{array}{c} x\\ y\\ \end{array}\right) = \left(\begin{array}{cc} 0 & \frac{y^\prime}{y_1-y_0}\\ \frac{x^\prime}{x_2-x_0} & 0\\ \end{array}\right) \left(\begin{array}{c} x-x_0\\ y-y_0\\ \end{array}\right)$$

 

[xovangam]

what if i don't know what the orientation of the larger rectangle is, i.e. it could be any arbitrary rotation. in the example i gave (perhaps a poor choice) it is rotated exactly 90 degrees, but it may also be rotated say, only 10 degrees instead. the orientation of the rectangle is an unknown factor in this case (though i guess i could compute that relative to the standard R² basis vectors).

anyway so if the larger rectangle is arbitrarily oriented about the X and Y axes in 2D space that would require a different transform correct? again the smaller rectangle that i want to map to is always oriented in the same way with (0,0) in the top left corner, +X to the right and +Y down.

i've attached 2 GIFs to try and better visualize what i would like to do.

 

[chiro]

If you want a generic rotation about an arbitrary point just compose translation and rotation matrices to achieve your transform. If you need to scale, then again compose them with the other transformations.

Just make sure you do the composition of maps in the right order.

 

[micromass]

OK, let's do this in complete generality.

Let's say that your first rectangle is described by (x₀,y₀),(x₁,y₁),(x₂,y₂). And your second rectangle is described by (x₀',y₀'),(x₁',y₁'),(x₂',y₂') And you want to send (x_i,y_i) to (x_i',y_i'). Then your transformation should be

$$\left(\begin{array}{c} x\\ y\\ \end{array}\right) = \left(\begin{array}{cc} \frac{(y_1-y_0)(x_2^\prime-x_0^\prime)-(y_2-y_0)(x_1^\prime-x_0^\prime)}{(x_2-x_0)(y_1-y_0)-(x_1-x_0)(y_2-y_0)} & \frac{(x_1-x_0)(x_2^\prime-x_0^\prime)-(x_2-x_0)(x_1^\prime-x_0^\prime)}{(x_1-x_0)(y_2-y_0)-(x_2-x_0)(y_1-y_0)}\\ \frac{(y_1-y_0)(y_2^\prime-y_0^\prime)-(y_2-y_0)(y_1^\prime-y_0^\prime)}{(x_2-x_0)(y_1-y_0)-(x_1-x_0)(y_2-y_0)} & \frac{(x_1-x_0)(y_2^\prime-y_0^\prime)-(x_2-x_0)(y_1^\prime-y_0^\prime)}{(x_1-x_0)(y_2-y_0)-(x_2-x_0)(y_1-y_0)}\\ \end{array}\right) \left(\begin{array}{c} x-x_0\\ y-y_0\\ \end{array}\right) + \left(\begin{array}{c} x_0^\prime\\ y_0^\prime\\ \end{array}\right)$$

 

[xovangam]

isn't this a change of basis though? disregarding scale, i guess I'm not clear on how i could rotate the larger rectangle within the standard R² space and end up with the coordinate system of the smaller rectangle (where positive Y is flipped to point down with positive X still pointing to the right, but with P still at the top-left of the rectangle). i.e. I'm not sure what that transform (composed or otherwise) would look like.

 

[xovangam]

that almost works

if Q in the larger rectangle is (-x,-y) however, it's coming out as (-x',-y'), which is outside the boundary of the smaller rectangle. though the values seem correct, they are just negated to the opposite (-x,-y) quadrant it looks like. maybe i set it up wrong, i will double-check..

 

[xovangam]

ok, so to summarize the results, the solution proposed by micromass worked (thanks!), but i had to negate the (xi',yi') result for any point (xi, yi) inside the larger rectangle that i transformed. i *think* this is because the coordinate system for the larger rectangle actually does have the y-axis flipped around (see result) such that positive Y points down instead of up (see attached).

does that make sense?

 

[micromass]

ok, so to summarize the results, the solution proposed by micromass worked (thanks!), but i had to negate the (xi',yi') result for any point (xi, yi) inside the larger rectangle that i transformed. i *think* this is because the coordinate system for the larger rectangle actually does have the y-axis flipped around (see result) such that positive Y points down instead of up (see attached).

does that make sense?

Yes, that makes sense. If you flip the y-axis, then you'll have to negate the result.

 

[xovangam]

very cool.

thank you sir you've been more than helpful!