CS424, Fall 2013, Lab 3 CS 424: Computer Graphics, Fall 2013 Lab 3: 2D HTML Canvas Graphics This lab asks you to work with the 2D graphics API for the HTML element. You should see how graphics fundamentals that you learned in Java carry over to another API. You will need to know some JavaScript, but most of what you need is very similar to Java. The background information that you need is in Section 4 and Section 5 of the notes. The files that you need for this lab can be found in /classes/cs424/canvas-templates. This directory contains four files that are meant as starting points for simple applications that use canvas graphics. You will need copies of animate.html -- implements the animation framework from the notes. As a trivial example, it draws the frame number in each frame. mouse.html -- implements the mouse interaction framework from the notes. As a trivial example, it responds to mouse-drags on the canvas. scene-graph.html -- greatly extends animate.html by adding an object-oriented scene graph API. The API is an almost exact JavaScript port of the API that you used in Java in Lab 2. As an example, it shows a very simple animated hierarchical graphics model. The same directory also contains basic.html, which is a very simple template for an application with no animation or mouse interaction, and cart-and-windmills.html, which is actually an application based on screen-graph.html that you will recognize from the notes. You don't necessarily need copies of these, but you might want to look at them. You won't be working in Eclipse for this lab. Although you could do everything with a basic text editor, my suggestion is to use Komodo Edit, a free web development tool that can do things like syntax checking and content assist. You can use Komodo Edit to edit files without creating a project, but there are advantages to combining files into a project. To do that, create a folder named lab3. Start Komodo Edit, and use the "New Project" command under the "Project" menu. Navigate to the lab3 folder, and create the project in that folder. A project file with extension .komodoproject will be created in the folder, and project files will be stored there. If you add files to the folder, Komodo Edit will find them and add them to to the project (although you might have to refresh the view for it to see them). Of course, you can create new files with the "New File" command. From there, you can probably figure things out. If you need help, ask. This lab is due at the beginning of lab next week. You should copy your work into your homework folder in /classes/cs424/homework. Your work should be in a folder named lab3 or something very similar. Exercise 1: Animating Note: When working on the exercises in this lab, I suggest that you keep the Firefox Web Console (or the equivalent in another browser) available as you view your pages. This is good advice whenever you are working on web applications. A JavaScript error will often have no visible result on the page, except that nothing seems to be happening. You need to have the Web Console open to see an error message. Remember that you can also use console.log() in your code to output debugging messages to the console. However, you should not leave those statements in finished code. For the first exercise, you should start with a copy of animate.html, and create a new, non-trivial animation. You can either use the following idea, or you can make up something that is at least of similar complexity. Idea for animation: A small randomly colored circle appears at a randomly chosen point in the canvas and grows over a series of frames. When it reaches a certain size, it stops growing, and a new dot appears somewhere else. For this to work, the frame-drawing function, draw(), should not clear the canvas before drawing the new frame. (Perhaps after a long time, you can clear the canvas and start over.) Note that there is an example of setting a random color in mouse.html. You might want to make the circles translucent: See the specification of graphics.globalAlpha in the notes. Exercise 2: Mousing For this exercise, start with a copy of mouse.html, and use it as the basis for a graphics application with mouse interaction. You should also add at least one input element, such as a checkbox or popup menu, to the web page, and use it to control some aspect of the program. You can either use the following idea, or you can make up something of at least similar complexity. You should add some words to the web page to tell the user how to use your program. Ideas for mouse interaction: Write a drawing program, where the user can sketch curves by dragging the mouse. Or to be more ambitious, let the user drag squares around on the canvas, and let the user place new squares by shift-clicking; to implement this, you will need an array of objects to store information about the squares. You could use a popup menu for selecting color. Maybe use a checkbox that lets the user select drawing with 50% translucent colors. Recall that a popup menu on a web page is a element such as
Option 1
Option 2
Option 3
which gives this menu: Option 1 Option 2 Option 3 . You need the id so that you can refer to the element in JavaScript: The currently selected item in the menu can be obtained as: document.getElementById("sel").value A checkbox is created as an element here is so that the user can check/uncheck the box by clicking the text as well as by clicking the box itself. For example, use the following HTML code to get this: Check Me!
Check Me!
In JavaScript, you can test whether the box is checked with: document.getElementById("box").value As discussed in the notes, you can use an onchange event handler to respond when the user changes the value of a checkbox or select element. You don't always need to do that. Sometimes, it's good enough to just get the current value from the element whenever you need to know it. For this application, I would not use the onchange event for the popup menus, but I might use it for the checkbox. Exercise 3: Simple Scene Graph Starting with a copy of scene-graph.html, port the simple object-oriented scene graph that you wrote in Java for Exercise 2 in Lab 2. The animation on your web page should be almost identical to the animation from that exercise. This should be an easy port from the Java version. Exercise 4: Freedom Write another canvas graphics application that is significantly more complex than the previous three applications. One possibility is to make a more complex scene graph, but don't just port the one that you did for Exercise 3 from Lab 2. You can also make some other kind of application, as long it uses canvas graphics.
