How to rotate a rectangle in 3d space using an axi

Question

I'm looking forward mathematical or algorithmic calculation of rotating a rectangle with a fixed axis as a HINGE. As you can see in the below picture.

I have positions (x,y) of 4 points of rectangle vertices, and the origin is center of the rectangle, so the desired algorithm will project my original shape's vertices into the desire shape vertices. (Please see image below)

I know it's easy to do it with 3d libraries but i need to do it with 2d graphics in a high-level programming language like .Net or JAVA or something without any 3d or complementary library.

Please help me with any idea or reference or better than all a source code or algorithm.

Thanks in advance for you quality time.

Answer 1

From my experience, when working with two dimensions, I have found immense success with a wonderful tool called processing. Processing is an extension of the Java programming language, targeted specifically at the visualization of anything, ranging from data structures to intimidating physics simulations. From the helpful graphics you presented, I am assuming you want to rotate one structure around a point or axis at any given time. Take a look at the feature rich API reference, processing offers (I am a new user, unfortunately I can not link more than two items, will put link to API reference below). They have unique functions for rotating and transforming around points. However, it does not rotate the structure around said point, but rather, rotates the entire screen and everything it contains around the point. For example, if you wanted to rotate everything around the origin (0,0) by 45 degrees, it would be as simple as:

void setup()
{
  size(200, 200); // Set the size of the screen to 200 x 200 pixels
  background(255); // Set the background to white
  smooth(); // Smooth the edges of the rectangles
  fill(192); // Fill the rectangle with a light gray
  noStroke(); // No black border on rectangle
  rect(40, 40, 40, 40); // Create an equilateral rectangle (square) that is 40 x 40 pixels at the point (40,40)

  pushMatrix(); //Let the compiler know that you will be modifying the Matrix
  rotate(radians(45)); // Rotate the screen about the origin (by default) 45 degrees clockwise
  fill(0); // Color the following rectangle black
  rect(40, 40, 40, 40); // Draw an equivalent rectangle as the last one, only at the new modified screen coordinates
  popMatrix(); // Let the compiler know you are done modifying the matrix
}

The above code will create two identical squares, one at the point (40,40) and one at 45 degrees about the origin clockwise.

There is a really detailed tutorial out there that can be found here which explains everything in much greater detail. I really hope this helps. All the best! API Reference: processing.org/reference/

Answer 2

Summarizing my comments above:

• http://en.wikipedia.org/wiki/Rotation_matrix
• http://en.wikipedia.org/wiki/3D_projection
• http://en.wikipedia.org/wiki/Viewing_frustum