Workbook 2: Graphics APIs and Drawing Basics

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

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.

You may have noticed from this week’s assignment that we will be doing non-trivial JavaScript programming. If you feel like you need to accelerate your learning, see the Javascript in CS559, specifically the “Advice on Learning JavaScript” section.

Learning Goals

  1. To introduce the idea of object-based graphics as opposed to image-based graphics
  2. To show the two different types of graphics APIs, immediate mode and retained mode
  3. To give you experience programming with the Canvas API that web browsers provide
  4. To give you exposure to SVGs, which we will look at more in the future
  5. To see how the event and animation loop models introduced in the previous workbook are used in graphics
  6. To introduce the concept of display lists
  7. To practice with reading and writing JavaScript programs with actual graphics programs

What you should do with this Workbook

This workbook assumes you’ve already done the previous week’s workbook, and are familiar with the mechanics of doing assignments and turning them in using GitHub, as well as looking at web pages with JavaScript programs. Remember to look at the workbook with a local web server.

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 for_students/ folder. For this workbook, you probably just need to look at the JavaScript .js files. 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 9 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 Canvas Assignments WB2 and WB2G when you are done to tell us that you’ve completed the workbook and that we can grade it.

Readings

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):

Rubric

Workbook Rubric (93 points total)
Points (86):
20 pt
correct WB2 Canvas Assignment submission
20 pt
correct WB2G Canvas Assignment submission on time
Box 02-04-01
8 pt
2 pts for each of 4 shapes
Box 02-04-02
4 pt
making a picture
Box 02-04-02
3 pt
shapes that aren't rectangles
Box 02-04-02
3 pt
transparency (must explain in 02-workbook.txt)
Box 02-07-01
4 pt
making circles appear when the mouse is clicked
Box 02-07-01
3 pt
having the circles change color when the mouse is over them
Box 02-07-01
3 pt
having the circles change their color back when the mouse leaves them
Box 02-08-01
3 pt
user clicks mouse, firework shoots from the bottom towards mouse
Box 02-08-01
3 pt
firework moves to mouse position over time
Box 02-08-01
3 pt
firework disappears (explodes) when it gets to position
Box 02-08-01
2 pt
small moving pieces appear where big one explodes
Box 02-08-01
2 pt
pieces move outward from explosion
Box 02-08-01
3 pt
multiple fireworks at once (if user clicks quickly)
Box 02-08-01
2 pt
fireworks are different colors
Advanced points (7):
Box 02-07-01
1 pt
having the circle change color when clicked (advanced points), with the hover behavior still working
Box 02-08-01
2 pt
explosions fade out (or disappear) after a distance
Box 02-08-01
1 pt
fireworks start from random locations at bottom
Box 02-08-01
1 pt
random fireworks in addition to user clicks
Box 02-08-01
2 pt
projectile motion

Get started on Page  1  (Web Graphics APIs)!