# Workbook 3: Transformations

## CS559 Spring 2021 Sample Solution - Workbook 3

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6 and page 8.

This workbook is due on Monday, February 15, 2021.

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 bonus points on several of the exercises.

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 do the “hand-in quiz” 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

## Required Reading

These will be introduced in the context of the workbook pages. However, if you want to read ahead:

- CS559 Tutorial: Points, Vectors, Coordinate Systems was part of last week’s reading. But you might want to remind yourself about the difference between points and vectors.
- In this workbook, we will focus on using transformations. The textbooks discuss the math of transformations first, so we will read them in the future. However, on page 5, I want you to see more examples of hierarchical modeling, so you will read Chapter 7 of Hart’s “Big Fun Book of COmputer Graphics” Hart07-jan19.pdf (14.5mb) that discusses hierarchical modeling. The second example is in 3D, so it may not make as much sense yet.
- On pages 7 and 8, we will look at SVG. The required reading for this are the class tutorials (CS559 SVG Tutorial). You may also want to read other resources to learn about SVG. The Official Mozilla SVG Tutorial is recommended. 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 a bit, next week’s readings will cover the math of transformations. You will be required required to read FCG4_Ch06.pdf (0.5mb) (although, 6.1.6 is a more advanced topic that we won’t discuss in class, and the 3D parts, including 6.2 we’ll come back to later). You will also read Chapter 5 of Hart Hart05-jan19.pdf (2.7mb) - which covers the same material. It is important enough that you should see it twice, and each one adds extra details.

BTW: you might want to look back at the Books Page to remind yourself about how the textbooks work in this class.