Introduction

Workbook 2 - Graphics APIs and Drawing Basic

Remember to look at these web pages using a local web server! For more information on using a local server, see the tools page.

Goals of this Workbook

  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 SVG, which we won’t use much in class in the future - but it’s good to know about
  5. To see how the event and animation loop models introduced in the previous workbook are used in graphics
  6. To get more practice with reading and writing JavaScript programs
  7. To check that you can do some basic vector math

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. This time, there will be a lot less reading the HTML source. In fact, some of the HTML source of this and the following workbooks are generated automatically, so they might be hard to read and follow. Of course, you are still welcome to look at them. All the relevant HTML source files and JavaScript programs are stored in the for_students/ folder. 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.

Remember that you are required to edit the for_students/README.md file.

There are 6 pages total. Start with page 1.

Exercises

The two exercises on page 3 and the first exercise on page 5 count towards the mandatory grade on this workbook. You are expected to write your own Javascript code.

Rubric for Grading

  • Exercise 3-1 (page 3, box 1) - draw the four objects specified (1 pt; 0.25 pts per object)
  • Exercise 3-2 (page 3, box 2) - make a picture that covers the listed Canvas features (1 pt)
  • Exercise 5-1 (page 5, box 1) - let users generate and interact with circles (1.5 pts)

Bonus Points

  • Exercise 3-2 (page 3, box 2) - extra features or additional creativity (1 pt)
  • Exercise 5-2 (page 5, box 2) - shooting circles to specific locations (1 pt), making the circles explode (1 pt), extra features or additional creativity (1 pt)

Assessment

The graders will check that you have done the required programs correctly.

The grader will check that you have correctly done the for_students/README.md file, as well as filled in the exercises on pages 3 and 5. Remember to read through things carefully including the source code (mainly the JavaScript files). The code is part of the reading! You will learn how to do the programming parts (in part) by reading code. There are other readings linked on the different web pages.

As you go through the workbook pages, feel free to tinker with the programs we have given you as a way to understand how they work!

There are opportunities for bonus points on pages 3 and 5.