Course Presentation

1. jgs
SER332
Introduction to Graphics and Game
Development
Lecture 01: Course Presentation
Javier Gonzalez-Sanchez
javiergs@asu.edu
PERALTA 230U
Office Hours: By appointment

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

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

4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
jgsRequired 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).

5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
jgsGrading
Exams (2) 50%25% + 25%
40%10% + 10% + 10% + 10%Projects
10%10%
Quizzes +
Attendance
100%
A+97
A93
A-89
B+85
B81
B-77
C+73
C69
D65

6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
jgsTextbook
§ 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

7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
jgsBlackboard
§ syllabus
§ slides
§ projects
§ announcements

8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
jgsSlides
§ 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

9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
jgsProjects
§ 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.

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

11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
jgsEthics
§ 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.

12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
jgsAttendance
§ 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

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

14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
jgsDesign 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.

15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
jgsProposed 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

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

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

18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
jgsGeometry
§ 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?

19. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
jgsProgramming
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 ( );
}

20. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19
jgsProgramming
§ 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...

21. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20
jgsHomework
Read the Syllabus
Microsoft Visual Studio Up and Running

22. jgs
SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
javiergs@asu.edu
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.