March 23

• • •

Lab 7 due today: Using images with Canvas Animation Methods Animation with Sprites

Animating Images

1.

Load the image data, and invoke init method when loaded

var myImage = new Image(); myImage.src = "curved-road.png"; myImage.onload = init();

2. Define init method to set initial state of canvas and variables and start the animation

var x = 0; // position of image on canvas var y = 0; var xDir = 1; // direction/amount of x movement var yDir = 1; // direction/amount of y movement function init(){ canvas = document.getElementById('MyCanvas'); ctx = canvas.getContext('2d'); // set other variables that depend on canvas or image setInterval(draw, 10); // start animation loop }

Animation Loop Methods

1.

An ordinary loop, why not do this?

while (true) { animate(); // update image and draw() // wait some time (10 msec) }

2. Using setInterval function

setInterval(animate, 10); Calling interval.



setInterval

time.

or setTimeout functions work for simple animations, but they do not guarantee that the object is redrawn as often as the given

They simply make a request for the browser to wait at least that much  Many browsers may clamp the timeout interval to at least 10 msec.

 The browser or processor may be busy with other tasks and take longer than requested to advance the animation.  A common refresh rate is about 60 frames per second (16 msec. interval)

Animation Loop Methods

3. Preferred Method: let the browser determine the exact frame rate. Animate function receives a time parameter, so it may keep track of how much time has passed since it was last called.

function animate (time) { // update and draw animated objects draw(); requestAnimationFrame(animate); } // initialization requestAnimationFrame(animate); Remaining Issue: portability Some browsers (and older versions) do not implement requestAnimationFrame consistently



Core HTML5 book defines a portable function called requestNextAnimationFrame (see requestNextAnimationFrame.js)

March 25

• •

Final Project Proposal (due Wednesday, 4/1) Lab 8: Sprite Animation

Final Project Proposal Due: Wednesday, April 1

• Develop a graphically-oriented web application, such as – a simulation, – – – an interactive game, an animated cartoon or similar video presentation Any of these may also use audio • • The idea for the project should be proposed by April 1 for feedback and approval. The project work should take about 40 hours (per person), which is expected to be completed over four weeks.

Projects may be completed individually or by a two person team if the project requires an amount of work that is appropriately larger than an individual project. If a project is completed by a team, both team members will receive the same grade based on their combined work on the application.

Animation Loop Methods

3. Preferred Method: let the browser determine the exact frame rate. Animate function receives a time parameter, so it may keep track of how much time has passed since it was last called.

function animate (time) { // update and draw animated objects draw(); requestAnimationFrame(animate); } // initialization requestAnimationFrame(animate); Remaining Issue: portability Some browsers (and older versions) do not implement requestAnimationFrame consistently



Core HTML5 book defines a portable function called requestNextAnimationFrame (see requestNextAnimationFrame.js)

Animation with Sprites

   A sprite is a graphical object that may be incorporated into an animation.

A sprite sheet is a single image that contains all of the frames to be used in an animation Example: animated runner sprite sheet with 9 frames  Code: Sprite Animation Example 6.7 (folder on wiki page)

Using RequestAnimationFrame

PAGEFLIP_INTERVAL = 100; // advance to next frame after 100 msec function animate(time) { if ( ! paused ) { context.clearRect(0,0,canvas.width,canvas.height); drawBackground(); sprite.paint(context); if (time - lastAdvance > PAGEFLIP_INTERVAL) { sprite.painter.advance(); lastAdvance = time; } sprite.x -= 1; // runner is facing/moving to left if (sprite.x < 0) { sprite.x = canvas.width; } window.requestNextAnimationFrame(animate); }}

March 27

• •

Lab 8: due Monday (by midnight) Image Editors on Mac OS?

•

Timing of animation

Time-based Motion

• • • • • Situation: we have variables to determine the number of pixels that an object should move per second.

–

disc.velocityX, disc.velocityY

intended units: pixels/second Problem: update function gets called at a variable frame rate [frames/second] determined by browser.

The update function might be called 20 times per second, OR ... 40 times per second.

How can we determine how much to move the disc to get the desired number of pixels/second?

We need to determine how many pixels to move per frame update from the desired pixels/second.

Time-based Motion

• • • • • Situation: we have variables to determine the number of pixels that an object should move per second.

–

disc.velocityX, disc.velocityY

intended units: pixels/second We need to determine how many pixels to move per frame update from the desired pixels/second.

pixels pixels second ------ = ------ * ----- frame second frame

To determine seconds/frame we can use elapsedTime.

elapsedTime = time interval (msec.) from last frame request to this frame request.

See example 5.14 in Core HTML5 Canvas text, also posted on wiki