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
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
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.
That was a warmup for the real programming task: the train on page 9.