Help with a visual effect

[SkripT]

Hi, I want to know what's the simple way to obain this visual effect: a rectangle (for example) that rotates 180 degrees from the Y axis:

Coordinate system                      
                        |Y
                        |
                        |
                        |
                        |_________________ X
                       /
                     /
                   /
                 / Z

Coordinate system                      
                        |Y
                        |
                        |
                        |
                        |_________________ X
                       /
                     /
                   /
                 / Z

To copy to clipboard, switch view to plain text mode 

All I want is to emulate the effect of a page (of a book) turning around
I think that I could use openGL but I don't hve much experinece with it, maybe it can be easily achieved with QPainter
Thanks in advance.

[jacek]

If you have a point (x, y, z) and you rotate it around Y axis by a degrees, you'll get (x', y', z') where:
x' = x cos a + z sin a,
y' = y,
z' = -x sin a + z cos a.

Second thing you will need is a projection. In this case it probably will be enough if you use:
xp = x - z
yp = y + z
(where xp, and yp are the painter coordinates).

The algorithm:

• translate the painter so that the (0, 0) point is in the middle of the top edge of the book,
• x1 = width/2, y1 = 0, z1 = 0, (upper corner of the page)
• x2 = width/2, y2 = height, z2 = 0, (lower corner of the page)
• for a = 0, 1, ..., 180:
  
  • calculate new x1, y1, z1, x2, y2 and z2
  • draw a (0, 0)--(x1-z1, y1-z1)--(x2-z2, y2-z2)--(0, height) rectangle

Note that in fact x1 == x2, z1 == z2 and both y1 and y2 are constant.

[SkripT]

Thanks a lot jacek, good knowledge of maths

EDIT: taking a look at this alogrithm carefully, I think that it will paint the rectangle with the correct size in each degree, the problem is that I want to paint an image (texture) on this rectangle and I want that it "deforms" with each degree. Is it still possible with QPainter?

[jacek]

I want that it "deforms" with each degree. Is it still possible with QPainter?

Try QPainter::setMatrix() or QImage::transform().

[wysota]

Wouldn't it be enough to transform the painter matrix to do it all?

Hmm... Looks like QMatrix is just 2x2 in size...

[jacek]

Looks like QMatrix is just 2x2 in size...

No, it's 3x3, but the last column is [0;0;1]. Anyway, it will be enough, since you only have to shear and scale the painter (or image).

[SkripT]

Thanks a lot jacek and wysota for your replies. My question is: so, using QMatrix is enought to do all the rotations/shear/scale that I need applied on the image or the rectangle to simulate the effect that I need? QMatrix seems to work only in 2D and this effect has a 3D component I think....

[jacek]

QMatrix is enought to do all the rotations/shear/scale that I need applied on the image or the rectangle to simulate the effect that I need?

Theoretically, yes.

QMatrix seems to work only in 2D and this effect has a 3D component I think....

Do you have a 3D monitor?

[SkripT]

Theoretically, yes.

Do you have a 3D monitor?

Not, but now I know what to request for christmas .

I will try with QMatrix it and I comment the results

[SkripT]

Hi again, I've been reading carefully and testing what the docs explains from QMatrix class and I don't know how could I use it to obtain the effect that I want . I know that I should call QMatrix::shear and QMatrix::scale in some way because, as the docs says, "...Rotation is achieved by carefully setting both the shearing factors and the scaling factors" but I don't know how
It's clear that I'm not a math expert... Could you please guide me a little bit in how could I configure the QMatrix to get the respective "transformated" rectangle for each angle rotated? Thanks again.

[wysota]

Try those:
http://www.inversereality.org/tutori...wmatrices.html
http://gpwiki.org/index.php/3D:Matrix_Math

[SkripT]

Thanks a lot wysota. Now I know that to rotate from the Y-axis, I have to use the following matrix:

Matrix:
cosa    0   -sina   0
0         1      0     0
sina     0   cosa   0
0         0     0      1

Matrix:
cosa    0   -sina   0
0         1      0     0
sina     0   cosa   0
0         0     0      1

To copy to clipboard, switch view to plain text mode 

Now the problem is that QMatrix works with 3x3 matrixs How can I transfrom this matrix in terms of QMatrix?

[wysota]

Jacek has always been much better at maths (especially matrices) than me, so he'll probably correct me but I think using ( cosa, -sina, sina, cosa) could do the trick. Try it, maybe it works, but you should wait for Jacek's reply anyway.

