Tutorials

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. In the old days, they referred to the two types as “raster” and “vector”. I prefer “image-based” and “object-based”. Here’s a first attempt at the definitions: An image-based (or raster) graphic represents the pictures by measuring the color at a pre-determined set of locations (usually a grid). Read more…

Color is complicated. There is a ton of stuff to learn. Later in class, we’ll discuss color more – and just scratch the surface of its complexity. But, between now and then you need to make pictures and you will want to specify what colors are in them. So here’s a short version… Can I really represent Color as 3 Numbers? In terms of the physics of light: you cannot. In terms of the perceptual science (psychology): in theory, 3 numbers are sufficient to capture what people can see. Read more…

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? In practice, yes, they are both lists of numbers. But getting an idea of what the difference is helps develop the intuition of coordinate system. To describe this, let me use an analogy/example: describing walking in a room. Assume that you know which way is north. Read more…

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. The term pixel is (I’m told) short for the term “picture element.” (Wikipedia, of course talks about this) Unfortunately, there is an ambiguity when we talk about a grid. And for reasons that we become clearer later, it is better to think about pixels one way rather than the other. Read more…

This tutorial was written for CS559 2020 by the course staff, and updated for 2021 and 2022. Originally, JavaScript had some non-standard ways to do object-oriented programming. They were very cool, and very flexible - but they were non-standard and hard to learn Fortunately, newer versions of JavaScript (like we use in class) give us another option that provides a convenient syntax for “traditional” (class/instance style) object oriented programming. JavaScript ES6 introduced classes to JavaScript, which use notation similar to what you may have seen in other object oriented languages. Read more…

This is part 2 of our 2 part tutorial on “Traditional” Object Oriented programming in JavaScript. The tutorial was written by the course staff in 2020, but updated in 2021 and 2022. In the first part of this tutorial (Traditional Object Oriented Programming in JavaScript (Part 1)), we showed you how to use JavaScript’s class syntax; this time, we’ll take a look at how we can use it to do the things you’re used to in object oriented programming: inheritance, polymorphism, and more. Read more…

These pages are a 6 part SVG tutorial originally written in 2014 - the main content doesn’t really change much. The tutorial was originally targeted for CS559 students, but it can provide a decent starting point for anyone who wants to learn SVG. These pages were converted from WordPress to Hugo in 2020, and then revised in 2021. For a more comprehensive tutorial on SVG, I recommend the official Mozilla SVG Tutorial. Read more…