170

# SER332 Lecture 07

Introduction to Graphics and Game Development
ModelView Transformations
(201804)

## Javier Gonzalez-SanchezPRO

February 06, 2018

## Transcript

1. ### jgs SER332 Introduction to Graphics and Game Development Lecture 07:

Model-View Transformations Javier Gonzalez-Sanchez javiergs@asu.edu PERALTA 230U Office Hours: By appointment
2. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2 jgs

Announcement § Project 1 is available § Due by Feb 15, 11:59 PM

4. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs

Stages of Vertex Transformation 1 2 3
5. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs

Transformations Transformation Model-View glRotate*() glTranslate*() glScale*() glLookAt() Projection glOrtho2D*() glOrtho() glPerspective() Viewport glViewPort()
6. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs

Model (Local or World)
7. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs

ModelView Transformation § glTranslate{fd}(TYPE x, TYPE, y, TYPE, z) § glRotate{fd}(TYPE angle, TYPE x, TYPE, y, TYPE, z) § glScale{fd}(TYPE x, TYPE, y, TYPE, z) Translate Rotate Scale
8. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs

ModelView Transformation § Translation then rotation § Rotation then translation § OpenGL transformations are specified in reverse order
9. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs

ModelView Transformation § Will the snippets below generate same results? § Think of glRotate, glTranslate, glScale as matrix multiplication to the current (ModelView) matrix § OpenGL does post-multiplication: MVnew = MVold * M glTranslatef (10.0f, 0.0f, 0.0f); glRotatef (45.0f, 0.0f, 0.0f, 1.0f); // draw a cube glRotatef (45.0f, 0.0f, 0.0f, 1.0f); glTranslatef (10.0f, 0.0f, 0.0f); // draw a cube
10. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs

Projection Transformations § determine how a scene is mapped onto the computer screen. § The projection transformation specifies the mechanics of how the mapping should occur, and § 2D Orthographic Projection: Viewing volume is a clipping rectangle. § gluOrtho2D (left, right, bottom, top)
11. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 jgs

Example // https://github.com/javiergs/SER332/blob/master/Lecture07/main.c #include "glut.h" int year = 0, day = 0; void myInit() { glClearColor(0.764f, 0.129f, 0.282f, 1.0); // maroon clear color // projection transformations glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-5.0, 5.0, -5.0, 5.0); // units inside } void main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutCreateWindow("simple"); myInit(); glutDisplayFunc(myDisplay); glutKeyboardFunc(myKeyboard); glutMainLoop(); //event loop }
12. ### jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12

void myDisplay(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glPushMatrix(); /* draw 1 */ glBegin(GL_POLYGON); // fill connected polygon glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(-0.7, 0.7); // vertices of the triangl 1 glVertex2f(0.6, 0.7); glVertex2f(-0.7, -0.6); glEnd(); /* draw 2 */ glRotatef((GLfloat)year, 0.0, 0.0, 1.0); glTranslatef(2.0, 0.0, 0.0); glRotatef((GLfloat)day, 0.0, 1.0, 0.0); glBegin(GL_POLYGON); glColor3f(1.0f, 0.843f, 0.0f); glVertex2f(0.7, 0.6); // vertices of the triangle 2 glVertex2f(-0.6, -0.7); glVertex2f(0.7, -0.7); glEnd(); glPopMatrix(); glFlush(); }
13. ### jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13

void myKeyboard(unsigned char key, int x, int y) { switch (key) { case 'd': day = (day + 10) % 360; glutPostRedisplay(); break; case 'D': day = (day - 10) % 360; glutPostRedisplay(); break; case 'y': year = (year + 5) % 360; glutPostRedisplay(); break; case 'Y': year = (year - 5) % 360; glutPostRedisplay(); break; default: break; } }
14. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs

Example Press the key ‘d’ or ‘D’ Press the key ‘y’ or ‘Y’
15. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs

General Reading § Read Hearn Baker chapter 5 p232-p252 (for 2D geometric transformation) § Read Hearn Baker chapter 6 p297-p305 (for 2D viewing) § Extend your understanding of 2D transformation and viewing to 3D § Read Red Book: chapter 3