Page 14: The 559 2D UI Code

Next week, there will be a project.

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 next week’s 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 next week when you are trying to use them in Project 1.

You’ll note at the top of the scripts in the programs on these pages they load the required code as a module from the libs directory - this is code we give you. You should not edit the library code. You should use it as is.

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

RunCanvas

The runCanvas library provides a simple way to have 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 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 paramters (read the code - the runCanvas function is at the end).

Try it out. There is some starter code in 05-13-01.js ( 05-13-01.html) that you can edit. Edit these so that the time slider (1) goes between 0 and 2, and that 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. But 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 also should 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 05-13-02.js ( 05-13-02.html).

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).

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

The End

I left the 05-14-01.html 05-14-01.js files in the “for_students” folder. They are for the train project. You do not have to make changes to them for this workbook.

That’s the end of the workbook. Of course, commit and push to GitHub often! When you are done with the workbook (and committed and pushed the version you would like to have graded), complete the WB5 and WB5G assignments on canvas. See Next: Hand-in and Gallery .