School of Computing and Information Systems RIA Animation, part I

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems Writing the Javascript code use HTML to create a canvas element 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

School of Computing and Information Systems 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); }

School of Computing and Information Systems 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

School of Computing and Information Systems 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);

School of Computing and Information Systems 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 animation redraw monitor refresh

School of Computing and Information Systems 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

School of Computing and Information Systems 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

School of Computing and Information Systems 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)

School of Computing and Information Systems 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 pointer e.pageY is the y location

School of Computing and Information Systems 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

School of Computing and Information Systems Rectangles and Circles rectangles are the easiest:  x1 ≤ x ≤ x2  y1 ≤ y ≤ y2 for circles use the formula (x-x1) 2 + (y-y1) 2 ≤ r 2 (x2,y2) (x,y) r (x1,y1)

School of Computing and Information Systems Triangles are a little harder B C A 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; }

School of Computing and Information Systems 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