CPSC 424:
Introduction to Computer Graphics
Department of Mathematics and Computer Science Hobart and William Smith Colleges Fall, 2021. Instructor: David J. Eck. Textbook: https://math.hws.edu/graphicsbook Monday, Wednesday, Friday, 1:20–2:20, Room Gulick 2000. Lab: Thursday, 10:10–11:40, Room Rosenberg 009
About This Course
Computer graphics is simply the art and science of producing and manipulating images on a computer, including animated images. It is one of the most visible and exciting aspects of computer science.
Computer graphics is a very large and growing field. This is an introductory course, which can only survey some of the important ideas. The course concentrates on three-dimensional graphics, where images are produced by constructing a virtual 3D world that is then projected onto a 2D image. However, we will begin the course with several weeks on 2D graphics, concentrating on features that carry over to 3D. Except at the very end, the course covers real-time graphics, where images must be generated very quickly. Real-time graphics is used in video games and other interactive programs. At the end of the course, we will briefly look at what has to be added to real-time graphics to get very high quality computer graphics, such as that used in movies.
The textbook for this course is a free, on-line book that can be accessed at https://math.hws.edu/graphicsbook. I will expect you to read the book. Topics to be covered include:
- 2D Graphics using Java and JavaScript.
- OpenGL 1.1, the original and old-fashioned version of the OpenGL graphics API, which nevertheless serves as a good entry point to 3D graphics.
- Three.js, a high-level, object-oriented JavaScript library for 3D graphics on the Web.
- WebGL, a more modern version of OpenGL for the web, which uses shaders—low-level graphics programs that implement basic graphics computations.
The course will use several programming languages. It is assumed that you know how to program in Java, but you will need to learn the basics of JavaScript for programming three.js and WebGL. For OpenGL, you will need to learn a little C to understand the API, but you can write the programs in Java. (You can also use C, or possibly even JavaScript, if you prefer.) You will also need to learn GLSL, a language based on C that is used to write shaders for WebGL. We will spend some class time on these languages, but you might need to do some independent learning as well. You can read about C and JavaScript in Appendix A in the textbook.
About the Pendemic
Because of the ongoing Covid 19 pandemic, plans for this course should be regarded as tentative and subject to change if the Covid 19 situation warrants it.
Note that it is the policy of the Mathematics and Computer Science Department that, until further notice, masks should be worn in classes, labs, office hours, Math Intern hours, Teaching Fellow hours, and when present on the third floor of Lansing Hall.
The plan is to have in-person classes and labs. If that becomes impossible, or if we have people going into quarantine, we will deal with that when it happens. If the class is forced to move to remote learning at any time, I expect to continue the class on Zoom. However, I will not offer regular Zoom access to classes that are being held in-person. Of course, you should not come to class if you are sick, but you should contact me to discuss how you can make up the missed material.
Computer Labs
This course has a required lab component that meets every Thursday. The Thursday period is used for programming labs. Two labs will be devoted to the midterm project. For the other programming labs, you will generally have several exercises to work on. You are not expected to complete those exercises during the lab period. Completing lab exercises is the major part of the homework for the course.
Programming exercises will for the most part be individual assignments, and the work that you turn in for them must be your own. There will be an option to work with a partner for some of the exercises. Lab exercises will ordinarily be due at the beginning of lab the following week.
We will also use some of the Monday class meetings as lab periods devoted to using three graphics programs: Gimp, Inkscape, and Blender. I expect to devote five or six class meetings to these programs. Gimp is a 2D program for creating and manipulating images, similar to Photoshop (except that it is free). Inkscape is another free 2D program that uses "vector graphics" instead of "pixel graphics." Blender is a sophisticated 3D modeling and animation program. It is also free. The plan is to have one session with Gimp and one with Inkscape early in the semester, and four sessions with Blender as we cover 3D graphics. The point of this part of the course is to help you to develop your understanding of basic graphics concepts by using programs similar to the ones that are used professionally. Blender is particularly useful for developing your 3D intuition.
Midterm Project
There will be a midterm project that you will work on over several weeks in the middle of the semester. You will work on the midterm project in parallel with other assignments for the course. Two of the Thursday labs will be devoted to work on this project. The assignment is to develop a scene graph library for use with OpenGL 1.1.
A scene graph is a data structure that contains information about the objects that will appear in an image. The image is created by traversing the scene graph and drawing the objects that it contains. Scene graphs are central to object-oriented computer graphics. We will cover a simple scene graph API for 2D that I wrote, and three.js is a sophisticated scene graph API for 3D web graphics. The assignment will ask you to think about the various ways to organize a scene graph, pick one, and write a library and API to implement your design. You will also need to document the API and write some sample programs that use it.
The midterm project will be a group project, with two or three people in each group.
Final Project
The course requires a final project, which is due at the end of the semester. The project can be research focused or programming focused. For a research project, you will write a paper on some topic relevant to computer graphics. But there should also be some sort of demonstration such as a small programming project or work with Blender. For a programming project, your main output will be a computer graphics program, probably using three.js, WebGL, or OpenGL. But some accompanying documentation will also be required.
Team projects, with teams of two or three people, are possible, depending on the topic. The final project can also be individual work.
In addition to the project itself, you are required to do a fifteen to twenty minute presentation on your work. Presentations will take place during the scheduled final exam period, in place of a final exam.
You will select a topic for your project by November 1. I would like to avoid having two people do the same topic, so you will need to consult with me and get approval for your project before November 1.
More information on the final project, including some suggestions for possible topics, will be available later in the semester.
Tests
There will be two in-class tests, which will be given in class on Monday, October 4 and Monday, November 15.
There is no final exam, but the officially scheduled final exam period will be used for student presentations of final projects. The scheduled period is Tuesday, December 7, 7:00–10:00 PM.
Grading
Your numerical grade for the course will be computed as follows:
First Test: 20% Second Test: 20% Midterm Project: 10% Final Project: 20% Other Assignments: 30%
Final grades might be "curved" to some extent, but cutoffs for letter grades will not be lower than the following: 90-100: A; 80-89: B; 65-79: C; 55-64: D; 0-54: F. Grades near a cutoff get a + or -.
Attendance Policy
I assume that you understand the importance of attending class, and you should always plan to be in class, if possible. However, because of the pandemic, I will not take attendance, and attendance is not required. In fact, if you are sick, you should not be in class.
If you need to miss an in-class test, you should make arrangements with me in advance if possible. If that is not possible, you should contact me as soon as you can. If you have a sufficient reason for missing the test, we can arrange a make-up test.
No Technology During Lecture
I ask that you refrain from using any technology (beyond pen/pencil and paper) in lecture, unless you have a verified need to take notes on computer. This includes laptops, tablets, and cell phones.
There is substantial research showing that taking notes on paper can improve retention of the material, compared to note-taking on computer. My real advice is to take notes in outline form, noting down important ideas and examples, and to make a more formal copy of the notes after class, filling in any missing details. There is also research showing that the multitasking that you are likely to engage in if you have a computer open in front of you is detrimental to learning.
About Office Hours, Email, and Web
I expect to hold office hours in my office, Lansing 313, on Mondays, Wednesdays, and Fridays, from 11:00 to 1:00. That's the two periods before class. I will be available by appointment for some time after my classes end, after 2:30 on Mondays, Wednesdays, and Fridays, and after noon on Tuesdays and Thursdays. Meetings on Zoom might be possible, depending on the situation.
Of course, email is always a good way to contact me. My email address is eck@hws.edu. I welcome comments and questions by email, and I will usually respond to them fairly quickly.
There is a short Web page for this course at https://math.hws.edu/eck/cs424/index_f21.html. I will post weekly readings and assignments on that page. This course does not use Canvas.
Statement from the Center for Teaching and Learning
Disability Accommodations: If you are a student with a disability for which you may need accommodations and are new to our office, you should self-identify for services by scheduling a Welcome meeting (link to do so is on the top right of our webpage) with Disability Services at the Center for Teaching and Learning (CTL). Disability related accommodations and services will be provided when the registration and documentation process is complete. The guidelines for documenting disabilities can be found at the following website: http://www.hws.edu/academics/ctl/disability_services.aspx.
Returning students may request their accommodation letter by emailing the request to the CTL@hws.edu or by using the link on the top right of our webpage to schedule a meeting should you feel one is necessary.
Please direct questions about this process or Disability Services at HWS to ctl@hws.edu or x 3351. Jamie Slusser, Disability Services Administrator & Accommodation Specialist and Christen Davis, Associate Director of CTL for Disability Services are the main contact staff for Disability Services.
Tentative Schedule
Here is a tentative weekly schedule of topics for the course. We will try to stick approximately to this schedule, but the actual schedule will be posted weekly on the course web page. In any case, we should cover all of the material listed in the schedule, at least to some extent.
Dates | Reading and Class Work | Thursday Lab |
---|---|---|
Aug. 23, 25, 27 |
Chapter 1; Sections 2.1–2.3. Introduction to the Course; 2D Graphics. |
2D Transforms |
Aug. 30; Sept. 1, 3 |
Section 2.6; Section A.3 in Appendix A. JavaScript; the canvas graphics API. Monday Lab: Gimp. |
JavaScript and Canvas 2D |
Sept. 6, 8, 10 |
Sections 2.4, 3.1. Hierarchical Modeling & Scene Graphs. Monday Lab: Inkscape. |
2D Hierarchical Modeling |
Sept. 13, 15, 17 |
Sections 3.2, 3.3, 3.4, A.2. 3D Shapes and Transforms. |
OpenGL 1.1 3D Graphics |
Sept. 20, 22, 24 |
Sections 3.5, 4.1. Linear Algebra; Light and Material. Monday Lab: Blender 1. |
Indexed Face Sets |
Sept, 27, 29; Oct. 1 |
Sections 4.2, 4.3. OpenGL 1.1 Light, Material, Textures. |
Start Midterm Project |
Oct. 4, 6, 8 |
Sections 4.4, 5.1. Moving lights and cameras; Three.js TEST: Monday, October 4 |
Light and Material |
Oct. 13, 15 |
Section 5.2. Three.js modeling Fall Break, Monday, October 11. |
Three.js |
Oct. 18, 20, 22 |
Sections 5.3, 6.1. Finishing three.js; Intro to WebGL. Monday Lab: Blender 2 |
Work on Midterm Project |
Oct. 25, 27, 29 |
Sections 6.2, 6.3. 2D Graphics with WebGL; GLSL. Midterm project due: October 28. |
More Three.js |
Nov. 1, 3, 5 |
Sections 6.3, 6.4, 6.5. GLSL; Intro to WebGL 3D. Monday Lab: Blender 3. |
Intro to WebGL and GLSL |
Nov. 8, 10, 12 |
Sections 7.1, 7.2. 3D graphics with WebGL. |
WebGL 3D and glmatrix.js |
Nov. 15, 17, 19 |
Section 7.3, 7.4. Advanced Textures; Framebuffers. TEST: Monday, November 15. |
WebGL Light and Material |
Nov. 22 |
Monday Lab: Blender 4. Thanksgiving Break, Nov. 24–28. |
No Lab |
Nov. 30; Dec. 1, 3 |
Section 7.5; Chapter 8. WebGL Extensions; Beyond OpenGL |
Something with WebGL |
Dec. 7 | Final Presentations: Tuesday, December 7, 7:00–10:00 PM |