Tutorials

SVG is a file format for 2D vector (or object-oriented) graphics. (see the vector vs. image discussion). It is a web standard, and is now well supported by all major browsers. Read more…

Now that you know that you’re going to have to use SVG, here’s a few things will be useful in actually making some pictures. Read more…

This is part 5 of the 6 part SVG tutorial Most of the things I’ve seen about SVG on the web are meant for designers who haven’t had a graphics class, so they are a little vague about transformation. The specification has all the details (including all of the kinds of transforms that are supported). However, it doesn’t specify how composition occurs. SVG does allow transformations to be composed. You can put multiple transformations on any object. Read more…

SVG has good facilitities for drawing 2D curves. This is a good way to experiment with Bézier curves (since it supports them). Read more…

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…