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

This post gives you some advice on how to learn JavaScript. It spends most of its time giving you a general strategy, and a sense of why this general strategy is the right thing. I recommend getting that philosophical dose, since it will make the reasons for the actual choices in books and stuff make more sense when they do come later down.

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

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.

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 →