HTML5 Animation

Dr Raymond Bond(rb.bond@ulster.ac.uk)

• This is the lecture for week 5• Remember week 6 is your class test– You need to revise everything from week 1– Class test will have 25 questions– It will last approximately 40 minutes– You will need a calculator– It is a closed book test in the lab on blackboard– This video contains elements of the class test

Manipulating Raw Pixels

//returns an objectvar imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

//array of bytes var pixels = imgData.data;

Manipulating Raw Pixels

[byte1, byte2, byte3, byte4, byte5…]

Matrix of pixels to a 1*n (or 1 dimensional) array

Pixel 1

Red, Green, Blue, Alpha, Red …

Manipulating Raw Pixelsvar imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var pixels = imgData.data;

while (curRow < maxRow) {

var thisRowBytes = curRow * ctx.canvas.width * 4;for (var j = 0; j < ctx.canvas.width * 4; j += 4) {

pixels[thisRowBytes + j] = 255 - pixels[thisRowBytes + j]; // red pixels[thisRowBytes + j + 1] = 255 - pixels[thisRowBytes + j + 1]; // greenpixels[thisRowBytes + j + 2] = 255 - pixels[thisRowBytes + j + 2]; // blue }

curRow++; } ctx.putImageData(imgData, 0, 0);

Manipulating Raw Pixels

Manipulating Raw Pixels

for (var j = 0; j < ctx.canvas.width * 4; j += 4) {

pixels[thisRowBytes + j] = pixels[thisRowBytes + j] + 50; // red pixels[thisRowBytes + j + 1] = pixels[thisRowBytes +

j + 1] + 50; // green pixels[thisRowBytes + j + 2] = pixels[thisRowBytes + j + 2] + 50; // blue

}

// What will happen here?

Manipulating Raw Pixels

• The animation loop– Some call it• The Tick or Ticker• The Rendering loop• The Game Loop (in the context of games)

• JS Animation loops– setTimeOut()– setInterval()– requestAnimationFrame()

• setTimeout

setTimeout(function, milliseconds);

• setTimeout

setTimeout(animate, 3000);

function animate (){//animation code here

setTimeout(animate, 3000);}

• setInterval

setInterval(function, milliseconds);

var myLoop = setInterval(animate, 1000);

function animate(){//insert code to render frame

}//What’s the estimated FPS?

var myLoop = setInterval(tick, 40);

function tick(){//insert code to render frame

}//What’s the estimated FPS?

clearInterval(myLoop);

// What would this function do?

• Problems with setInterval();– JS currently runs on a single thread– Thus the specified intervals are not guaranteed– Out of page animation– Browser Tab out of focus scenario (hogs CPU)– A setInterval has no priority over other

setIntervals– …

• New HTML5 requestAnimationFrame();

– A dedicated animation loop– Browser optimizes and prioritizes this loop• i.e. the browser will draw your animation at the next

available opportunity!!! Not a predefined interval

http://caniuse.com/

PolyFill

requestAnimationFrame(); PolyFill

https://gist.github.com/paulirish/1579671

<script src="https://gist.github.com/paulirish/1579671/raw/3d42a3a76ed09890434a07be2212f376959e616f/rAF.js"></script>

<script> window.onload = function () {

requestAnimationFrame(animate); }function animate() {

//perform animations hereconsole.log("frame generated");

requestAnimationFrame(animate);}</script>

FPS with requestAnimationFrame• The FPS will be variable• But it will try to execute approx. 60 fps

(refresh freq = 60Hz)• So what if you want to control FPS?

var fps = 15; requestAnimationFrame(animate);

function animate() { setTimeout(draw, 1000 / fps);

}function draw () {

// Drawing and animation code goes here requestAnimationFrame(animate);

}

Delta Time

Another popular approach for animating objects at a constant speed.

var prevTime = new Date().getTime();

requestAnimationFrame(draw);

function draw() { var now = new Date().getTime(); var deltaTime = (now – prevTime) * 0.001; //convert to seconds

// Drawing code goes here... for example updating an 'x' position: someXvalue += 60 * deltaTime;

prevTime = new Date().getTime(); requestAnimationFrame(draw);

}

