Workbook 5 - Page 8 - Shape Exercises

Workbook 5 - Page 8 - Shape and UI exercises

This workbook has two simple exercises to warm up for the bigger programming task on the next page. Do these exercises by editing the file 8-shape.js

Exercise 8.1: A Picture

Make a picture in the box below using Canvas drawing commands. Your picture must use curves (cubic Bezier curves - with the Canvas bezierCurveTo function). In the 8-shape.js file, put your code into the exercise81 function.

Exercise 8.2: Try out the UI

To write the demos, I wrote some utility routines that augment a Canvas. One is called "runCanvas" - it puts a time slider and a start/stop checkbox on a Canvas. The other is called "dragPoints" - it keeps track of a list of points and allows the user to drag them around.

With dragPoint, click near a point to drag it. Shift-Click to add a new point (at the end of the list). Ctrl-Click (or Meta-Click on a Mac) to delete a point. DragPoint needs the function you use to redraw the Canvas, and the list of points (it will change it as needed). Your redraw function needs to draw the dots for the points.

You've actually been using this for a while in my demos. But now, make sure you can use the code. Have a draw function that connects the points into a polygon. 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.

Summary: On to the train!

That was a warmup for the real programming task: the train on page 9.