Workbook 3: Transformations
CS559 Spring 2023 Sample Solution
This is a sample solution for the Workbook. You are welcome to refer to it to learn one way to do the assignment but only after you have turned in your own assignment
One of the most fundamental concepts in computer graphics is transformation. Transformations let us work in convenient coordinate systems, model complicated things by putting together parts, move things around without damaging their structure, animate things without changing their shape (or, changing their shape if we want), and many other things.
Generally, the mathematics of transformations are taught first, and then we tell you what to use them for.
Here it is going to be the other way round: we’ll jump right in and use transformations to see why they are so useful. We’ll write some programs that make use of transformations. Then, we’ll look at what is happening “under the hood”.
This workbook has tutorial text and examples - make sure you understand them. Read the code!
Several pages have required exercises (see the rubric), and there is the potential for advanced points on page 6.
Remember to commit your work as you edit files in for_students (you should not edit files outside of that directory). Remember to push your work to GitHub - at least at the end, or periodically after you commit to make a backup. And, when you have completed the workbook remember to submit to WB3 Canvas Assignment to signal to us that it is ready for us to grade.
Learning Goals
- Understand the concepts of transformation and their use in graphics
- Understand how to think about transformations in terms of coordinate systems
- Understand how basic transformations (rotate, translate, scale) are used
- Understand how transformations are composed to achieve different effects
- Be able to use the HTML Canvas transformation functionality
- Understand and use the basic ideas of hierarchical modeling and articulation
- Understand how hierearchy and transformation is represented in a scene-graph API such as SVG
- Be able to use SVG (as a file format) including its hierarchy and instancing features
Other Resources
This workbook is a little less self-contained than the prior workbook, you will probably want to look at some things outside the workbook.
-
In this workbook, we will focus on using transformations. Textbooks discuss the math of transformations first, so we will read them in the future. However, on page 5, you will want to see more examples of how to use transformations to do hierarchical modeling.
I strongly recommend you look at some of these resources (when you get to page 5):
- At the University of Washington (the other UW), Prof. Steve Seitz (who is a Wisconsin Alum) has made a series of short videos he calls Graphics in 5 Minutes where he tries to condense his hour long lectures into 5 minute cartoons. All the videos are in a YouTube Channel (Graphics in 5 Minutes You Tube Channel). One or two of these videos is very relevant, so I will recommend it when we get to page 5. In general, he likes to show the math first, so it isn’t completely compatible with how we are learning things.
-
On pages 7 and 8, we will look at SVG as an alternative to Canvas. You will need to read something about SVG in order to do the assignments.
The required reading for this are the class tutorials (CS559 SVG Tutorial). You may also want to read other resources to learn about SVG, such as Mozilla SVG Tutorial (optional). Note: many of the SVG tutorials discuss curves (in particular, Bézier curves) - we won’t get to curves until later in the course, so you don’t need to worry about them now.
If you want to read ahead, these required readings for next week cover the math of transformations:
- (optional) FCG4 Chapter 6 (can skip 6.1.6 and 6.2)
BTW: you might want to look back at the Books Page to remind yourself about how the textbooks work in this class.