copyright @ 2002 by jim x. chen george mason university transformation and viewing.1. plane example:...

Copyright @ 2002 by Jim X. Chen George Mason University

Transformation and ViewingTransformation and Viewing

.1.

PlanePlane

Example: J2_0_2DTransform



.2.

2D TRANSFORMATIONS2D TRANSFORMATIONS

• Translate

xdxx 'ydyy '

y

xP

'

''

y

xP

y

x

d

dT

We have: TPP '

P’

Pdx

dy

y

x



.3.

• Scale

xsxx '

y

x

s

s

y

x

y

x

0

0'

'

ysyy '

or PSP '

P

Before scaling After scaling by (2, 2)

x

y P

x

y



.4.

• Rotate

or P’ = RP

sincos' yxx cossin' yxy

y

x

y

x

cossin

sincos'

'

P

y

x

P’

x’ = rcos(); y’ = rsin();

x’ = r(coscos – sinsin);

y’ = r(sincos + cossin);

r



.5.

Homogeneous coordinatesHomogeneous coordinatesP’ = T+P; P’ = S*P; P’ = R*P;

• If points are expressed in homogeneous coordinates, all three transformations can be treated as multiplications.

That is, P’ = T(dx,dy) P

1100

10

01

1

'

'

y

x

d

d

y

x

y

x

1100

00

00

1

'

'

y

x

s

s

y

x

y

x

1100

0cossin

0sincos

1

'

'

y

x

y

x

That is, P’ = S (Sx,Sy) P

That is, P’ = R() P



.6.

// Let’s say the current matrix on matrix[3][3] is Mmy2dLoadIdentity();// M<=I;

my2dTranslatef(float dx, float dy); // M<=MT(dx, dy);

my2dRotatef(); // M<= MR();

my2dScalef(float sx, float sy); // M<=MS(sx, sy);

Example: J2_0_2DTransform

Float M[3][3]; // Current Matrixmultiply

Implementation (my2dGL)Implementation (my2dGL)



.7.

• Combination of translations and transformation matrix

'22

''11

' ,,, PddTPPddTp yxyx

p ''

Float matrix[3][3];

my2dLoadIdentity();my2dTranslatef(dx2,dy2); my2dTranslatef(dx1,dy1); transDraw(p);

// what is transDraw? transDraw(object); // vertices are transformed first

// before renderingtransDraw(float x, y) { mult(&x, &y, matrix); // (x, y) is transformed by the matrix Draw(x, y);}

22 11, ,ddT PddTyx yxp

p’

p’’

Example: J2_0_2DTransform public void display(GLAutoDrawable drawable) {

if (cnt<1||cnt>200) { flip = -flip; } cnt = cnt+flip;

gl.glClear(GL.GL_COLOR_BUFFER_BIT);

// white triangle is scaled

gl.glColor3f(1, 1, 1); my2dLoadIdentity(); my2dScalef(cnt, cnt);

transDrawTriangle(vdata[0], vdata[1], vdata[2]);

// red triangle is rotated and scaled

gl.glColor3f(1, 0, 0); my2dRotatef((float)cnt/15);


// green triangle is translated, rotated, and scaled

gl.glColor3f(0, 1, 0); my2dTranslatef((float)cnt/100, 0.0f);


}




.9.

COMPOSITION OF 2D TRANSFORMATIONCOMPOSITION OF 2D TRANSFORMATION

To rotate about a point P1

1. Translate so that P1 is at the origin2. Rotate3. Translate so that the point returns to P1(x1, y1)

T(x1, y1)R()T(-x1, -y1)

2D Examples

Plane LabPlane Lab

x

c (x 0,y 0)

h(x 1,y 1)

h'

y

x

y

o

B f

C f

Af

Example J2_1_Clock2d



.10.

Example 1: draw a current time clock in 2D spaceExample 1: draw a current time clock in 2D space

h’=T(c)R(-)T(-c)h

drawHand(c, h’);

h1 (x11,y11)

x

c(x0,y0)

h(x1 ,y1)

h'

xh2 (x12,y12)

xx

c(x0,y0)

h

h'(x'1,y'1)

Initial position: hDestination: h'

Step 1. translate:h1 = T(-x0,-y0)h

Step 2. rotate:h2 = R(- )h1

Step 3. translate:h' = T(x0,y0)h2

y y yy

x'1

y'1

1

1 0 x0

0 1 y0

0 0 1

cos sin 0sin– cos 0

0 0 1

1 0 x0–

0 1 y0–

0 0 1

x1

y1

1

=



.11.

h’=T(c)R(-)T(-c)h

drawHand(c, h’);

h1(x 11 ,y 11 )

x

c (x 0,y 0)

h(x 1,y 1)

h'

xh2(x 12, y12)

xx

c (x 0,y 0)

h

h'(x' 1,y '1)

In it ial pos it ion : hD e sti n ati on : h '

S te p 1 . tr an sl ate :h 1 = T(-x0, -y0)h

S te p 2. r ota te :h

2 = R (-)h1

