RIA

1. Animation, part I RIA

2. What is it? • real life is continuous, right? • with modern video equipment we talk about frames • with a fast enough frame rate and small changes between frames, we get the illusion of motion

3. Animation Styles • video can be recorded or authored and simply played back in an HTML canvas • javascript can be used to repeatedly draw the frames of the animation • macro languages can be used to create the animation using rules and a starting description

4. Tools • the HTML5 canvas object to draw the shapes • javascript to write the procedural code • jQuery to provide access to the DOM objects and to provide load function

5. jQuery • jQuery ready function executes after all elements have been loaded – better than javascript's onload function • the .resize and .attr methods allow a convenient way to redraw the canvas when the browser dimensions have changed • $('#myTag') to get access to html elements

6. Canvas Context Methods • use fillStyle and strokeStyle to change the color • rect, fillRect and strokeRect to draw rectangles • lines are drawn by starting a path and using lines, arcs and other methods to define the line • once path is closed it can be filled to display a shape

7. Example of Drawing a Solid Circle • canvas = $("#myCanvas"); • var ctx = canvas.get(0).getContext("2d"); • ctx.fillStyle="rgb(23,198,45)"; • ctx.beginPath(); // Start the path • ctx.arc(10,25,15,0,2*Math.PI); • ctx.closePath(); // Close the path • ctx.fill(); // Fill the path circle at x=10, y=25, radius=15

8. Writing the Javascript code • use HTML to create a canvas element<canvas id="myCanvas" width="500" height="500"> <!-- Insert fallback content here --> </canvas> • use Javascript to get canvas context:canvas = $("#myCanvas");var ctx = canvas.get(0).getContext("2d"); • use the context methods in Javascript to draw objects • remember origin (0,0) is top left x y

9. Timeouts • timeouts control the frame rate • basic format of timeout is (sets it only once):setTimeout(funct, milliseconds); • to have a periodic timeout, use recursion:function timerThingy(){ doSomething(); setTimeout(timerThingy(),1000);}

10. Starting and Stopping • use a variable to flag whether animation is "on" • use an if statement in the function that controls the timeout. If the variable is set to "on" then draw the animation. • use a click method of the canvas to change the animation flag

11. Use Objects • the animated objects should be stored at javascript objects in an array • all objects should have a draw method that determines when it should look like and how to move • draw all objects in a loop:for(s in shapes) shapes[s].draw(ctx);

12. Refresh Rate • your app may redraw every 10 ms but the refresh rate may be less than that. • to save battery, only push a new redraw when a frame is ready • use requestAnimationFrame monitor refresh animation redraw

13. User Interaction • animation without user interaction can paint a picture or tell a story but it does not involve the user • using keyboard or mouse events allows the user to become involved in the experience • opens the possibilities to games, education, training and survey/voting

14. Interaction • for the user to interact with the objects on the canvas: • must detect what user did (click, hover, etc) • "where" they are (location of mouse) • what objects were involved • programmer must poll events and compare to state and location of objects

15. What happened • jQuery has events associated with the canvas object that programmer can use to write code to respond to events • mouse events: click, dblclick, mousedown, mouseover, mouseleave, many more. • keyboard events include keydown, keyup and keypress (small differences)

16. Where • with mouse events a parameter can be used to determine the mouse location:canvas.click=function(e){...} • the object e contains information about the mouse at the time the event fired:e.pageX is the x location of the pointere.pageY is the y location

17. Determining Interaction • programmer is responsible for finding out if the user clicked (or hovered...) on or near an object • must check every object (using arrays makes it easier) • determining interaction depends on the shape of the object

18. Rectangles and Circles • rectangles are the easiest: • x1 ≤ x ≤ x2 • y1 ≤ y ≤ y2 • for circles use the formula (x-x1)2 + (y-y1)2≤ r2 (x1,y1) (x2,y2) r (x,y)

19. Triangles are a little harder function triSign(x,y,x1,y1,x2,y2){ return (x - x2) * (y1 - y2) - (x1 - x2) * (y - y2); } function insideTri(t,x,y){ var sign1=triSign(x,y,t.ax,t.ay,t.bx,t.by)<0; var sign2=triSign(x,y,t.bx,t.by,t.cx,t.cy)<0; var sign3=triSign(x,y,t.cx,t.cy,t.ax,t.ay)<0; return sign1==sign2 && sign1==sign3; } B A C

20. Other forces • for each object there should be a speed for both the x and y direction • you can also have accelleration for both • this allows you to simulate: • gravity • friction • wind • other forces