Delta Time Example

Explanation of Delta Time:

Example 1: Last frame interval is 36ms or 0.036 sec

someXvalue += 60 * deltaTime;

e.g. someXvalue += 60* 0.036; //move 2.16pixels

Example 2: Last frame interval is 72ms or 0.072 sec

someXvalue += 60 * deltaTime;

e.g. someXvalue += 60* 0.072; //move 4.32 pixels

Delta Time Example

“If the frame interval takes twice as long then the variable value will be twice as big”

Delta Time Example

now = new Date().getTime();dt = (now - prevtime) * 0.001;sumframeIntervals += dt;numFrames++;

if(numFrames == 60){var avgFrameInterval = numFrames / sumframeIntervals;

var FPS = Math.floor(avgFrameInterval);console.log("FPS ="+FPS);

sumframeIntervals= 0;numFrames = 0;

}prevtime = new Date().getTime();

Code for estimating FPS

Articles to read on JS Animation loops:• http://creativejs.com/resources/requestanimationframe/• http://www.youtube.com/watch?v=XAqIpGU8ZZk#t=2884s• http://www.w3.org/TR/animation-timing/• https://hacks.mozilla.org/2011/08/animating-with-javascript-f

rom-setinterval-to-requestanimationframe/

Basic Canvas Animation

• A simple example of canvas animation that has no Buffer.

Basic Canvas Animation

var rectW=40;var rectH=40;var rectX = -rectW;var rectY=200;var myLoop; var canvas = null;var context = null;

Basic Canvas Animation

window.onload = function () {canvas =

document.getElementById('testCanvas');context = canvas.getContext("2d");

drawBG();

context.fillStyle= "yellow";context.fillRect(rectX,rectY,rectW,rectH);

myLoop = setInterval(anim, 30);

}

Basic Canvas Animation

function drawBG() {context.fillStyle = "#00eeee";

context.fillRect(0,0,context.canvas.width, context.canvas.height);

}

Basic Canvas Animationfunction anim() {

drawBG();if (rectX < context.canvas.width) {

rectX += 5;context.fillStyle = "red";

context.strokeStyle = "yellow";

context.lineWidth = 3;

context.fillRect(rectX,rectY,rectW,rectW);

context.strokeRect(rectX,rectY,rectW,rectW);} else { rectX = -rectW; }

}

DEMO canvas1_simple_animation.htm

Basic Canvas Animation

• No Animation Buffer? No Middleman!• Remember Canvas is an immediate mode

graphics engine.– All pixels in each frame must be redrawn

Although the demo animation was smooth, canvas based animations can create a flicker or unwanted artifacts with a large number of animations.

No Buffering

Number Crunching Draws directly to Canvas

Double Buffering

Number Crunching

Draws to invisible Canvas Buffer

Copy pixels from the buffer and render on screen

The next frame of animation is computed to an off screen buffer at the same time when the current frame is transferred to the frame buffer.

Double Buffering

• Creating a Buffer is easy!

var bufferCanvas = document.createElement("canvas");

// we create an element but we do not append it //document.appendChild(bufferCanvas);

var bufferCanvasCtx = bufferCanvas.getContext("2d");

Double Buffering• A walkthrough the Particle Demo.

Blitting

“Bit blit (also written BITBLT, BIT BLT, BitBLT, Bit BLT, Bit Blt etc., which stands for bit-level block transfer) is a computer graphics operation in which several bitmaps are combined into one using a raster operator.”

http://en.wikipedia.org/wiki/Bit_blit

• Sprite sheets and blitting – What’s the difference?

Blitting

Reasons for spritesheets• http

://www.codeandweb.com/what-is-a-sprite-sheet

• http://www.codeandweb.com/what-is-a-sprite-sheet-performance

Sprite sheet

var theCanvas; var ctx;

var count = 0;var x;var y;

var img = new Image();img.src = "sprite_sheet.png"img.onload = init;

function init() {

theCanvas = document.getElementById('canvas'); ctx = theCanvas.getContext("2d");

var fps = 25;setInterval(draw, 1000/fps);

}

