Workbook 1: Web Graphics and Class Basics

Introduction

Welcome to the first workbook for CS559!

Hopefully, you’ve gotten here the right way: you have…

1. Access to the GitLab repository we created for you.
2. Cloned this workbook to your computer.
3. Started a local server (preferably using Visual Studio Code Live Preview).
4. Are reading this in a web browser.

You will do all of the workbooks in class this way, so it’s good to learn how they work.

But first, please put your “name” on the workbook by giving us your NetID. This is important: this is how we know whose workbook this is.

Hopefully, the workbook will remember this information. However, as we will explain in a bit (on Page  1  (Localstore: How Workbooks (and Webpages) Save Information)), this is fragile. That page will explain the mechanisms and what to do when things go wrong. It will tell you about saving your work to a file using this panel:

If this is your first time on this page, don’t worry about it, but that panel will be convenient if you come back and things are broken.

The next few pages will also give you instructions on keeping track of your work and submitting it when you are done.

The first workbook…

Workbooks have an index page (what you are looking at) and a sequence of numbered pages. In future workbooks, we won’t have as many instructions at the beginning.

This workbook has three different topics (in order):

1. Helping you understand how to use the workbooks for class
2. Explaining some basic web technology and reviewing web programming (since we will be doing web programming to practice using computer graphics)
3. Getting started doing some graphics programming

It will be good to get the basics (1 and 2) before going on to actually doing graphics programming.

Workbooks and Class

The workbooks are the main component of class. They serve as the main reading (although they will provide links to additional things). They provide interactive demonstrations for you to watch and experiment with (rather than just seeing an instructor use them in class). They will give you example programs that you can modify. And they will be the place where you do the programming assignments. The workbooks will also connect to the class videos, so you can watch the video for the material when you need it.

There is a workbook for each “module” (2 week block) of class. That means this workbook has 2 weeks’ worth of work in it. You don’t want to save everything for the last minute!

To encourage you not to wait until the last minute, we will require checkpoints during the module.

Over the next few pages, we’ll explain more about how the workbooks work. The course web (online) also has information, including how grading will work this semester.

The workbook has a few handy features to help you keep track of what you have (and have not) finished yet. The list of pages (upper right corner on each page) should show different link colors if you’ve visited the page. The boxes (the main work) can be “checked off” and you can see a list on the last page. Also, for each “rubric item” (a specific thing you need to complete in a box), you can check these off (and see a big list at the end).

Learning Goals

Each workbook will start by telling you what it is trying to teach you.

The learning outcomes for this module are:

At the end of the module, students should be able to:

1. Understand and use the class mechanics (GitHub classroom links, Git, local servers, editing pages, workbook organization, …)
2. Review basic HTML and JavaScript that you will need for class including attaching programs to web pages
3. Understand event-driven- and animation-loop-driven- programming, including controlling timing with browser animation loops
4. Understand basic graphics concepts including object-based vs. image-based graphics, immediate mode vs. retained mode graphics APIs, flicker-based displays, buffering, and display lists
5. Make pictures and interactive animations with HTML Canvas5

What you should do with this workbook

Since this is the first workbook, we’ll provide a little extra explanation.

If you haven’t already done so, please review the pages on the Course Website. The Home Page page is a good place to get started. You should do everything there. The fact that you found this workbook and got this far means you’ve done at least some reading.

The next pages will explain the workbooks in detail. But basically, they are a set of pages that you should read and complete in order. Start with the index page (this one), and then move on to the next pages.

Readings

The workbooks are the primary (required) readings for class. From time to time, they will include links to external readings where you can get more detail, but the goal is to provide all the basics in one place. Textbooks and web resources probably are better; however, we’ve learned that students don’t always read everything.

Due Date, Grading and Rubric

For Fall 2026, please find relevant information on the Grading page on the course website. If there are inconsistencies in the Workbooks (since majority of the pages are copied from Professor Gleicher’s Spring 2026 Workbooks), please refer to the course website and report the inconsistencies on Piazza.

Workbooks are always due on Sundays, around 2 weeks after they are released. A Sunday deadline means any time Sunday (anywhere on earth). The course staff will clone the version of the Workbooks on GitLab Monday morning.

Consult the class website for information on the late policy. While we accept late assignments, we limit the amount of credit you can get for them.

During the weeks of the module, there are some checkpoints and “events” that relate to the workbook:

1. The workbook is “released” by us announcing it on Canvas. This survey will have an introductory video (showing off what you will learn in the module), and you can clone your copy from your repository on GitLab. (if you’re reading this, you have probably already seen the announcement and have access to your repository.)
2. By the end of the week, we will check that every student has cloned a copy of the workbook. This is checkpoint 1; we want to make sure everyone has gotten started.
3. For the mid-point of the module, we will check that students have made at least one commit/push, and one localstore checkpoint (we’ll explain this in a minute). We also recommend that students have watched some of the other videos in the module. This is checkpoint 2.
4. Near the end of the module, we will release sample solutions for the basic parts of the workbook. This should help out if you’re stuck.
5. When you are done, you submit your work by following the instructions on the Last Page (rubric).

Getting Started

OK, enough talking about how to do the assignment, let’s get started on Page  1  (Localstore: How Workbooks (and Webpages) Save Information)!