Calculating position for rotated image

Question

Hi all,

I have a couple of images, representing tents, that look like this:

The red and blue parts on each side of the tents are doorways, and several tents can be connected together via these doorways. For example, I want to connect the two blue doorways so that they match up like in this picture:

If the first tent is stationary, around which point do I rotate the second tent and how do I calculate where to place it?

Currently, I have the upper left corner of each doorway as an x and a y value, together with the width and direction (in degrees) of the door. I'm treating the doorways as one dimensional, so they don't have heights. Would another representation suit this better? Perhaps a start point and an end point plus direction?

I'm coding this in Flex/AS3, but I'm more after a way of thinking than code, though code would be appreciated too!

Answer 1

Got this fixed, after many mangled braincells. What I did was to first move the registration point of each tent to the center and calculate the doorways from there. I also changed the doorways into single point representations, set in the center of each doorway.

To get the position of the second tent, I did the following:

1. Rotate the first tent so that the right doorway was facing north/upwards
2. Rotate the second tent so that the right doorway was facing south/downwards

3. Calculate the position of the first tent's doorway using

   

4. Calculate the position of the second tent by placing it's doorway at the same point as the first tent's doorway

5. Rotate the coordinate of the second tent by as much as the first tent was rotated but in the opposite direction

Image from Wikipedia: http://en.wikipedia.org/wiki/Rotation_%28mathematics%29