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

  1. Understand the concepts of transformation and their use in graphics
  2. Understand how to think about transformations in terms of coordinate systems
  3. Understand how basic transformations (rotate, translate, scale) are used
  4. Understand how transformations are composed to achieve different effects
  5. Be able to use the HTML Canvas transformation functionality
  6. Understand and use the basic ideas of hierarchical modeling and articulation
  7. Understand how hierearchy and transformation is represented in a scene-graph API such as SVG
  8. 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:

  1. 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.
  2. 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.
  3. 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.

Rubric

Workbook Rubric (96 points total)
Points (85):
20 pt
correctly turning in the assignment
Box 03-01-06
5 pt
restore the triangle to original position when the “Jump Right” button is released
Box 03-02-06
5 pt
change the scales so the two pictures look the same
Box 03-03-03
5 pt
add appropriate transformations to make both images look the same
Box 03-03-05
5 pt
define the canvas coordinate systems as specified
Box 03-06-01
10 pt
quadcopter has a front and 4 arms
Box 03-06-01
10 pt
four attached propellers that spin
Box 03-06-01
2 pt
propellers spin at different rates
Box 03-06-01
3 pt
goes around a circle
Box 03-06-01
3 pt
faces points forward while going around circle
Box 03-08-01
5 pt
a picture using SVG
Box 03-08-01
3 pt
at least one path with an arc
Box 03-08-01
3 pt
at least one polygon that is not a rectangle
Box 03-08-01
3 pt
a hierarchy using grouping
Box 03-08-01
3 pt
repeated instancing via use
Bonus points (14 possible, of which you can earn a maximum of 11):
Box 03-06-01
2 pt
multiple vehicles (must have spinning parts)
Box 03-06-01
2 pt
complex paths (at least one 'copter must be a circle)
Box 03-06-01
2 pt
cool looking vehicles
Box 03-06-01
2 pt
interaction (be sure to document)
Box 03-06-01
2 pt
quadcopters do something beyond move in a path
Box 03-06-01
1 pt
other articulated object
Box 03-08-01
3 pt
artistic merit in the SVG picture

Get started on Page  1  (Translate Transformations)!