Welcome to the Graphics Tutorials Site!

by Mike Gleicher on August 27, 2015

in General Info

This website has a collection of tutorials created for the Computer Graphics classes at the University of Wisconsin – Madison. In the past, each class put tutorials on its own website (and made a new copy each year). Now we’re trying to put the tutorials in one place.

Getting Started with TWGL m4 (matrix library)

by Mike Gleicher on September 16, 2015

in 559 Graphics

For the programming assignments, you will need some basic matrix support to do transformations. You could program this yourself, but you are also welcome to use a matrix library that does it for you. Doing it yourself is good because you have to understand it – but it’s a lot of busywork. Learning to use a matrix library is a better idea, since its what you need in the “real world”.

Matrices and GL

by Mike Gleicher on September 6, 2015

in 559 Graphics

There is some weirdness and confusion in notation for transformations, which becomes real confusion when you actually need to implement it using someone else’s libraries and code.

Learning JavaScript

by Mike Gleicher on August 30, 2015

in JavaScript,Rants

Warning: This page is out of date

For a more modern take on JavaScript for CS559 see 2021 CS 559 JavaScript page. It’s less philosophical than this page. JavaScript (and JavaScript usage) is evolving so it is a more “normal” language. A lot of what is below is obsolete.

Warning: this is from 2015. Some of it is obsolete – there are newer (and better) ways to do things as JavaScript has evolved.

One thing which is weird about JavaScript (in the web browser at least) is that your program doesn’t have a beginning. It is embedded on a web page, and attached to things. This brings up questions of when your code actually gets run. It is particularly important for drawing – since you want to draw at the right time.

What is a Pixel? (and what is a point sample)

by Mike Gleicher on August 28, 2015

in 559 Graphics

An updated version of this tutorial is available on the 2021 Course Web

When we talk about image-based graphics, we talk about it being a regular collection (usually a grid) of samples (or pixels). It’s time to be a little more precise about this.

Image-based graphics vs. Object-based graphics

by Mike Gleicher on August 28, 2015

in 559 Graphics

There’s a very basic distinction in kinds of pictures (and therefore kinds of graphics) we use with computers. The difference is really simple, but very difficult to describe precisely. In fact, we don’t even have great words for the two categories.

See the updated version on the Spring 2021 CS559 Course Page

It always bugged me that math books made a big deal of the difference between points and vectors. They’re both just a list of numbers, right?

Color: Initial Answers to a Practical Question

by Mike Gleicher on August 28, 2015

in 559 Graphics


Color is complicated. We will probably spend a week of class on it – and just scratch the surface of its complexity.

Getting Started with HTML5 Canvas

by Mike Gleicher on August 28, 2015

in 559 Graphics,JavaScript

Why do I need to write my own Canvas tutorial for CS559?

There are some good tutorials out there (I have a few on a list, but that’s just a start). I recommend that you use them AFTER this one. Before you read this one, you might want to read my post on what Canvas is and why we use it.

HTML5 Canvas: What and Why

August 28, 2015

This is more of a “Why are we using HTML5 Canvas in 559” than anything else. But to answer that question, I need to make sure you know what “it” is first. This is meant to come before my “getting started” tutorial (since you should know what you’re starting and why you’re starting it). view […]

Read the full article →