Welcome to CS559!

by Eftychios Sifakis on January 17, 2017

Dear Students,

Welcome to CS559 “Introduction to Computer Graphics”. This web page will be your portal for all announcements related to the class, information about class logistics, and repository of lecture notes and supplemental information.

IMPORTANT CLASSROOM LOCATION CHANGE:

OUR CLASS MEETINGS HAVE BEEN RELOCATED TO COMPUTER SCIENCES AUDITORIUM 1240 – EFFECTIVE IMMEDIATELY!

To get started, make sure to check out the Syllabus page for the most important general class information (including grading and administrative logistics), and the Calendar for a time-indexed view of topics and important special scheduling notices.

You will be getting information on reading materials as we go, but if you want to prefetch some information that will definitely be useful, take a look at the following tutorials/discussions:

That should be a good starting point! Please keep track of the posted deadlines for assignments (summarized in the “Week in 559” window on the right of the main page of the class). Also make sure to verify you have access to the Piazza and Canvas pages (linked for your convenience to the right of the main page). Have a great start to your semester

Due: Sunday, February 19th (see the class late policy on the Syllabus)

Synopsis: You will create 3D animation using the JavaScript 2D canvas. We have approached this goal before, in our previous assignments, but this time you will be exposed to all pieces of the pipeline (3D transformations, viewing transformation, visibility, etc) even more thoroughly. This time you will draw solid objects (filling triangles). You will also implement a simple visibility algorithm (painter’s algorithm), and optionally experiment with normal computations and shading.

Learning Objectives: This assignment will give you the opportunity to see how 3D graphics really works. Our assignments up to this point have given you selective exposure to parts of the 3D viewing pipeline (hierarchical transforms, the 2D Canvas interface, linear algebra libraries such as TWGL, …) but this is the first time that you will be asked to put together a more comprehensive product. What you learn by implementing the transformation pipeline will come in handy in the future – since you’ll implement it again when we do WebGL. In addition to testing your understanding of graphics principles, this assignment will also force you to think about a different philosophy of putting together a visual world, where drawing of

Due: Thursday, February 9th

Synopsis: Although we are using a 2D medium (the HTML5 canvas) and still seemingly rely on 2D drawing operations, we have already ventured into the question of how do we capture 2D imprints of the 3-dimensional world. The following readings cover important topics, including the representation and combination of transforms, hierarchical modeling and 3D viewing transforms

Learning Objectives: To make sure everyone is comfortable with the concepts of representing and combining transforms, especially in 3D, and in conjunction with the TWGL library which we will focus on in class. These readings will also lay the foundation for subsequent lectures on the viewing pipeline and projection.

Evaluation: Check/No Check (based on passing the Quiz). You may re-try the quiz until you pass it (everyone should be able to). Remember that only your best grade is recorded, so if you get all questions right on a given attempt, there is no risk in taking the test again, to check out any remaining questions (Canvas shuffles the deck of questions and presents you with a subset of all available ones).

Handin: Take the quiz on Canvas [Link].

Description

The readings cover the following parts (a) Discussion of 3D geometry, transforms, their representations (especially homogeneous

Due: Tuesday, February 7th (see the class late policy on the Syllabus)

Synopsis: You will create a three-dimensional object such that it can be animated, and create a 2D visualization of this animation.

Learning Objectives: To see how transformations and hierarchical objects are employed in 3 dimensions, and experiment with a linear algebra library (such as TWGL) to represent such transformations. You will also get an introductory exposure to concepts about viewing (i.e. creating 2D depictions of 3D environments).

Evaluation: Based on our grading scale. You get a satisfactory grade if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). Higher grades may be achieved by people who make interesting things (or even simple things that move in interesting ways). Your object must be hierarchical, and move in a way that shows it off (e.g. there’s a thing that moves that has a sub-piece that moves relative to it).

Handin: You will upload your work through the Canvas course management system [Link]. Make sure that you turn in all files needed for your program to run. Update: Although you are welcome to upload individual .html files (if they have the JavaScript code

Lecture notes – Week 1 (Jan 17-19)

by Eftychios Sifakis on January 25, 2017

Slides from in-class presentation [PDF – Jan 17] [PDF – Jan 19]

Code examples:
L-shape & axes [JSBin link]
Combining more than one transform [JSBin link]
Quadrant [JSBin link]

Lecture notes – Week 2 (Jan 24-26)

by Eftychios Sifakis on January 25, 2017

Instructor-prepared notes on coordinate systems and basic transforms [Link]

Code examples:
A simple demonstration of using a slider interface, and simple transforms [JSBin link]
And, a full 2D hierarchical modeling example [JSBin link]
And the same example, with axes drawn [JSBin link]

Extra instructor office hours on Wednesday January 25th

by Eftychios Sifakis on January 25, 2017

The instructor will hold an additional office hour between 11:00-11:45am on Wednesday Jan 25th. Location : CS6387

Programming Assignment #2 : Hierarchical Modeling in 2D

by Eftychios Sifakis on January 19, 2017

Due:  Monday January 30th (UPDATED!)

Synopsis: You will make a program with an articulated object and have it be animated (move around).

Learning Objectives: To see how transformations and hierarchical objects are useful in modeling and animation, and to experiment with using them in web programming.

Evaluation: Check/No Check/Above and Beyond. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). Extra points to people who make interesting things (or even simple things that move in interesting ways). Your object must be hierarchical, and move in a way that shows it off (e.g. there’s a thing that moves that has a sub-piece that moves relative to it).

Handin: You will upload your work through the Canvas course management system [Submission Link] Make sure that you turn in all files needed for your program to run. Update: Although you are welcome to upload individual .html files (if they have the JavaScript code embedded in them), if you plan to submit separate .html and .js files (which is perfectly reasonable) you are encouraged to package up everything in a single .zip file. Canvas renames re-submissions by affixing

Due: Friday, January 27th

Synopsis: As we are just starting the class, there is lots of information to take in. Although subsequent readings will be more technical in nature (i.e. focusing on theoretical graphics concepts), in this first assignment we will also need to focus on details on how the course works, and information on how the programming will be carried out (e.g. using JavaScript). Fear not, however, as most of this information will come very naturally, and the theoretical concepts are very likely to be familiar to you from your past exposure to linear algebra.

Learning Objectives: To make sure everyone understands how the class will work, and has the basics for the topics we’ll work on in the first weeks. We also need to make sure that the course infrastructure works (that you can access Canvas, find the readings, …)

Evaluation: Check/No Check (based on passing the Quiz). [Link to Quiz on Canvas] You may re-try the quiz until you pass it (everyone should be able to). Remember that only your best grade is recorded, so if you get all questions right on a given attempt, there is no risk in taking the test again, to check out any remaining

Classroom Location Change

by Eftychios Sifakis on January 18, 2017

Dear students,

Our class meeting location has been changed. We will now meet at Computer Sciences 1240 (the main auditorium at the CS building).
This change is effective immediately!

Programming assignment #1 : Intro to HTML Canvas

January 17, 2017

Due: Tuesday, January 24th. (see the class late policy on the Syllabus) Synopsis: You need to create a program that draws a picture on a 2D Canvas on a Web page. Learning Objectives: To make sure everyone understands how to make pictures with Canvas, so we can make more interesting ones later. We also want […]

Read the full article →