jgs SER332 Introduction to Graphics and Game Development Lecture 01: Course Presentation Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 1 jgs SER332 Introduction to Graphics Definitions Rendering Foundations of graphics Math concepts Programming

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2 jgs Topics § Review of foundations § Algorithms and Linear Algebra § Graphics rendering § Transformations § Meshes § Camera § Lightening § Materials § Animation

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3 jgs Required Skills and Goal § Programming Skills C++ OpenGL Note: programming requires (much) practice Data Structures: Linked-List (Vector), Stack, Trees* § Goal You have to be able to understand the theory (midterm, final) and implement the theory in practice (projects).

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs Grading Exams (2) 50% 25% + 25% 40% 10% + 10% + 10% + 10% Projects 10% 10% Quizzes + Attendance 100% A+ 97 A 93 A- 89 B+ 85 B 81 B- 77 C+ 73 C 69 D 65

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs Textbook § Tomas Akenine-Moller and Eric Haines. Real-Time Rendering (3rd Edition). AK Peters, Ltd. § D. Hearn and M. P. Baker. Computer Graphics with OpenGL (3rd Edition). Prentice Hall. § J. Neider, T. Davis, M. Woo, The OpenGL Programming Guide, Addison-Wesley

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs Blackboard § syllabus § slides § projects § announcements

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs Slides § The slides will be available on blackboard and are intended for your personal studies § You are not allowed to distribute the slides § You are still required to read the book for a better and more complete understanding of the topics in this class

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs Projects § Four projects are the core of the course § It is important that you are able to implement computer graphics algorithms § The projects will have a clear specification § Approximately, 10 hours of work outside of class per week. If you miss the class you will need more time.

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs Exams § 1 midterm during the semester (before Spring break) § 1 final exam (comprehensive)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Ethics § Violations of academic integrity include (but are not limited to) cheating, fabrication, tampering, plagiarism or facilitating such activities. § it is unethical to bring to your instructor's attention the possible impact of your course grade on your future plans, including graduation, scholarships, jobs, etc.

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 jgs Attendance § Attendance is required § Announcements are made in class § I will try to post all important information on Blackboard § If you come to class you are expected to participate

jgs Test Yourself The following slides should give you some idea about topics, difficulty and requirements are to be successful

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13 jgs Design an Algorithm § You have a screen, size 100 x 100. lower left corner (0,0) upper right is (100, 100). § The function PutPixel(x, y) will draw a pixel on location (x,y). § Give a pseudo-code algorithm to draw a circle with center (50,50) and radius 10.

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs Proposed Algorithm clearScreen(); i = 0; while (i < 360) PutPixel( 50 + 10*sin(i), 50 + 10*cos(i) ) i = i + 1 § Is this a good algorithm? § What are some of the problems? § How could the algorithm be improved

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs Matrix Multiplication § Calculate this, 2 0 0 0 3 0 1 0 1 ∗ 1 2 3 =

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16 jgs Matrix Multiplication § Calculate this, 2 0 0 0 3 0 1 0 1 ∗ 1 2 3 = 2 6 4

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17 jgs Geometry § Given a line 7x + 3y = 0 § How can you test if a point is on the left or right side of the line? § Can you draw the line on a piece of paper?

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18 jgs Programming void init (void) { //set display-window color to white. glClearColor(1.0, 1.0, 1.0, 0.0); // Set projection parameters. glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0, 200.0, 0.0, 150.0); } void lineSegment (void) { // Clear display window. glClear (GL_COLOR_BUFFER_BIT); // Set line segment color to red. glColor3f (0.0, 0.0, 1.0); glBegin (GL_LINES); // Specify line-segment geometry. glVertex2i (180, 15); glVertex2i (10, 145); glEnd ( ); // Process all OpenGL routines as quickly as possible. glFlush ( ); }

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19 jgs Programming § How to create a project in Visual Studio § How to copy a project from one computer to other § Debugging § What about Object-Oriented Programming? Yes, classes, objects, inheritance, and so on...

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20 jgs Homework Read the Syllabus Microsoft Visual Studio Up and Running

jgs SER332 Introduction to Graphics Javier Gonzalez-Sanchez [email protected] Spring 2018 Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.