Moving the mouse We added to the library a mechanism to the canvas that lets you optionally define four callback methods: canvas1.onPress = (x,y) => { ... } // RESPOND TO MOUSE PRESS canvas1.onRelease = (x,y) => { ... } // RESPOND TO MOUSE RELEASE canvas1.onMove = (x,y) => { ... } // RESPOND TO MOUSE MOVE canvas1.onDrag = (x,y) => { ... } // RESPOND TO MOUSE DRAG I have put some logic into index.html that lets you drag around the position of the running figure while the mouse is pressed. Introduction to Splines If you want to animate a point along a line, you can use linear interpolation to vary a parameter t between 0.0 and 1.0 as follows: P = (1-t)A + tB where A is the starting point of the animation, and B is the ending point. If instead you want to animate along a curved path, you can animate from A to C, by doing a linear interpolation of linear interpolations, using an intermediate point B to influence the shape of the curve: P = (1-t) ( (1-t)A + tB ) + t ( (1-t)B + tC ) We can rearrange terms to write the above as the following quadratic equation in t: P = (1-t)2A + 2(1-t)tB + t2C To make general spline curves, we want to be able to lay interpolation curves end to end. The problem with using quadratic curves is that each component piece of the spline can't have an "S" shaped bend. For this reason, spline curves use cubic interpolation, by doing a linear interpolation of linear interpolations of linear interpolations, using two intermediate B and C points to influence the shape of a cubic curve from A to D: P = (1-t) ( (1-t) ( (1-t)A + tB ) + t ( (1-t)B + tC ) ) + t ( (1-t) ( (1-t)B + tC ) + t ( (1-t)C + tD ) ) We can rearrange terms to write the above as the following cubic equation in t: P = (1-t)3A + 3(1-t)2tB + 3(1-t)t2C + t3D we can then multiply out each term to get: P = (-t3+3t2-3t+1)A + (3t3-62+3t)B + (-3t3+3t2)C + t3D EQUATION 1 As t varies between 0.0 and 1.0, the curve animates along a path that starts at A, is influenced by both B and C, and ends up at D. This particular way of describing a spline curve is called a Bezier spline, named for the mathematician who discovered it. When it is time for the computer to actually compute this curve, we want to find the actual cubic coefficients (a,b,c,d) which will let us evaluate at3 + bt2 + ct + d, which we can also write as a dot product of vectors: t3 t2 t  1   •   ax bx cx dx Which means that for each coordinate of the points A,B,C,D, we want to figure out how to go from those coordinates to the four cubic coefficients a,b,c,d. To change coordinates from, say, Ax,Bx,Cx,Dx to ax,bx,cx,dx, we use the Bezier matrix: ax bx cx dx ← -1 3 -3 1 3 -6 3 0 -3 3 0 0 1 0 0 0 • Ax Bx Cx Dx Note that each column of the Bezier matrix contains the coefficients of the corresponding cubic equations in EQUATION 1 above. We can do the same for the y and z coordinates of the curve to compute cubic coefficients (ay by cy dy) and (az bz cz dz). Homework Due next Wednesday before the start of class Start with the included code in hw8.zip. Either enhance the scene you created for last week, or else create a new scene. In either case, make your scene respond to the mouse in some interesting way. Some ideas: Point at objects to change their color Move around objects which are at the mouse Advance an animation as the use drags the mouse Come up with your own cool interaction idea