CS 174 Web Programming October 7 Class Meeting
CS 174: Web Programming October 7 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www. cs. sjsu. edu/~mak
Java. Script Animation o Animate objects on the HTML canvas. o Use an animation loop to perform transformations: n n n translations: move objects rotations: rotate objects scaling: grow and shrink objects Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 2
Temporary Coordinate System o Transformations are actually performed on the coordinate system. o Draw the object in the transformed coordinate system. o Common sequence: 1. 2. 3. Create a temporary coordinate system (save the current coordinate system). Draw the object. Restore the coordinate system. Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 3
Scaling o Grow or shrink an object by scaling the axes of the coordinate system. n Apply a multiplication factor to each axis. con 1. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 2. save(); Save the current coordinate system and begin a temporary system. con 2. scale(1. 2, 0. 8); con 2. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 2. restore(); Restore the saved coordinate system. animation/transform. html Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 4
Scaling, cont’d Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 5
Rotation o Rotation is clockwise about the canvas origin. n Specify the rotation amount in radians. con 3. save(); animation/transform. html con 3. rotate(Math. PI/8); con 3. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 3. restore(); Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 6
Translation o To rotate around the center of an object, first translate the canvas origin to the object center. con 4. save(); animation/transform. html con 4. translate(100, 100); con 4. rotate(Math. PI/8); con 4. draw. Image(image, -IMAGE_W/2, -IMAGE_H/2, IMAGE_W, IMAGE_H); con 4. restore(); Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 7
Animation Loop o To animate, repeatedly call a drawing function. o Set the frame rate. n o Games typically run between 10 and 30 frames per second. Call set. Interval(function, delay) n n function: the drawing function to call repeatedly delay: the number of milliseconds between calls o o 100 = 10 frames/second 50 = 20 frames/second Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 8
Animated Rotation <body onload = "init()"> <h 1>Rotations</h 1> animation/rotate. html <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> </body> Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 9
Animated Rotation, cont’d const const CANVAS_X CANVAS_Y CANVAS_W CANVAS_H IMAGE_W IMAGE_H = = = 50; 200; 100; animation/rotate. html var con; var image; var angle = 0; function init() { con = document. get. Element. By. Id("canvas"). get. Context("2 d"); image = new Image(); image. src = "images/bristol. png"; set. Interval(draw, 50); } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 10
Animated Rotation, cont’d animation/rotate. html function draw() { con. stroke. Style = "black"; con. fill. Style = "white"; First clear con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); the canvas con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); angle += 0. 25; if (angle > 2*Math. PI) angle = 0; con. save(); con. translate(100, 100); Translate, then rotate. con. rotate(angle); con. draw. Image(image, -IMAGE_W/2, -IMAGE_H/2, IMAGE_W, IMAGE_H); con. restore(); } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 11
Moving Objects o To animate moving an object, draw it in a slightly different location during each call of the drawing function. o Remember to clear the canvas first, otherwise the object is “smeared” across the canvas. Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 12
Moving Objects, cont’d animation/bounce. html function draw() { Clear the con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); canvas. con. draw. Image(image, x, y, IMAGE_W, IMAGE_H); x += dx; y += dy; // Bounce off a wall if ((x < 0) || (x > RIGHT)) dx = -dx; if ((y < 0) || (y > BOTTOM)) dy = -dy; } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 13
Keyboard Animation Control o o You can use the keyboard to control animation. Set the event handler for the document’s onkeydown event. const const KEY_SPACE KEY_LEFT KEY_UP KEY_RIGHT KEY_DOWN = = = 32; 37; 38; 39; 40; animation/arrowkeys. html . . . document. onkeydown = update. Keys; Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 14
Keyboard Animation Control, cont’d animation/arrowkeys. html function update. Keys(event) { key = event. key. Code; switch(key) { case KEY_LEFT: case KEY_RIGHT: case KEY_UP: case KEY_DOWN: case KEY_SPACE: default: } dx dx dy dy dx -= 5; += 5; = dy = 0; break; break; } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 15
Keyboard Animation Control, cont’d animation/arrowkeys. html function draw() { con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. draw. Image(image, x, y, IMAGE_W, IMAGE_H); x += dx; y += dy; // Wrap if else if around (x < 0) (x > CANVAS_W) (y < 0) (y > CANVAS_H) x x y y = = CANVAS_W; 0; CANVAS_H; 0; } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 16
Mouse Events o o o onclick oncontextmenu ondblclick onmouseup onmousedown onmouseenter Computer Science Dept. Fall 2015: October 7 o o onmouseleave onmousemove onmouseover onmouseout CS 174: Web Programming © R. Mak Demo 17
Mouse Animation Control animation/mouse. html function init() { var canvas = document. get. Element. By. Id("canvas"); con = canvas. get. Context("2 d"); con. fill. Style = "white"; con. stroke. Style = "lightgray"; con. line. Width = 1; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); canvas. onmouseenter = mouse. Enter; canvas. onmouseleave = mouse. Leave; canvas. onmousemove = mouse. Move; } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 18
Mouse Animation Control, cont’d function mouse. Enter(event) animation/mouse. html { con. line. Width = 3; con. stroke. Style = "white"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Style = "red"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); } function mouse. Leave(event) { con. line. Width = 4; con. stroke. Style = "white"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Style = "lightgray"; con. line. Width = 1; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 19
Mouse Animation Control, cont’d function mouse. Move(event) { var mouse. X = event. page. X - CANVAS_LEFT; Map page coordinates var mouse. Y = event. page. Y - CANVAS_TOP; to canvas coordinates. con. line. Width = 3; con. fill. Style = "white"; con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. line. Width = 5; con. begin. Path(); con. move. To(CANVAS_W/2, CANVAS_H/2); con. line. To(mouse. X, mouse. Y); con. stroke(); con. close. Path(); animation/mouse. html } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak 20
Mouse Animation Control, cont’d <style type = "text/css"> #canvas { position: absolute; left: 50 px; top: 100 px; } </style> const CANVAS_LEFT = 50; const CANVAS_TOP = 100; animation/mouse. html <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 21
Animated Menus o Done entirely with CSS and Java. Script. n No canvas required! ul. menu { display: none; Initially invisible. list-style-type: none; margin-top: 5 px; } if (this. Menu. Style. display == "block") { this. Menu. Style. display = "none"; } Toggle between else { invisible and visible. this. Menu. Style. display = "block"; } Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 22
Animated Menus, cont’d o We can make the animated menus fancier with a better CSS file and better Java. Script. o Anonymous functions to toggle visibility: Semicolon required! menu. Parent. onmouseout = function() { this. Menu. Style. display = "none"; }; menu. Parent. onmouseover = function() { this. Menu. Style. display = "block"; }; Computer Science Dept. Fall 2015: October 7 CS 174: Web Programming © R. Mak Demo 23
- Slides: 23