CS559 Spring 2021 Sample Solution - Workbook 2
Written by CS559 course staff
This workbook is due on Monday, February 8, 2021
- To introduce the idea of object-based graphics as opposed to image-based graphics
- To show the two different types of graphics APIs, immediate mode and retained mode
- To give you experience programming with the Canvas API that web browsers provide
- To give you exposure to SVG, which we will look at more in the future
- To see how the event and animation loop models introduced in the previous workbook are used in graphics
- To introduce the concept of display lists
Workbook 2 - Graphics APIs and Drawing Basics
Remember to look at these web pages using a local web server! For more information on using a local server, see the Tools for 559 page.
What you should do with this Workbook
You are welcome to look at any of the files in the workbook. However, you can read the text of the pages in the web browser.
The files for you to read the source code are stored in the
This includes files that need to be modified for the exercises, but also source files that you should read and understand to learn about web programming.
We will ask you to make changes to some of the programs, and also write some of your own.
For this workbook, you should not need to add any files to the workbook.
This workbook also has links to required readings. Make sure you read them. Even if you don’t need it to complete the workbook assignment, you will need the information for other parts of class (for example, you may see questions on the surveys or exams). Sometimes the readings are information you will need for future weeks.
This workbook has 7 pages total. There are exercises for you to do scattered about.
Don’t forget to commit and push your work as you go - this way you’ll have a backup in case something goes wrong. Also, don’t forget to do the “Workbook Quiz” when you are done to tell us that you’ve completed the workbook and that we can grade it.
In addition to the pages and code of the workbook, there are a number of things you will be asked to read. It may work best to read the workbook, and go to the external readings when they come up.
The readings (in order of appearance):
- (optional) Chapter 1 of Foundations of Computer Graphics FCG4_Ch01.pdf (0.2mb)
- CS559 Tutorial: Image-Based vs. Object-Based Graphics
- CS559 Color Tutorial
- CS559 Tutorial: What is a Pixel
- Readings about SVG are for later in the semester, but you could look at CS559 SVG Tutorial Part 1: Getting Started with SVG if you are curious
- Page 2 (Drawing with Canvas) gives a number of references on Canvas, Mozilla (Official) Canvas Tutorial (top level) is the starting point, most of the things you need to know are right in the workbook
- CS559 Tutorial: Points, Vectors, Coordinate Systems
- (optional) If you need a refresher on vector math (the basics of Linear Algebra), Chapters 1, 2 and 4 of Practical Linear Algebra are a good place to get it.
- (Box: none) (20 pts) correctly turning in an assignment with the quiz
- (Box: 02-04-01) (20 pts) 5 pts for each of 4 shapes
- (Box: 02-04-02) (5 pts) making a picture
- (Box: 02-04-02) (5 pts) shapes that aren’t rectangles
- (Box: 02-04-02) (5 pts) transparency (must be obvious from looking at the picture)
- (Box: 02-07-01) (5 pts) making circles appear when the mouse is clicked
- (Box: 02-07-01) (4 pts) having the circles change color when the mouse is over them
- (Box: 02-07-01) (4 pts) having the circles change their color back when the mouse leaves them
- (Box: 02-07-02) (3 pts) user clicks mouse, firework shoots from the bottom towards mouse
- (Box: 02-07-02) (3 pts) firework moves to mouse position over time
- (Box: 02-07-02) (3 pts) firework disappears (explodes) when it gets to position
- (Box: 02-07-02) (2 pts) small moving pieces appear where big one explodes
- (Box: 02-07-02) (2 pts) pieces move outward from explosion
- (Box: 02-07-02) (3 pts) multiple fireworks at once (if user clicks quickly)
- (Box: 02-07-02) (2 pts) fireworks are different colors
Regular Points: 86
- (Box: 02-04-02) (2 bonus pts) artistic merit points for a cool picture (grader’s discretion)
- (Box: 02-07-01) (1 bonus pts) having the circle change color when clicked (bonus points), with the hover behavior still working
- (Box: 02-07-02) (2 bonus pts) explosions fade out (or disappear) after a distance
- (Box: 02-07-02) (1 bonus pts) fireworks start from random locations at bottom
- (Box: 02-07-02) (1 bonus pts) random fireworks in addition to user clicks
- (Box: 02-07-02) (2 bonus pts) projectile motion
Bonus Points Possible: 9.