[SkripT]

Ok thanks anyway wysota. I think that, as I comented, QMatrix uses only 3x3 matrix because they work in 2D...

[wysota]

Yes, but you should be able to achieve the same result with a smaller matrix. The equation will just be more complicated (or use more than one QMatrix).

[SkripT]

Hi again, I attach the code that I use, trying as wysota comments. The problem is that the rotation is done in 2D, so if I try to rotate an image 90º from the Y axis, the result is not a vertical line or even a null image

#include <QtGui>
#include <math.h>
 
 
int main(int argc, char *argv[])
{
    	QApplication a(argc, argv);
 
	QImage imatge("../test.jpg");
 
        double radians = 90 * 3.14159265 / 180;  //rotation of 90º
 
	imatge = imatge.transformed(QMatrix(cos(radians),-sin(radians),sin(radians),cos(radians),0,0));
        imatge.save("../transformated.jpg", "jpg");
 
	return 0;
}

#include <QtGui>
#include <math.h>
 

int main(int argc, char *argv[])
{
    	QApplication a(argc, argv);

	QImage imatge("../test.jpg");

        double radians = 90 * 3.14159265 / 180;  //rotation of 90º

	imatge = imatge.transformed(QMatrix(cos(radians),-sin(radians),sin(radians),cos(radians),0,0));
        imatge.save("../transformated.jpg", "jpg");

	return 0;
}

To copy to clipboard, switch view to plain text mode 

I think that's not as easy as that code

[jacek]

Let's see... you need a matrix that for given angle a will transform the (0, 0)--(width/2, 0)--(width/2, height)--(0, heigth) rectangle into (0, 0)--(x1-z1, y1+z1)--(x2-z2, y2+z2)--(0, height).

QMatrix works like this:
x' = m11*x + m21*y + dx
y' = m22*y + m12*x + dy

Since we need to map (0,0) to (0,0), dx = dy = 0.

(0, height) must be mapped to (0, height), so:
0 = m11*0 + m21*height + 0
height = m22*height + m12*0 + 0,
thus:
m21 = 0 and m22 = 1.

(width/2, 0) must be mapped to (x1-z1, y1+z1), where x1, y1, z1 are coordinates of a (width/2,0,0) point rotated around Y axis by a degrees, so:
x1 = width/2 cos a
y1 = 0
z1 = -width/2 sin a

x1 - z1 = width/2 ( sin a + cos a )
y1 + z1 = -width/2 sin a

width/2 (sin a + cos a ) = m11 * width/2
-width/2 sin a = 0 + m12* width/2

which gives us: m11 = sin a + cos a and m12 = - sin a

Whole matrix:

/ sin a + cos a   - sin a   0 \
|       0            1      0 |
\       0            0      1 /

/ sin a + cos a   - sin a   0 \
|       0            1      0 |
\       0            0      1 /

To copy to clipboard, switch view to plain text mode 

[SkripT]

Wow jacek, you're a machine in maths Now it give better results, but the rotation in 90º is not a "slim" image . Here's the code:

#include <QtGui>
#include <math.h>
 
 
int main(int argc, char *argv[])
{
    	QApplication a(argc, argv);
 
	QImage imatge("../proba.jpg");
 
        double radians = 90 * 3.14159265 / 180;
 
	imatge = imatge.transformed(QMatrix(sin(radians)+cos(radians),-sin(radians),0,1,0,0));
        imatge.save("../transformada.jpg", "jpg");
 
	return 0;
}

#include <QtGui>
#include <math.h>
 

int main(int argc, char *argv[])
{
    	QApplication a(argc, argv);

	QImage imatge("../proba.jpg");

        double radians = 90 * 3.14159265 / 180;

	imatge = imatge.transformed(QMatrix(sin(radians)+cos(radians),-sin(radians),0,1,0,0));
        imatge.save("../transformada.jpg", "jpg");

	return 0;
}

To copy to clipboard, switch view to plain text mode 

[jacek]

With this you'll get a better result:

/ 0.5 sin a + cos a   - 0.5 sin a   0 \
|          0                1       0 |
\          0                0       1 /

/ 0.5 sin a + cos a   - 0.5 sin a   0 \
|          0                1       0 |
\          0                0       1 /

To copy to clipboard, switch view to plain text mode 

[SkripT]

Really good example jacek, thanks a lot