Prerequisite: none.
Please read the syllabus so you will know what this course is about, course requirements, etc.
The main part of this course has to do with programmatically drawing on web pages. We’ll also deal a little bit with traditional multimedia (image files, audio, and video files), but again, the main part is coded graphics. We’ll deal with both static graphics and animated graphics. Static graphics does not change, so it can be rendered (drawn) just once. Animated graphics does change, so we must render a series of frames (instantaneous snapshots) through times, like the frames of a motion picture.
We’ll use JavaScript for our coding, because JavaScript is the client-side scripting language for web pages. But before we turn our attention to JavaScript, I’d like to say a few words about the two main different approaches to computer graphics.
No matter whether we are doing a web application or a conventional desktop application, whether we’re using JavaScript or some other programming language, there are two very different kinds of graphics APIs (application programming interfaces). One is called immediate mode, and the other, retained mode.
Using an immediate mode API, we have to give instructions for rendering the frame. For example, if the scene has two rectangles, we might say something like this (in pseudocode):
drawRectangle(topleft = (10, 10), width = 40, height = 30)
drawRectangle(topleft = (50, 40), width = 60, height = 20)In other words, we have to define a procedure for drawing the scene. If the scene changes, we have to keep track of the changes. For example, if the second rectangle moves slowly to the right, we have to keep track of its x coordinate, and our instructions have to track that position; and if a third rectangle moves into the scene, we have to keep track of that and provide instructions for it.
In a retained mode API, we don’t tell how to draw anything. We just tell what stuff needs to be drawn. We could say something like this (again, in pseudocode):
graphicalObjects =
[Rectangle(topleft = (10, 10), width = 40, height = 30),
Rectangle(topleft = (50, 40), width = 60, height = 20)]We have a list of graphical objects, and the retained graphics library takes care of the drawing. If a new object appears, we just insert it:
insert(graphicalObjects,
Rectangle(topleft = (0, 0), width = 10, height = 20))If something moves, we just tell how it moves:
graphicalObjects[1].topleft = (51, 40)— Actually, with some retained mode graphics APIs we can do better than that: we can specify the animation declaratively:
graphicalObjects[1] moves from (50, 40) to (100, 40) over 2 seconds.We can say that immediate mode is more procedural, because we have to give procedural instructions for drawing everything; and retained mode is more declarative, because we don’t have to give these procedural instructions, we just say what there is that needs to be drawn.
Both modes are widely available across many languages and platforms.
The HTML5 canvas element is the basis for the immediate mode graphics in web pages. It is controlled by JavaScript. Python turtle graphics, Java’s 2D graphics API, and cairo are a few other immediate mode graphics APIs.
On the web, we can use Scalar Vector Graphics (SVG) for retained mode graphics, including declarative animations. It, too, can be controlled by JavaScript (though it needs to be controlled by JavaScript less often because it is more declarative). Off the web, Tk is a GUI toolkit with a “canvas” that provides a retained mode API. Tk is accessible from Python and other languages. Retained mode is also widely used in 3D game programming, where it is often called a scene graph; OpenSceneGraph, Java3D, OGRE, and the Irrlicht game engine are a few examples.
There are, then, toolkits for off-web as well as on-web graphics using both immediate and retained mode APIs. The general principles that you will learn in this course are therefore highly applicable also to non-web graphics.
Incidentally, we won’t be covering 3D graphics, except to mention that WebGL is coming along as the way to to 3D graphics on the web. Unfortunately, WebGL is too complicated for us to cover in any detail in this course.
Just in case anyone is wondering why we’re not using Adobe Flash for this class: it is widely expected that the graphics technologies we are covering — especially the <canvas> and <video> elements of HTML5 — will displace most applications of Flash. Even Adobe is now repositioning its products towards HTML5:
Due Wednesday, September 5, 2012
Find an impressive use of the HTML canvas in a web page (off of the INFO-I400 course web site, and not previously posted by anyone else). In Oncourse Forums, Discussion Assignments, post in response to the “DA 1 Canvas Example” thread: