Page 22: The 559 2D UI Code

The next pages will have a substantial programming assignment: creating the train.

To prepare, we want you to get used to some of the software infrastructure we use in class; these are libraries that we have been using in demos, and you will use in upcoming assignments. The boxes on this page are designed to give you some experience working with the libraries. That way you won’t have to spend your time figuring them out on future pages (when you are trying to make the train).

You will note that the scripts at the top of the programs on these pages load the required code as a module from the libs directory; this is code we provide. You should not edit the library code. You should use it as is.

While what we ask you to do is quite trivial, it will be good for you to understand how to use these libraries, since you will need them in the future. It is also good practice to learn how to work with code that someone else wrote.

RunCanvas

The runCanvas library provides a simple way to implement an animation loop with a start/stop control and a time slider. We’ll continue to use runCanvas in workbooks throughout the semester.

The simple way to use runCanvas is to call the function. Provide it with the canvas that you want this to be applied to and a function that you want to be called every time the time changes. The function will be called with two parameters: the canvas and the time. By default, the time goes between 0 and 1 (so you can assume the time will be between those) - but you can configure the range and step size through the parameters (read the code - the runCanvas function is at the end).

Try it out. There is some starter code in 03-22-01.js (03-22-01.html) that you can edit. Edit the code so that the time slider (1) goes between 0 and 2, and (2) as the time slider is moved (whether running or dragged), something spins around. (You should draw something and have its rotation be affected by time.)

DragPoints

The other helper is called dragPoints; it keeps track of a list of points and allows the user to drag them around. The function in the dragPoints file is called draggablePoints.

When dragPoints is integrated correctly, the user will be able to click near a point to drag it; Shift-Click to add a new point (at the end of the list); and Ctrl-Click (or Command-Click on a Mac) to delete a point.

The dragPoints system needs the function you use to redraw the canvas and the list of points (it will change the list as needed). Your redraw function needs to draw the dots for the points. You pass the redraw function to draggablePoints so it gets called when the points are moved. The redraw function should be the same kind of function that you pass to requestAnimationFrame, taking the same argument.

You’ve actually been using this for a while in the demos. Now, make sure you can use the code. Have a draw function that connects the points into a polygon (connect neighboring pairs of points with line segments). You should also draw circles for the points so you know where to click. Change the initial value for the points so the program draws a hexagon when it is loaded. You should edit 03-22-02.js .

Your program might draw something like this:

It doesn’t have to look exactly like this (any hexagon is OK, and you don’t have to make everything all black).

dragPoints lets you move, add, and remove points - it does not let you re-order them.

Next: Page  23 - The Train: Intro