S t ep 3. t ran s lat e :h ' = T (x0,y 0)h 2

y y yy

Float matrix[3][3];

my2dLoadIdentity();my2dTranslatef(x0, y0);my2dRotatef(-);my2dTranslatef(-x0, -y0);transDraw(c, h); //transVertex(V, V1);

J2_1_Clock2d

public void display(GLAutoDrawable glDrawable) {

my2dLoadIdentity();

my2dTranslatef(c[0], c[1]);

my2dRotatef(-hAngle);

my2dTranslatef(-c[0], -c[1]);

transDrawClock(c, h);

}




.13.

Example 2: Example 2: ReshapeReshape a rectangular area: a rectangular area:

T(P2)S(sx,sy)T(-P1)P

After reshaping, the area and all the vertices (or models) in the area go through the same transformation

Before reshaping After reshaping

p1 p

2

Translate Scale Translate

ab

c d

sx = d/csy = b/a

Example: J2_2_Reshape

J2_2_Reshape: Mouse


public class J2_2_ReshapePushPop extends J2_1_Clock2d implements MouseMotionListener { // the point to be dragged as the lowerleft corner private static float P1[] = {-WIDTH/4, -HEIGHT/4};

// the lowerleft and upperright corners of the rectangle private static float v0[] = {-WIDTH/4, -HEIGHT/4}; private static float v1[] = {WIDTH/4, HEIGHT/4};

// reshape scale value private float sx = 1, sy = 1;

……

J2_2_Reshape: Mouse


public class J2_2_ReshapePushPop extends J2_1_Clock2d implements MouseMotionListener { …… // when mouse is dragged, a new lowerleft point and scale value for the rectangular area public void mouseDragged(MouseEvent e) { float wd1 = v1[0]-v0[0]; float ht1 = v1[1]-v0[1];

// The mouse location, new lowerleft corner P1[0] = e.getX()-WIDTH/2; P1[1] = HEIGHT/2-e.getY(); float wd2 = v1[0]-P1[0]; float ht2 = v1[1]-P1[1];

// scale value of the current rectangular area sx = wd2/wd1; sy = ht2/ht1; }

J2_2_Reshape: display


public void display(GLAutoDrawable glDrawable) {

// reshape according to the current scale my2dLoadIdentity(); my2dTranslatef(P1[0], P1[1]); my2dScalef(sx, sy); my2dTranslatef(-v0[0], -v0[1]);…}


x

y

A

B

C

o

x

y

o

A B C

A’ = R() A; B’ = R() B; C’ = R() C;

B’’ = T(A’) R() T(-A’) B’; C’’ = T(A’) R() T(-A’) C’;Cf = T(B’’) R() T(-B’’) C’’;

The initial A, B, and C are at arbitrary positions.


.17.

Robot Robot ArmArmExample 3: draw an Example 3: draw an arbitraryarbitrary 2D robot arm: 2D robot arm:

Example: J2_3_Robot2d


B’

y

o

A B C

x

y

o

A f

B ’C’

x

y

o

B f

C f

A f

x

y

o

B f

C’’

A f

In it ial p os i tio n: (A, B , C)

Ste p 1 Step 2 S tep 3

x

y

o

C ’

A B

x

y

o

C ’ ’

A

y

o

B ’ C’

A f

x

y

o

B f

C’

Af

x

F ina l p osi t ion

Ste p 1

Step 1

S te p 2

S te p 2

S te p 3

S te p 3

Me thod I :

M ethod II:

M ethod III:

x


y

o

A B C

x

y

o

Af

B’C’

x

y

o

B f

C f

Af

x

y

o

B f

C’’

Af

Initial position: (A, B, C)

Step 1 Step 2 Step 3

Final position

Method I:

x

Float matrix[3][3];

my2dLoadIdentity(); // Af=R(a)A; B1=R(a)B; C1=R(a)C;my2dRotatef(); transVertex(A, Af); transVertex(B, B1); transVertex(C, C1);Draw (O, Af); my2dLoadIdentity(); // M=T(Af)R(b)T(-Af);my2dTranslatev(Af); my2dRotatef(); my2dTranslatev(-Af); //Bf=MB1; C2=MC1transVertex(B1, Bf); transVertex(C1, C2);Draw(Af, Bf); my2dLoadIdentity(); // M = T(Bf)R(g)T(-Bf); my2dTranslatev(Bf); my2dRotatef(); my2dTranslatev(-Bf); transVertex(C2, Cf); Draw(Bf, Cf);

C

y

o

A B

Step 1

x


x

y

o

C’’

A

B’

x

y

o

C’

A B

Step 2

Method II:

Af = R()A; Bf = R()B’ = R()T(A)R()T(-A)B; Cf= R()C’’ = R()T(A)R()T(-A)T(B)R()T(-B)C.

OpenGL doesn’t return the transformed positionsOpenGL doesn’t return the transformed positionsFloat matrix[3][3];

my2dLoadIdentity(); my2dRotatef(); transDraw(O, A); // I*R(a)

// we may consider local coordinates: origin at Amy2dTranslatev(A); my2dRotatef(); my2dTranslatev(-A); transDraw(A, B); // I*R(a)T(A)R(b)T(-A)

// we may consider local coordinates: origin at Bmy2dTranslatev(B); my2dRotatef(); my2dTranslatev(-B); transDraw(B, C);

x

y

o

B f

C f

Af


y

o

B’ C’

Af

x

y

o

B f

C’

Af

x

Step 2

Af = R()A; Bf = T(Af)T(-A)B’ =T(Af)R()T(-A)B;Cf = T(Bf)T(-B)C’ =T(Bf)R()T(-B)C.

Float matrix[3][3];

my2dLoadIdentity(); my2dRotatef(); transVertex(A, Af); Draw (O, Af); my2dLoadIdentity(); my2dTranslatev(Af); my2dRotatef( + ); my2dTranslatev(-A); transVertex(B, Bf); Draw (Af, Bf); my2dLoadIdentity(); my2dTranslatev(Bf); my2dRotatef( + ); my2dTranslatev(-B); transVertex(C2, Cf); Draw(Bf, Cf);

x

y

o

B f

C f

Af

Step 3

Final position

C

y

o

A B

Step 1

x



.22.

TRANSFORMATION MATRIX STACKTRANSFORMATION MATRIX STACK

•Simulate a real clock?

•Animate robot arm?

•Need multiple matrices to save different states?

•Matrix stack Float matrix[POINTER][3][3];

• myPushMatrix();

• pointer++;

• copy the matrix from (pointer – 1);

• myPopMatrix();

• pointer--;

multiply

Matrix StackJ2_2_Reshape

my2dLoadIdentity();

my2dTranslatef(P1[0], P1[1]);

my2dScalef(sx, sy);

my2dTranslatef(-v0[0], -v0[1]);


my2dScalef(1.2f, 1.2f);




J2_2_ReshapePushPop my2dLoadIdentity();

my2dTranslatef(P1[0], P1[1]);

my2dScalef(sx, sy);

my2dTranslatef(-v0[0], -v0[1]);

my2dPushMatrix();





my2dPopMatrix();


At this point of program running, the current matrix on the matrix stack is different

OpenGL Matrix Stacks & OpenGL Matrix Stacks & TransformationTransformation


public void reshape(GLAutoDrawable drawable, int x, int y, int w, int h) {super.reshape(drawable, x, y, w, h);

//1. specify drawing into only the back_buffergl.glDrawBuffer(GL.GL_BACK);

//2. origin at the center of the drawing areagl.glMatrixMode(GL.GL_PROJECTION);gl.glLoadIdentity();gl.glOrtho(-w / 2, w / 2, -h / 2, h / 2, -1, 1);

// matrix operations on MODELVIEW matrix stackgl.glMatrixMode(GL.GL_MODELVIEW);gl.glLoadIdentity();

//3. interval to swap buffers to avoid rendering too fastgl.setSwapInterval(1);

}

OpenGL Transformation ImplementationOpenGL Transformation Implementation

my2dLoadIdentity();

transDrawArm(O, A);

my2dTranslatef(A[0], A[1]);

my2dRotatef(b);

my2dTranslatef(-A[0], -A[1]);

transDrawArm(A, B);

my2dTranslatef(B[0], B[1]);

my2dRotatef(g);

my2dTranslatef(-B[0], -B[1]);

transDrawArm(B, C);

gl.glLoadIdentity();

drawArm(O, A);

gl.glTranslatef(A[0], A[1], 0.0f);

gl.glRotatef(beta, 0.0f, 0.0f, 1.0f);

gl.glTranslatef(-A[0], -A[1], 0.0f);

drawArm(A, B);

gl.glTranslatef(B[0], B[1], 0.0f);

gl.glRotatef(gama, 0.0f, 0.0f, 1.0f);

gl.glTranslatef(-B[0], -B[1], 0.0f);

drawArm(B, C);


Example: J2_3_Robot2d Example: J2_4_Robot



.26.

HomeworkHomework

1. Build up your own matrix system that includes- Double matrix[POINTER][3][3];- void my2dLoadIdentity();- void my2dTranslated(double x, double y);- void my2dRotated(double a);- void my2dScaled(double x, double y);- void myTransVertex(double x, double y, double x1, double y1);- void my2dPushMatrix(); - void my2dPopMatrix();

2. Use your system to achieve the rotation of your pentagon or other objects in your circle. Then, you add a clock hand at each vertex of your pentagon or objects.

Copyright @ 2006 by Jim X. Chen: [email protected]

27

HW5: 2012 Fall ClassHW5: 2012 Fall Class1. Continue from previous homework;

2. Modify your code: draw a unit-size sphere at the origin;

3. Using OpenGL transformation on MODELVIEW Matrix Stack, rotate, scale, and translate the spheres to the locations in animation; (40%)

4. Use PushMatrix and PopMatrix on the Matrix Stack (40%)

copyright @ 2002 by jim x. chen george mason university transformation and viewing.1. plane example:...

Documents