function draw() {ctx.clearRect(0, 0, 212, 201);

x = (count % 9) * 212;y = Math.floor(count / 9) * 201;

ctx.drawImage(img, x, y, 212, 201, 0, 0, 212, 201);//ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

if(count == 149){count = 0;

} else{count++;

}}

DEMO

sprite_sheets_set_interval.html

requestAnimationFramefunction init() {

theCanvas = document.getElementById('canvas'); ctx = theCanvas.getContext("2d");

requestAnimationFrame(draw);}

function draw() {ctx.clearRect(0, 0, 212, 201);

x = (count % 9) * 212;y = Math.floor(count / 9) * 201;

ctx.drawImage(img, x, y, 212, 201, 0, 0, 212, 201)

if(count == 149){count = 0;

} else{count++;

}

requestAnimationFrame(draw);

}

Event Driven AnimationOr interactive animation

• List of all JS Eventshttp://www.w3schools.com/tags/ref_eventattributes.asp

• Support in browsershttp://www.quirksmode.org/dom/events/index.html

Event Driven Animation

• JS Events useful for interactive animation– Mouse events – Keyboard Events– Touch events (for tablets, phones and touch pads)– Others (window, form…)

http://www.w3schools.com/tags/ref_eventattributes.asp

Event Driven Animation

• Using Keyboard events

Event Driven Animation

• Using the Keyboard demo (keypress event)

window.onload = function () {

canvas = document.getElementById('testCanvas');context = canvas.getContext("2d");

render();

addEventListener("keypress", onPressFunc);}

Event Driven Animation

• Using the Keyboard demo

function render() {context.fillStyle = "#00eeee";

context.fillRect(0,0,context.canvas.width, context.canvas.height);

context.fillStyle= "yellow";context.fillRect(rectX,rectY,50,50);

}

Event Driven Animation• Using the Keyboard demofunction onPressFunc(e){

if(String.fromCharCode(e.charCode) == "w"){ rectY = rectY-5;

}else if(String.fromCharCode(e.charCode) == "s"){

rectY = rectY+5;}else if(String.fromCharCode(e.charCode) == "d"){

rectX = rectX+5;}else if(String.fromCharCode(e.charCode) == "a"){

rectX = rectX-5;}

render();}

Event Driven Animation• Using mouse events

Event Driven Animation• Using the mouse demo (mousemove event)

window.onload = function () {

canvas = document.getElementById('testCanvas');

context = canvas.getContext("2d");

render();

canvas.addEventListener ("mousemove", onMouseMoveFunc);

}

Event Driven Animation• Using the mouse demo (mousemove event)

function render() {context.fillStyle = "#00eeee";

context.fillRect(0,0,context.canvas.width, context.canvas.height);

context.fillStyle= "yellow";context.fillRect(rectX,rectY,50,50);

}

Event Driven Animation• Using the mouse demo (mousemove event)

function onMouseMoveFunc(e){ rectX = e.clientX - 10;

rectY = e.clientY - 10;

render();}

CreateJS

• http://www.youtube.com/watch?v=OWHJa0jKJgo

Resources

Reference• http://www.webplatform.org/• http://www.w3schools.com/tags/

ref_canvas.asp

Tutorials• http://www.html5canvastutorials.com/

Canvas WrappersCreateJShttp://www.createjs.com

KineticJShttp://kineticjs.com/

Canvas Query (helpful for games dev)http://canvasquery.com/#canvas-query

Deconstruct Source code• http://www.apress.com/9781430232919• http://examples.oreilly.com/0636920013327/

html5canvas.zip• http://corehtml5canvas.com/code-live/

DEMOS

• http://ie.microsoft.com/testdrive/performance/fishietank/

• http://timothypoon.com/blog/demos/canvas-particle-parallax/

Things we didn’t cover

• Jquery Animate() function– http://api.jquery.com/animate/

• HTML5 Drag and Drop– http://www.w3schools.com/html/

html5_draganddrop.asp

Assignment ideas• Canvas based game• Children’s drawing book• An online graphing tool (bar chart generator)• Photo effects app… instagram• Custom Design applications– T-Shirt design application– Badge designs– Christmas E-card designer…