├── 9781430236658.jpg ├── LICENSE.txt ├── README.md ├── contributing.md └── html5-animation-source-code ├── README ├── examples ├── ch02 │ ├── 01-skeleton.html │ ├── 02-event-demo.html │ ├── 03-mouse-events.html │ ├── 04-mouse-position.html │ ├── 05-touch-events.html │ ├── 06-keyboard-events.html │ ├── 07-key-codes.html │ └── 08-key-names.html ├── ch03 │ ├── 01-rotate-to-mouse.html │ ├── 02-bobbing-1.html │ ├── 03-bobbing-2.html │ ├── 04-wave-1.html │ ├── 05-pulse.html │ ├── 06-random.html │ ├── 07-wave-2.html │ ├── 08-circle.html │ ├── 09-oval.html │ ├── 10-distance.html │ ├── 11-mouse-distance.html │ └── classes │ │ ├── arrow.js │ │ └── ball.js ├── ch04 │ ├── 01-drawing-app.html │ ├── 02-drawing-curves.html │ ├── 03-curve-through-point.html │ ├── 04-multi-curve-1.html │ ├── 05-multi-curve-2.html │ ├── 06-multi-curve-3.html │ ├── 07-gradient-fill-1.html │ ├── 08-gradient-fill-2.html │ ├── 09-gradient-fill-radial.html │ ├── 10-load-image.html │ ├── 11-embed-image.html │ ├── 12-video-frames.html │ ├── 13-invert-color.html │ ├── 14-grayscale.html │ ├── 15-pixel-move.html │ ├── 16-spray-paint.html │ └── assets │ │ ├── movieclip.mp4 │ │ ├── movieclip.ogv │ │ ├── movieclip.webm │ │ └── picture.jpg ├── ch05 │ ├── 01-velocity-1.html │ ├── 02-velocity-2.html │ ├── 03-velocity-angle.html │ ├── 04-follow-mouse-1.html │ ├── 05-rotational-velocity.html │ ├── 06-acceleration-1.html │ ├── 07-acceleration-2.html │ ├── 08-acceleration-3.html │ ├── 09-gravity.html │ ├── 10-follow-mouse-2.html │ ├── 11-ship-sim.html │ └── classes │ │ ├── arrow.js │ │ ├── ball.js │ │ └── ship.js ├── ch06 │ ├── 01-removal.html │ ├── 02-fountain.html │ ├── 03-ship-sim-2.html │ ├── 04-bouncing-1.html │ ├── 05-bouncing-2.html │ ├── 06-friction-1.html │ ├── 07-friction-2.html │ ├── 08-ship-sim-friction.html │ └── classes │ │ ├── ball.js │ │ └── ship.js ├── ch07 │ ├── 01-mouse-events.html │ ├── 02-touch-events.html │ ├── 03-mouse-move-drag.html │ ├── 04-drag-and-move-1.html │ ├── 05-drag-and-move-2.html │ ├── 06-throwing.html │ └── classes │ │ └── ball.js ├── ch08 │ ├── 01-easing-1.html │ ├── 02-easing-2.html │ ├── 03-easing-off.html │ ├── 04-ease-to-mouse.html │ ├── 05-spring-1.html │ ├── 06-spring-2.html │ ├── 07-spring-3.html │ ├── 08-spring-4.html │ ├── 09-spring-5.html │ ├── 10-chain.html │ ├── 11-chain-array.html │ ├── 12-multi-spring.html │ ├── 13-offset-spring.html │ ├── 14-double-spring.html │ ├── 15-triple-spring.html │ └── classes │ │ └── ball.js ├── ch09 │ ├── 01-object-hit-test.html │ ├── 02-boxes.html │ ├── 03-point-hit-test.html │ ├── 04-distance-1.html │ ├── 05-distance-2.html │ ├── 06-bubbles-1.html │ ├── 07-bubbles-2.html │ ├── 08-bubbles-3.html │ └── classes │ │ ├── ball.js │ │ └── box.js ├── ch10 │ ├── 01-rotate-1.html │ ├── 02-rotate-2.html │ ├── 03-rotate-3.html │ ├── 04-angle-bounce.html │ ├── 05-angle-bounce-opt.html │ ├── 06-angle-bounce-rotate.html │ ├── 07-angle-bounce-hit-test.html │ ├── 08-angle-bounce-bounds.html │ ├── 09-angle-bounce-final.html │ ├── 10-multi-angle-bounce.html │ └── classes │ │ ├── ball.js │ │ └── line.js ├── ch11 │ ├── 01-billiard-1.html │ ├── 02-billiard-2.html │ ├── 03-billiard-3.html │ ├── 04-billiard-4.html │ ├── 05-multi-billiard-1.html │ ├── 06-multi-billiard-2.html │ └── classes │ │ └── ball.js ├── ch12 │ ├── 01-gravity.html │ ├── 02-gravity-bounce.html │ ├── 03-gravity-random.html │ ├── 04-orbit.html │ ├── 05-orbit-draw.html │ ├── 06-node-garden.html │ ├── 07-node-garden-lines.html │ ├── 08-node-garden-mass.html │ └── classes │ │ └── ball.js ├── ch13 │ ├── 01-segment.html │ ├── 02-single-segment.html │ ├── 03-two-segments-1.html │ ├── 04-two-segments-2.html │ ├── 05-walking-1.html │ ├── 06-walking-2.html │ ├── 07-walking-3.html │ ├── 08-walking-4.html │ ├── 09-walking-5.html │ ├── 10-real-walk.html │ └── classes │ │ ├── segment.js │ │ └── slider.js ├── ch14 │ ├── 01-one-segment.html │ ├── 02-one-segment-drag.html │ ├── 03-two-segment-drag.html │ ├── 04-multi-segment-drag.html │ ├── 05-two-segment-reach.html │ ├── 06-multi-segment-reach.html │ ├── 07-play-ball.html │ ├── 08-cosines-1.html │ ├── 09-cosines-2.html │ └── classes │ │ ├── ball.js │ │ └── segment.js ├── ch15 │ ├── 01-perspective-1.html │ ├── 02-perspective-2.html │ ├── 03-velocity-3d.html │ ├── 04-bounce-3d.html │ ├── 05-multi-bounce-3d.html │ ├── 06-z-sort.html │ ├── 07-bouncy-balls.html │ ├── 08-trees-1.html │ ├── 09-trees-2.html │ ├── 10-easing-3d.html │ ├── 11-spring-3d.html │ ├── 12-rotate-y.html │ ├── 13-rotate-xy.html │ ├── 14-collision-3d.html │ └── classes │ │ ├── ball.js │ │ ├── ball3d.js │ │ └── tree.js ├── ch16 │ ├── 01-lines-3d-1.html │ ├── 02-lines-3d-2.html │ ├── 03-square-3d.html │ ├── 04-spinning-e.html │ ├── 05-filled-e.html │ ├── 06-triangles.html │ ├── 07-cube.html │ ├── 08-pyramid.html │ ├── 09-extruded-a.html │ ├── 10-cylinder.html │ ├── 11-move-cube-1.html │ ├── 12-move-cube-2.html │ └── classes │ │ ├── ball3d.js │ │ ├── point3d.js │ │ └── triangle.js ├── ch17 │ ├── 01-extruded-a-cull.html │ ├── 02-extruded-a-depth.html │ ├── 03-extruded-a-light.html │ └── classes │ │ ├── light.js │ │ ├── point3d.js │ │ ├── triangle-light.js │ │ └── triangle.js ├── ch18 │ ├── 01-rotate-xy.html │ ├── 02-matrix-rotate.html │ ├── 03-skew-x.html │ ├── 04-skew-xy.html │ └── classes │ │ └── ball3d.js ├── ch19 │ ├── 01-brownian-1.html │ ├── 02-brownian-2.html │ ├── 03-random-1.html │ ├── 04-random-2.html │ ├── 05-random-3.html │ ├── 06-random-4.html │ ├── 07-random-5.html │ ├── 08-random-6.html │ ├── 09-random-7.html │ ├── 10-random-8.html │ ├── 11-timer.html │ ├── 12-time-based-1.html │ ├── 13-time-based-2.html │ ├── 14-time-based-3.html │ ├── 15-same-mass.html │ ├── 16-sound-events.html │ ├── assets │ │ ├── boing.mp3 │ │ ├── boing.ogg │ │ └── boing.wav │ └── classes │ │ └── ball.js └── include │ ├── file_icon.png │ ├── style.css │ └── utils.js ├── index.html └── xtras ├── easing-equations ├── README.md ├── demo.html ├── easing.js └── src │ ├── back.js │ ├── bounce.js │ ├── circ.js │ ├── cubic.js │ ├── elastic.js │ ├── expo.js │ ├── linear.js │ ├── quad.js │ ├── quart.js │ ├── quint.js │ └── sine.js └── keycode.js /9781430236658.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/9781430236658.jpg -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/LICENSE.txt -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Apress Source Code 2 | 3 | This repository accompanies [*Foundation HTML5 Animation with JavaScript*](http://www.apress.com/9781430236658) by Billy Lamberta and Keith Peters (Apress, 2011). 4 | 5 | ![Cover image](9781430236658.jpg) 6 | 7 | Download the files as a zip using the green button, or clone the repository to your machine using Git. 8 | 9 | ## Releases 10 | 11 | Release v1.0 corresponds to the code in the published book, without corrections or updates. 12 | 13 | ## Contributions 14 | 15 | See the file Contributing.md for more information on how you can contribute to this repository. 16 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing to Apress Source Code 2 | 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers. 4 | 5 | ## How to Contribute 6 | 7 | 1. Make sure you have a GitHub account. 8 | 2. Fork the repository for the relevant book. 9 | 3. Create a new branch on which to make your change, e.g. 10 | `git checkout -b my_code_contribution` 11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted. 12 | 5. Submit a pull request. 13 | 14 | Thank you for your contribution! -------------------------------------------------------------------------------- /html5-animation-source-code/README: -------------------------------------------------------------------------------- 1 | This example code is from 'Foundation HTML5 Animation with JavaScript' 2 | by Billy Lamberta and Keith Peters, published by Apress. 3 | http://amzn.com/1430236655?tag=html5anim-20 4 | 5 | You are free to use this source code as you wish. For a 6 | detailed explanation of each exercise, or if you find these 7 | listings helpful and would like to support our work, please 8 | consider buying the book. 9 | 10 | The latest version of this code can be found at 11 | https://github.com/lamberta/html5-animation 12 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/01-skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/02-event-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Event Demo 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/03-mouse-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Events 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/04-mouse-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Position 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/05-touch-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Touch Events 6 | 7 | 8 | 9 | 10 |
11 | Example from Foundation HTML5 Animation with JavaScript 12 |
13 | 14 | 15 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/06-keyboard-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Keyboard Events 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/07-key-codes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Key Codes 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch02/08-key-names.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Key Names 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/01-rotate-to-mouse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate to Mouse 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/02-bobbing-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bobbing 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/03-bobbing-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bobbing 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/04-wave-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wave 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/05-pulse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pulse 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/06-random.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/07-wave-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wave 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/08-circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Circle 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/09-oval.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Oval 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/10-distance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Distance 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/11-mouse-distance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Distance 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/classes/arrow.js: -------------------------------------------------------------------------------- 1 | function Arrow () { 2 | this.x = 0; 3 | this.y = 0; 4 | this.color = "#ffff00"; 5 | this.rotation = 0; 6 | } 7 | 8 | Arrow.prototype.draw = function (context) { 9 | context.save(); 10 | context.translate(this.x, this.y); 11 | context.rotate(this.rotation); 12 | 13 | context.lineWidth = 2; 14 | context.fillStyle = this.color; 15 | context.beginPath(); 16 | context.moveTo(-50, -25); 17 | context.lineTo(0, -25); 18 | context.lineTo(0, -50); 19 | context.lineTo(50, 0); 20 | context.lineTo(0, 50); 21 | context.lineTo(0, 25); 22 | context.lineTo(-50, 25); 23 | context.lineTo(-50, -25); 24 | context.closePath(); 25 | context.fill(); 26 | context.stroke(); 27 | 28 | context.restore(); 29 | }; 30 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch03/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.rotation = 0; 8 | this.scaleX = 1; 9 | this.scaleY = 1; 10 | this.color = utils.parseColor(color); 11 | this.lineWidth = 1; 12 | } 13 | 14 | Ball.prototype.draw = function (context) { 15 | context.save(); 16 | context.translate(this.x, this.y); 17 | context.rotate(this.rotation); 18 | context.scale(this.scaleX, this.scaleY); 19 | 20 | context.lineWidth = this.lineWidth; 21 | context.fillStyle = this.color; 22 | context.beginPath(); 23 | //x, y, radius, start_angle, end_angle, anti-clockwise 24 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 25 | context.closePath(); 26 | context.fill(); 27 | if (this.lineWidth > 0) { 28 | context.stroke(); 29 | } 30 | context.restore(); 31 | }; 32 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/01-drawing-app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drawing App 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/02-drawing-curves.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drawing Curves 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/03-curve-through-point.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Curve Through Point 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/04-multi-curve-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multi Curve 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/05-multi-curve-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multi Curve 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/06-multi-curve-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multi Curve 3 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/07-gradient-fill-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gradient Fill 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/08-gradient-fill-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gradient Fill 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/09-gradient-fill-radial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gradient Fill Radial 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/10-load-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Load Image 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/11-embed-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Embed Image 6 | 7 | 12 | 13 | 14 |
15 | Example from Foundation HTML5 Animation with JavaScript 16 |
17 | 18 | 19 | 20 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/12-video-frames.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video Frames 6 | 7 | 12 | 13 | 14 |
15 | Example from Foundation HTML5 Animation with JavaScript 16 |
17 | 18 | 19 | 24 | 25 | 26 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/13-invert-color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Invert Color 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/14-grayscale.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grayscale 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/15-pixel-move.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pixel Move 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/assets/movieclip.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch04/assets/movieclip.mp4 -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/assets/movieclip.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch04/assets/movieclip.ogv -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/assets/movieclip.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch04/assets/movieclip.webm -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch04/assets/picture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch04/assets/picture.jpg -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/01-velocity-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Velocity 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/02-velocity-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Velocity 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/03-velocity-angle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Velocity Angle 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/04-follow-mouse-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Follow Mouse 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/05-rotational-velocity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotational Velocity 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/06-acceleration-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Acceleration 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/07-acceleration-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Acceleration 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/08-acceleration-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Acceleration 3 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/09-gravity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gravity 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/10-follow-mouse-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Follow Mouse 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/classes/arrow.js: -------------------------------------------------------------------------------- 1 | function Arrow () { 2 | this.x = 0; 3 | this.y = 0; 4 | this.color = "#ffff00"; 5 | this.rotation = 0; 6 | } 7 | 8 | Arrow.prototype.draw = function (context) { 9 | context.save(); 10 | context.translate(this.x, this.y); 11 | context.rotate(this.rotation); 12 | 13 | context.lineWidth = 2; 14 | context.fillStyle = this.color; 15 | context.beginPath(); 16 | context.moveTo(-50, -25); 17 | context.lineTo(0, -25); 18 | context.lineTo(0, -50); 19 | context.lineTo(50, 0); 20 | context.lineTo(0, 50); 21 | context.lineTo(0, 25); 22 | context.lineTo(-50, 25); 23 | context.lineTo(-50, -25); 24 | context.closePath(); 25 | context.fill(); 26 | context.stroke(); 27 | 28 | context.restore(); 29 | }; 30 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.rotation = 0; 8 | this.scaleX = 1; 9 | this.scaleY = 1; 10 | this.color = utils.parseColor(color); 11 | this.lineWidth = 1; 12 | } 13 | 14 | Ball.prototype.draw = function (context) { 15 | context.save(); 16 | context.translate(this.x, this.y); 17 | context.rotate(this.rotation); 18 | context.scale(this.scaleX, this.scaleY); 19 | 20 | context.lineWidth = this.lineWidth; 21 | context.fillStyle = this.color; 22 | context.beginPath(); 23 | //x, y, radius, start_angle, end_angle, anti-clockwise 24 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 25 | context.closePath(); 26 | context.fill(); 27 | if (this.lineWidth > 0) { 28 | context.stroke(); 29 | } 30 | context.restore(); 31 | }; 32 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch05/classes/ship.js: -------------------------------------------------------------------------------- 1 | function Ship () { 2 | this.x = 0; 3 | this.y = 0; 4 | this.width = 25; 5 | this.height = 20; 6 | this.rotation = 0; 7 | this.showFlame = false; 8 | } 9 | 10 | Ship.prototype.draw = function (context) { 11 | context.save(); 12 | context.translate(this.x, this.y); 13 | context.rotate(this.rotation); 14 | 15 | context.lineWidth = 1; 16 | context.strokeStyle = "#ffffff"; 17 | context.beginPath(); 18 | context.moveTo(10, 0); 19 | context.lineTo(-10, 10); 20 | context.lineTo(-5, 0); 21 | context.lineTo(-10, -10); 22 | context.lineTo(10, 0); 23 | context.stroke(); 24 | 25 | if (this.showFlame) { 26 | context.beginPath(); 27 | context.moveTo(-7.5, -5); 28 | context.lineTo(-15, 0); 29 | context.lineTo(-7.5, 5); 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/01-removal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Removal 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/02-fountain.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fountain 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/04-bouncing-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/05-bouncing-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/06-friction-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Friction 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/07-friction-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Friction 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.rotation = 0; 10 | this.scaleX = 1; 11 | this.scaleY = 1; 12 | this.color = utils.parseColor(color); 13 | this.lineWidth = 1; 14 | } 15 | 16 | Ball.prototype.draw = function (context) { 17 | context.save(); 18 | context.translate(this.x, this.y); 19 | context.rotate(this.rotation); 20 | context.scale(this.scaleX, this.scaleY); 21 | 22 | context.lineWidth = this.lineWidth; 23 | context.fillStyle = this.color; 24 | context.beginPath(); 25 | //x, y, radius, start_angle, end_angle, anti-clockwise 26 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 27 | context.closePath(); 28 | context.fill(); 29 | if (this.lineWidth > 0) { 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch06/classes/ship.js: -------------------------------------------------------------------------------- 1 | function Ship () { 2 | this.x = 0; 3 | this.y = 0; 4 | this.width = 25; 5 | this.height = 20; 6 | this.rotation = 0; 7 | this.showFlame = false; 8 | } 9 | 10 | Ship.prototype.draw = function (context) { 11 | context.save(); 12 | context.translate(this.x, this.y); 13 | context.rotate(this.rotation); 14 | 15 | context.lineWidth = 1; 16 | context.strokeStyle = "#ffffff"; 17 | context.beginPath(); 18 | context.moveTo(10, 0); 19 | context.lineTo(-10, 10); 20 | context.lineTo(-5, 0); 21 | context.lineTo(-10, -10); 22 | context.lineTo(10, 0); 23 | context.stroke(); 24 | 25 | if (this.showFlame) { 26 | context.beginPath(); 27 | context.moveTo(-7.5, -5); 28 | context.lineTo(-15, 0); 29 | context.lineTo(-7.5, 5); 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch07/01-mouse-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Events 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch07/02-touch-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Touch Events 6 | 7 | 8 | 9 | 10 |
11 | Example from Foundation HTML5 Animation with JavaScript 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch07/03-mouse-move-drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Move Drag 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch07/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.rotation = 0; 10 | this.scaleX = 1; 11 | this.scaleY = 1; 12 | this.color = utils.parseColor(color); 13 | this.lineWidth = 1; 14 | } 15 | 16 | Ball.prototype.draw = function (context) { 17 | context.save(); 18 | context.translate(this.x, this.y); 19 | context.rotate(this.rotation); 20 | context.scale(this.scaleX, this.scaleY); 21 | 22 | context.lineWidth = this.lineWidth; 23 | context.fillStyle = this.color; 24 | context.beginPath(); 25 | //x, y, radius, start_angle, end_angle, anti-clockwise 26 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 27 | context.closePath(); 28 | context.fill(); 29 | if (this.lineWidth > 0) { 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | 35 | Ball.prototype.getBounds = function () { 36 | return { 37 | x: this.x - this.radius, 38 | y: this.y - this.radius, 39 | width: this.radius * 2, 40 | height: this.radius * 2 41 | }; 42 | }; 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/01-easing-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Easing 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/02-easing-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Easing 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/03-easing-off.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Easing Off 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/04-ease-to-mouse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ease to Mouse 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/05-spring-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/06-spring-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/07-spring-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring 3 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/08-spring-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring 4 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/09-spring-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring 5 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/10-chain.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chain 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/11-chain-array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chain Array 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/13-offset-spring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Offset Spring 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch08/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.rotation = 0; 10 | this.scaleX = 1; 11 | this.scaleY = 1; 12 | this.color = utils.parseColor(color); 13 | this.lineWidth = 1; 14 | } 15 | 16 | Ball.prototype.draw = function (context) { 17 | context.save(); 18 | context.translate(this.x, this.y); 19 | context.rotate(this.rotation); 20 | context.scale(this.scaleX, this.scaleY); 21 | 22 | context.lineWidth = this.lineWidth; 23 | context.fillStyle = this.color; 24 | context.beginPath(); 25 | //x, y, radius, start_angle, end_angle, anti-clockwise 26 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 27 | context.closePath(); 28 | context.fill(); 29 | if (this.lineWidth > 0) { 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | 35 | Ball.prototype.getBounds = function () { 36 | return { 37 | x: this.x - this.radius, 38 | y: this.y - this.radius, 39 | width: this.radius * 2, 40 | height: this.radius * 2 41 | }; 42 | }; 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/01-object-hit-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Object Hit Test 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/02-boxes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boxes 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/03-point-hit-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point Hit Test 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/04-distance-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Distance 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/05-distance-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Distance 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.rotation = 0; 10 | this.scaleX = 1; 11 | this.scaleY = 1; 12 | this.color = utils.parseColor(color); 13 | this.lineWidth = 1; 14 | } 15 | 16 | Ball.prototype.draw = function (context) { 17 | context.save(); 18 | context.translate(this.x, this.y); 19 | context.rotate(this.rotation); 20 | context.scale(this.scaleX, this.scaleY); 21 | 22 | context.lineWidth = this.lineWidth; 23 | context.fillStyle = this.color; 24 | context.beginPath(); 25 | //x, y, radius, start_angle, end_angle, anti-clockwise 26 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 27 | context.closePath(); 28 | context.fill(); 29 | if (this.lineWidth > 0) { 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | 35 | Ball.prototype.getBounds = function () { 36 | return { 37 | x: this.x - this.radius, 38 | y: this.y - this.radius, 39 | width: this.radius * 2, 40 | height: this.radius * 2 41 | }; 42 | }; 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch09/classes/box.js: -------------------------------------------------------------------------------- 1 | function Box (width, height, color) { 2 | if (width === undefined) { width = 50; } 3 | if (height === undefined) { height = 50; } 4 | if (color === undefined) { color = "#ff0000"; } 5 | this.x = 0; 6 | this.x = 0; 7 | this.y = 0; 8 | this.width = width; 9 | this.height = height; 10 | this.vx = 0; 11 | this.vy = 0; 12 | this.rotation = 0; 13 | this.scaleX = 1; 14 | this.scaleY = 1; 15 | this.color = utils.parseColor(color); 16 | this.lineWidth = 1; 17 | } 18 | 19 | Box.prototype.draw = function (context) { 20 | context.save(); 21 | context.translate(this.x, this.y); 22 | context.rotate(this.rotation); 23 | context.scale(this.scaleX, this.scaleY); 24 | 25 | context.lineWidth = this.lineWidth; 26 | context.fillStyle = this.color; 27 | context.beginPath(); 28 | context.rect(0, 0, this.width, this.height); 29 | context.closePath(); 30 | context.fill(); 31 | if (this.lineWidth > 0) { 32 | context.stroke(); 33 | } 34 | context.restore(); 35 | }; 36 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch10/01-rotate-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch10/02-rotate-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch10/03-rotate-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate 3 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch10/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.rotation = 0; 10 | this.scaleX = 1; 11 | this.scaleY = 1; 12 | this.color = utils.parseColor(color); 13 | this.lineWidth = 1; 14 | } 15 | 16 | Ball.prototype.draw = function (context) { 17 | context.save(); 18 | context.translate(this.x, this.y); 19 | context.rotate(this.rotation); 20 | context.scale(this.scaleX, this.scaleY); 21 | 22 | context.lineWidth = this.lineWidth; 23 | context.fillStyle = this.color; 24 | context.beginPath(); 25 | //x, y, radius, start_angle, end_angle, anti-clockwise 26 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 27 | context.closePath(); 28 | context.fill(); 29 | if (this.lineWidth > 0) { 30 | context.stroke(); 31 | } 32 | context.restore(); 33 | }; 34 | 35 | Ball.prototype.getBounds = function () { 36 | return { 37 | x: this.x - this.radius, 38 | y: this.y - this.radius, 39 | width: this.radius * 2, 40 | height: this.radius * 2 41 | }; 42 | }; 43 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch10/classes/line.js: -------------------------------------------------------------------------------- 1 | function Line (x1, y1, x2, y2) { 2 | this.x = 0; 3 | this.y = 0; 4 | this.x1 = (x1 === undefined) ? 0 : x1; 5 | this.y1 = (y1 === undefined) ? 0 : y1; 6 | this.x2 = (x2 === undefined) ? 0 : x2; 7 | this.y2 = (y2 === undefined) ? 0 : y2; 8 | this.rotation = 0; 9 | this.scaleX = 1; 10 | this.scaleY = 1; 11 | this.lineWidth = 1; 12 | } 13 | 14 | Line.prototype.draw = function (context) { 15 | context.save(); 16 | context.translate(this.x, this.y); 17 | context.rotate(this.rotation); 18 | context.scale(this.scaleX, this.scaleY); 19 | 20 | context.lineWidth = this.lineWidth; 21 | context.beginPath(); 22 | context.moveTo(this.x1, this.y1); 23 | context.lineTo(this.x2, this.y2); 24 | context.closePath(); 25 | context.stroke(); 26 | context.restore(); 27 | }; 28 | 29 | Line.prototype.getBounds = function () { 30 | if (this.rotation === 0) { 31 | var minX = Math.min(this.x1, this.x2), 32 | minY = Math.min(this.y1, this.y2), 33 | maxX = Math.max(this.x1, this.x2), 34 | maxY = Math.max(this.y1, this.y2); 35 | return { 36 | x: this.x + minX, 37 | y: this.y + minY, 38 | width: maxX - minX, 39 | height: maxY - minY 40 | } 41 | } else { 42 | var sin = Math.sin(this.rotation), 43 | cos = Math.cos(this.rotation), 44 | x1r = cos * this.x1 + sin * this.y1, 45 | x2r = cos * this.x2 + sin * this.y2, 46 | y1r = cos * this.y1 + sin * this.x1, 47 | y2r = cos * this.y2 + sin * this.x2; 48 | return { 49 | x: this.x + Math.min(x1r, x2r), 50 | y: this.y + Math.min(y1r, y2r), 51 | width: Math.max(x1r, x2r) - Math.min(x1r, x2r), 52 | height: Math.max(y1r, y2r) - Math.min(y1r, y2r) 53 | }; 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch11/01-billiard-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Billiard 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch11/02-billiard-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Billiard 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch11/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.mass = 1; 10 | this.rotation = 0; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.color = utils.parseColor(color); 14 | this.lineWidth = 1; 15 | } 16 | 17 | Ball.prototype.draw = function (context) { 18 | context.save(); 19 | context.translate(this.x, this.y); 20 | context.rotate(this.rotation); 21 | context.scale(this.scaleX, this.scaleY); 22 | 23 | context.lineWidth = this.lineWidth; 24 | context.fillStyle = this.color; 25 | context.beginPath(); 26 | //x, y, radius, start_angle, end_angle, anti-clockwise 27 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 28 | context.closePath(); 29 | context.fill(); 30 | if (this.lineWidth > 0) { 31 | context.stroke(); 32 | } 33 | context.restore(); 34 | }; 35 | 36 | Ball.prototype.getBounds = function () { 37 | return { 38 | x: this.x - this.radius, 39 | y: this.y - this.radius, 40 | width: this.radius * 2, 41 | height: this.radius * 2 42 | }; 43 | }; 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch12/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.mass = 1; 10 | this.rotation = 0; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.color = utils.parseColor(color); 14 | this.lineWidth = 1; 15 | } 16 | 17 | Ball.prototype.draw = function (context) { 18 | context.save(); 19 | context.translate(this.x, this.y); 20 | context.rotate(this.rotation); 21 | context.scale(this.scaleX, this.scaleY); 22 | 23 | context.lineWidth = this.lineWidth; 24 | context.fillStyle = this.color; 25 | context.beginPath(); 26 | //x, y, radius, start_angle, end_angle, anti-clockwise 27 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 28 | context.closePath(); 29 | context.fill(); 30 | if (this.lineWidth > 0) { 31 | context.stroke(); 32 | } 33 | context.restore(); 34 | }; 35 | 36 | Ball.prototype.getBounds = function () { 37 | return { 38 | x: this.x - this.radius, 39 | y: this.y - this.radius, 40 | width: this.radius * 2, 41 | height: this.radius * 2 42 | }; 43 | }; 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/01-segment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Segment 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/02-single-segment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Single Segment 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/03-two-segments-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Two Segments 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/04-two-segments-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Two Segments 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/05-walking-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Walking 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/06-walking-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Walking 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch13/classes/segment.js: -------------------------------------------------------------------------------- 1 | function Segment (width, height, color) { 2 | this.x = 0; 3 | this.y = 0; 4 | this.width = width; 5 | this.height = height; 6 | this.vx = 0; 7 | this.vy = 0; 8 | this.rotation = 0; 9 | this.scaleX = 1; 10 | this.scaleY = 1; 11 | this.color = (color === undefined) ? "#ffffff" : utils.parseColor(color); 12 | this.lineWidth = 1; 13 | } 14 | 15 | Segment.prototype.draw = function (context) { 16 | var h = this.height, 17 | d = this.width + h, //top-right diagonal 18 | cr = h / 2; //corner radius 19 | context.save(); 20 | context.translate(this.x, this.y); 21 | context.rotate(this.rotation); 22 | context.scale(this.scaleX, this.scaleY); 23 | context.lineWidth = this.lineWidth; 24 | context.fillStyle = this.color; 25 | context.beginPath(); 26 | context.moveTo(0, -cr); 27 | context.lineTo(d-2*cr, -cr); 28 | context.quadraticCurveTo(-cr+d, -cr, -cr+d, 0); 29 | context.lineTo(-cr+d, h-2*cr); 30 | context.quadraticCurveTo(-cr+d, -cr+h, d-2*cr, -cr+h); 31 | context.lineTo(0, -cr+h); 32 | context.quadraticCurveTo(-cr, -cr+h, -cr, h-2*cr); 33 | context.lineTo(-cr, 0); 34 | context.quadraticCurveTo(-cr, -cr, 0, -cr); 35 | context.closePath(); 36 | context.fill(); 37 | if (this.lineWidth > 0) { 38 | context.stroke(); 39 | } 40 | //draw the 2 "pins" 41 | context.beginPath(); 42 | context.arc(0, 0, 2, 0, (Math.PI * 2), true); 43 | context.closePath(); 44 | context.stroke(); 45 | 46 | context.beginPath(); 47 | context.arc(this.width, 0, 2, 0, (Math.PI * 2), true); 48 | context.closePath(); 49 | context.stroke(); 50 | 51 | context.restore(); 52 | }; 53 | 54 | Segment.prototype.getPin = function () { 55 | return { 56 | x: this.x + Math.cos(this.rotation) * this.width, 57 | y: this.y + Math.sin(this.rotation) * this.width 58 | }; 59 | }; 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/01-one-segment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | One Segment 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/02-one-segment-drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | One Segment Drag 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/03-two-segment-drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Two Segment Drag 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/04-multi-segment-drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multi Segment Drag 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/05-two-segment-reach.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Two Segment Reach 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/08-cosines-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cosines 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/09-cosines-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cosines 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.mass = 1; 10 | this.rotation = 0; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.color = utils.parseColor(color); 14 | this.lineWidth = 1; 15 | } 16 | 17 | Ball.prototype.draw = function (context) { 18 | context.save(); 19 | context.translate(this.x, this.y); 20 | context.rotate(this.rotation); 21 | context.scale(this.scaleX, this.scaleY); 22 | 23 | context.lineWidth = this.lineWidth; 24 | context.fillStyle = this.color; 25 | context.beginPath(); 26 | //x, y, radius, start_angle, end_angle, anti-clockwise 27 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 28 | context.closePath(); 29 | context.fill(); 30 | if (this.lineWidth > 0) { 31 | context.stroke(); 32 | } 33 | context.restore(); 34 | }; 35 | 36 | Ball.prototype.getBounds = function () { 37 | return { 38 | x: this.x - this.radius, 39 | y: this.y - this.radius, 40 | width: this.radius * 2, 41 | height: this.radius * 2 42 | }; 43 | }; 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch14/classes/segment.js: -------------------------------------------------------------------------------- 1 | function Segment (width, height, color) { 2 | this.x = 0; 3 | this.y = 0; 4 | this.width = width; 5 | this.height = height; 6 | this.vx = 0; 7 | this.vy = 0; 8 | this.rotation = 0; 9 | this.scaleX = 1; 10 | this.scaleY = 1; 11 | this.color = (color === undefined) ? "#ffffff" : utils.parseColor(color); 12 | this.lineWidth = 1; 13 | } 14 | 15 | Segment.prototype.draw = function (context) { 16 | var h = this.height, 17 | d = this.width + h, //top-right diagonal 18 | cr = h / 2; //corner radius 19 | context.save(); 20 | context.translate(this.x, this.y); 21 | context.rotate(this.rotation); 22 | context.scale(this.scaleX, this.scaleY); 23 | context.lineWidth = this.lineWidth; 24 | context.fillStyle = this.color; 25 | context.beginPath(); 26 | context.moveTo(0, -cr); 27 | context.lineTo(d-2*cr, -cr); 28 | context.quadraticCurveTo(-cr+d, -cr, -cr+d, 0); 29 | context.lineTo(-cr+d, h-2*cr); 30 | context.quadraticCurveTo(-cr+d, -cr+h, d-2*cr, -cr+h); 31 | context.lineTo(0, -cr+h); 32 | context.quadraticCurveTo(-cr, -cr+h, -cr, h-2*cr); 33 | context.lineTo(-cr, 0); 34 | context.quadraticCurveTo(-cr, -cr, 0, -cr); 35 | context.closePath(); 36 | context.fill(); 37 | if (this.lineWidth > 0) { 38 | context.stroke(); 39 | } 40 | //draw the 2 "pins" 41 | context.beginPath(); 42 | context.arc(0, 0, 2, 0, (Math.PI * 2), true); 43 | context.closePath(); 44 | context.stroke(); 45 | 46 | context.beginPath(); 47 | context.arc(this.width, 0, 2, 0, (Math.PI * 2), true); 48 | context.closePath(); 49 | context.stroke(); 50 | 51 | context.restore(); 52 | }; 53 | 54 | Segment.prototype.getPin = function () { 55 | return { 56 | x: this.x + Math.cos(this.rotation) * this.width, 57 | y: this.y + Math.sin(this.rotation) * this.width 58 | }; 59 | }; 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/01-perspective-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Perspective 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/02-perspective-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Perspective 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/10-easing-3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Easing 3D 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.mass = 1; 10 | this.rotation = 0; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.color = utils.parseColor(color); 14 | this.lineWidth = 1; 15 | this.visible = true; 16 | } 17 | 18 | Ball.prototype.draw = function (context) { 19 | context.save(); 20 | context.translate(this.x, this.y); 21 | context.rotate(this.rotation); 22 | context.scale(this.scaleX, this.scaleY); 23 | 24 | context.lineWidth = this.lineWidth; 25 | context.fillStyle = this.color; 26 | context.beginPath(); 27 | //x, y, radius, start_angle, end_angle, anti-clockwise 28 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 29 | context.closePath(); 30 | context.fill(); 31 | if (this.lineWidth > 0) { 32 | context.stroke(); 33 | } 34 | context.restore(); 35 | }; 36 | 37 | Ball.prototype.getBounds = function () { 38 | return { 39 | x: this.x - this.radius, 40 | y: this.y - this.radius, 41 | width: this.radius * 2, 42 | height: this.radius * 2 43 | }; 44 | }; 45 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/classes/ball3d.js: -------------------------------------------------------------------------------- 1 | function Ball3d (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.xpos = 0; 7 | this.ypos = 0; 8 | this.zpos = 0; 9 | this.radius = radius; 10 | this.vx = 0; 11 | this.vy = 0; 12 | this.vz = 0; 13 | this.mass = 1; 14 | this.rotation = 0; 15 | this.scaleX = 1; 16 | this.scaleY = 1; 17 | this.color = utils.parseColor(color); 18 | this.lineWidth = 1; 19 | this.visible = true; 20 | } 21 | 22 | Ball3d.prototype.draw = function (context) { 23 | context.save(); 24 | context.translate(this.x, this.y); 25 | context.rotate(this.rotation); 26 | context.scale(this.scaleX, this.scaleY); 27 | 28 | context.lineWidth = this.lineWidth; 29 | context.fillStyle = this.color; 30 | context.beginPath(); 31 | //x, y, radius, start_angle, end_angle, anti-clockwise 32 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 33 | context.closePath(); 34 | context.fill(); 35 | if (this.lineWidth > 0) { 36 | context.stroke(); 37 | } 38 | context.restore(); 39 | }; 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch15/classes/tree.js: -------------------------------------------------------------------------------- 1 | function Tree () { 2 | this.x = 0; 3 | this.y = 0; 4 | this.xpos = 0; 5 | this.ypos = 0; 6 | this.zpos = 0; 7 | this.scaleX = 1; 8 | this.scaleY = 1; 9 | this.color = "#ffffff"; 10 | this.alpha = 1; 11 | this.lineWidth = 1; 12 | this.branch = []; 13 | 14 | //generate some random branch positions 15 | this.branch[0] = -140 - Math.random() * 20; 16 | this.branch[1] = -30 - Math.random() * 30; 17 | this.branch[2] = Math.random() * 80 - 40; 18 | this.branch[3] = -100 - Math.random() * 40; 19 | this.branch[4] = -60 - Math.random() * 40; 20 | this.branch[5] = Math.random() * 60 - 30; 21 | this.branch[6] = -110 - Math.random() * 20; 22 | } 23 | 24 | Tree.prototype.draw = function (context) { 25 | context.save(); 26 | context.translate(this.x, this.y); 27 | context.scale(this.scaleX, this.scaleY); 28 | 29 | context.lineWidth = this.lineWidth; 30 | context.strokeStyle = utils.colorToRGB(this.color, this.alpha); 31 | context.beginPath(); 32 | context.moveTo(0, 0); 33 | context.lineTo(0, this.branch[0]); 34 | context.moveTo(0, this.branch[1]); 35 | context.lineTo(this.branch[2], this.branch[3]); 36 | context.moveTo(0, this.branch[4]); 37 | context.lineTo(this.branch[5], this.branch[6]); 38 | context.stroke(); 39 | context.restore(); 40 | }; 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch16/02-lines-3d-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lines 3D 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch16/03-square-3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Square 3D 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch16/classes/ball3d.js: -------------------------------------------------------------------------------- 1 | function Ball3d (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.xpos = 0; 7 | this.ypos = 0; 8 | this.zpos = 0; 9 | this.radius = radius; 10 | this.vx = 0; 11 | this.vy = 0; 12 | this.vz = 0; 13 | this.mass = 1; 14 | this.rotation = 0; 15 | this.scaleX = 1; 16 | this.scaleY = 1; 17 | this.color = utils.parseColor(color); 18 | this.lineWidth = 1; 19 | this.visible = true; 20 | } 21 | 22 | Ball3d.prototype.draw = function (context) { 23 | context.save(); 24 | context.translate(this.x, this.y); 25 | context.rotate(this.rotation); 26 | context.scale(this.scaleX, this.scaleY); 27 | 28 | context.lineWidth = this.lineWidth; 29 | context.fillStyle = this.color; 30 | context.beginPath(); 31 | //x, y, radius, start_angle, end_angle, anti-clockwise 32 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 33 | context.closePath(); 34 | context.fill(); 35 | if (this.lineWidth > 0) { 36 | context.stroke(); 37 | } 38 | context.restore(); 39 | }; 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch16/classes/point3d.js: -------------------------------------------------------------------------------- 1 | function Point3d (x, y, z) { 2 | this.x = (x === undefined) ? 0 : x; 3 | this.y = (y === undefined) ? 0 : y; 4 | this.z = (z === undefined) ? 0 : z; 5 | this.fl = 250; 6 | this.vpX = 0; 7 | this.vpY = 0; 8 | this.cX = 0; 9 | this.cY = 0; 10 | this.cZ = 0; 11 | } 12 | 13 | Point3d.prototype.setVanishingPoint = function (vpX, vpY) { 14 | this.vpX = vpX; 15 | this.vpY = vpY; 16 | }; 17 | 18 | Point3d.prototype.setCenter = function (cX, cY, cZ) { 19 | this.cX = cX; 20 | this.cY = cY; 21 | this.cZ = cZ; 22 | }; 23 | 24 | Point3d.prototype.rotateX = function (angleX) { 25 | var cosX = Math.cos(angleX), 26 | sinX = Math.sin(angleX), 27 | y1 = this.y * cosX - this.z * sinX, 28 | z1 = this.z * cosX + this.y * sinX; 29 | this.y = y1; 30 | this.z = z1; 31 | }; 32 | 33 | Point3d.prototype.rotateY = function (angleY) { 34 | var cosY = Math.cos(angleY), 35 | sinY = Math.sin(angleY), 36 | x1 = this.x * cosY - this.z * sinY, 37 | z1 = this.z * cosY + this.x * sinY; 38 | this.x = x1; 39 | this.z = z1; 40 | }; 41 | 42 | Point3d.prototype.rotateZ = function (angleZ) { 43 | var cosZ = Math.cos(angleZ), 44 | sinZ = Math.sin(angleZ), 45 | x1 = this.x * cosZ - this.y * sinZ, 46 | y1 = this.y * cosZ + this.x * sinZ; 47 | this.x = x1; 48 | this.y = y1; 49 | }; 50 | 51 | Point3d.prototype.getScreenX = function () { 52 | var scale = this.fl / (this.fl + this.z + this.cZ); 53 | return this.vpX + (this.cX + this.x) * scale; 54 | }; 55 | 56 | Point3d.prototype.getScreenY = function () { 57 | var scale = this.fl / (this.fl + this.z + this.cZ); 58 | return this.vpY + (this.cY + this.y) * scale; 59 | }; 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch16/classes/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle (a, b, c, color) { 2 | this.pointA = a; 3 | this.pointB = b; 4 | this.pointC = c; 5 | this.color = (color === undefined) ? "#ff0000" : utils.parseColor(color); 6 | this.lineWidth = 1; 7 | this.alpha = 0.5; 8 | } 9 | 10 | Triangle.prototype.draw = function (context) { 11 | context.save(); 12 | context.lineWidth = this.lineWidth; 13 | context.fillStyle = context.strokeStyle = utils.colorToRGB(this.color, this.alpha); 14 | context.beginPath(); 15 | context.moveTo(this.pointA.getScreenX(), this.pointA.getScreenY()); 16 | context.lineTo(this.pointB.getScreenX(), this.pointB.getScreenY()); 17 | context.lineTo(this.pointC.getScreenX(), this.pointC.getScreenY()); 18 | context.closePath(); 19 | context.fill(); 20 | if (this.lineWidth > 0) { 21 | context.stroke(); 22 | } 23 | context.restore(); 24 | }; 25 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch17/classes/light.js: -------------------------------------------------------------------------------- 1 | function Light (x, y, z, brightness) { 2 | this.x = (x === undefined) ? -100 : x; 3 | this.y = (y === undefined) ? -100 : y; 4 | this.z = (z === undefined) ? -100 : z; 5 | this.brightness = (brightness === undefined) ? 1 : brightness; 6 | } 7 | 8 | Light.prototype.setBrightness = function (b) { 9 | this.brightness = Math.min(Math.max(b, 0), 1); 10 | }; 11 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch17/classes/point3d.js: -------------------------------------------------------------------------------- 1 | function Point3d (x, y, z) { 2 | this.x = (x === undefined) ? 0 : x; 3 | this.y = (y === undefined) ? 0 : y; 4 | this.z = (z === undefined) ? 0 : z; 5 | this.fl = 250; 6 | this.vpX = 0; 7 | this.vpY = 0; 8 | this.cX = 0; 9 | this.cY = 0; 10 | this.cZ = 0; 11 | } 12 | 13 | Point3d.prototype.setVanishingPoint = function (vpX, vpY) { 14 | this.vpX = vpX; 15 | this.vpY = vpY; 16 | }; 17 | 18 | Point3d.prototype.setCenter = function (cX, cY, cZ) { 19 | this.cX = cX; 20 | this.cY = cY; 21 | this.cZ = cZ; 22 | }; 23 | 24 | Point3d.prototype.rotateX = function (angleX) { 25 | var cosX = Math.cos(angleX), 26 | sinX = Math.sin(angleX), 27 | y1 = this.y * cosX - this.z * sinX, 28 | z1 = this.z * cosX + this.y * sinX; 29 | this.y = y1; 30 | this.z = z1; 31 | }; 32 | 33 | Point3d.prototype.rotateY = function (angleY) { 34 | var cosY = Math.cos(angleY), 35 | sinY = Math.sin(angleY), 36 | x1 = this.x * cosY - this.z * sinY, 37 | z1 = this.z * cosY + this.x * sinY; 38 | this.x = x1; 39 | this.z = z1; 40 | }; 41 | 42 | Point3d.prototype.rotateZ = function (angleZ) { 43 | var cosZ = Math.cos(angleZ), 44 | sinZ = Math.sin(angleZ), 45 | x1 = this.x * cosZ - this.y * sinZ, 46 | y1 = this.y * cosZ + this.x * sinZ; 47 | this.x = x1; 48 | this.y = y1; 49 | }; 50 | 51 | Point3d.prototype.getScreenX = function () { 52 | var scale = this.fl / (this.fl + this.z + this.cZ); 53 | return this.vpX + (this.cX + this.x) * scale; 54 | }; 55 | 56 | Point3d.prototype.getScreenY = function () { 57 | var scale = this.fl / (this.fl + this.z + this.cZ); 58 | return this.vpY + (this.cY + this.y) * scale; 59 | }; 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch17/classes/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle (a, b, c, color) { 2 | this.pointA = a; 3 | this.pointB = b; 4 | this.pointC = c; 5 | this.color = (color === undefined) ? "#ff0000" : utils.parseColor(color); 6 | this.lineWidth = 1; 7 | this.alpha = 1; 8 | } 9 | 10 | Triangle.prototype.draw = function (context) { 11 | if (this.isBackface()) { 12 | return; 13 | } 14 | context.save(); 15 | context.lineWidth = this.lineWidth; 16 | context.fillStyle = context.strokeStyle = utils.colorToRGB(this.color, this.alpha); 17 | context.beginPath(); 18 | context.moveTo(this.pointA.getScreenX(), this.pointA.getScreenY()); 19 | context.lineTo(this.pointB.getScreenX(), this.pointB.getScreenY()); 20 | context.lineTo(this.pointC.getScreenX(), this.pointC.getScreenY()); 21 | context.closePath(); 22 | context.fill(); 23 | if (this.lineWidth > 0) { 24 | context.stroke(); 25 | } 26 | context.restore(); 27 | }; 28 | 29 | Triangle.prototype.getDepth = function () { 30 | return Math.min(this.pointA.z, this.pointB.z, this.pointC.z); 31 | }; 32 | 33 | Triangle.prototype.isBackface = function () { 34 | var cax = this.pointC.getScreenX() - this.pointA.getScreenX(), 35 | cay = this.pointC.getScreenY() - this.pointA.getScreenY(), 36 | bcx = this.pointB.getScreenX() - this.pointC.getScreenX(), 37 | bcy = this.pointB.getScreenY() - this.pointC.getScreenY(); 38 | return cax * bcy > cay * bcx; 39 | }; 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch18/02-matrix-rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Matrix Rotate 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch18/03-skew-x.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Skew X 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch18/04-skew-xy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Skew XY 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch18/classes/ball3d.js: -------------------------------------------------------------------------------- 1 | function Ball3d (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.xpos = 0; 7 | this.ypos = 0; 8 | this.zpos = 0; 9 | this.radius = radius; 10 | this.vx = 0; 11 | this.vy = 0; 12 | this.vz = 0; 13 | this.mass = 1; 14 | this.rotation = 0; 15 | this.scaleX = 1; 16 | this.scaleY = 1; 17 | this.color = utils.parseColor(color); 18 | this.lineWidth = 1; 19 | this.visible = true; 20 | } 21 | 22 | Ball3d.prototype.draw = function (context) { 23 | context.save(); 24 | context.translate(this.x, this.y); 25 | context.rotate(this.rotation); 26 | context.scale(this.scaleX, this.scaleY); 27 | 28 | context.lineWidth = this.lineWidth; 29 | context.fillStyle = this.color; 30 | context.beginPath(); 31 | //x, y, radius, start_angle, end_angle, anti-clockwise 32 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 33 | context.closePath(); 34 | context.fill(); 35 | if (this.lineWidth > 0) { 36 | context.stroke(); 37 | } 38 | context.restore(); 39 | }; 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/01-brownian-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Brownian 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/02-brownian-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Brownian 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/03-random-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/04-random-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 2 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/05-random-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 3 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/06-random-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 4 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/07-random-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 5 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/08-random-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 6 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/09-random-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 7 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/10-random-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random 8 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 17 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/11-timer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Timer 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/12-time-based-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Time Based 1 6 | 7 | 8 | 9 |
10 | Example from Foundation HTML5 Animation with JavaScript 11 |
12 | 13 | 14 | 15 | 16 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/assets/boing.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch19/assets/boing.mp3 -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/assets/boing.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch19/assets/boing.ogg -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/assets/boing.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/ch19/assets/boing.wav -------------------------------------------------------------------------------- /html5-animation-source-code/examples/ch19/classes/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | if (radius === undefined) { radius = 40; } 3 | if (color === undefined) { color = "#ff0000"; } 4 | this.x = 0; 5 | this.y = 0; 6 | this.radius = radius; 7 | this.vx = 0; 8 | this.vy = 0; 9 | this.mass = 1; 10 | this.rotation = 0; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.color = utils.parseColor(color); 14 | this.lineWidth = 1; 15 | this.visible = true; 16 | } 17 | 18 | Ball.prototype.draw = function (context) { 19 | context.save(); 20 | context.translate(this.x, this.y); 21 | context.rotate(this.rotation); 22 | context.scale(this.scaleX, this.scaleY); 23 | 24 | context.lineWidth = this.lineWidth; 25 | context.fillStyle = this.color; 26 | context.beginPath(); 27 | //x, y, radius, start_angle, end_angle, anti-clockwise 28 | context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); 29 | context.closePath(); 30 | context.fill(); 31 | if (this.lineWidth > 0) { 32 | context.stroke(); 33 | } 34 | context.restore(); 35 | }; 36 | 37 | Ball.prototype.getBounds = function () { 38 | return { 39 | x: this.x - this.radius, 40 | y: this.y - this.radius, 41 | width: this.radius * 2, 42 | height: this.radius * 2 43 | }; 44 | }; 45 | -------------------------------------------------------------------------------- /html5-animation-source-code/examples/include/file_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/foundation-html5-animation-w-javascript/8fddff860a9d1175ba95bb6647c11e6e4ff36e40/html5-animation-source-code/examples/include/file_icon.png -------------------------------------------------------------------------------- /html5-animation-source-code/examples/include/style.css: -------------------------------------------------------------------------------- 1 | /* Some HTML5 Tags 2 | */ 3 | 4 | aside, footer, header, nav, section { 5 | display: block; 6 | } 7 | 8 | /* Examples 9 | */ 10 | 11 | body { 12 | background-color: #bbb; 13 | color: #383838; 14 | } 15 | 16 | #canvas { 17 | background-color: #fff; 18 | } 19 | 20 | header { 21 | padding-bottom: 10px; 22 | } 23 | 24 | header a { 25 | color: #30f; 26 | text-decoration: none; 27 | } 28 | 29 | aside { 30 | padding-top: 6px; 31 | } 32 | 33 | /* Index page 34 | */ 35 | 36 | #index-body { 37 | background-color: #9497FF; 38 | font-family: "Vollkorn", serif; 39 | color: #000; 40 | } 41 | 42 | #index-body a { 43 | text-decoration: none; 44 | color: #0C2C9F 45 | } 46 | 47 | #index-body #description, #index-body #exercises { 48 | overflow: auto; 49 | max-width: 750px; 50 | margin: 20px auto 20px auto; 51 | padding-left: 15px; 52 | padding-bottom: 15px; 53 | background-color: #fff; 54 | border-radius: 15px; 55 | } 56 | 57 | #index-body h1 { 58 | color: #b30300; 59 | } 60 | 61 | #index-body h1 a { 62 | text-decoration: underline; 63 | color: #b30300; 64 | } 65 | 66 | #index-body li h2, #index-body li h3, #index-body li h4 { 67 | color: #000; 68 | } 69 | 70 | #index-body li h3 { 71 | margin-bottom: 0px; 72 | } 73 | 74 | #description ul { 75 | margin: 0; 76 | padding: 4px 20px 10px 20px; 77 | } 78 | 79 | #description iframe { 80 | float: right; 81 | margin: 15px 0 15px 15px; 82 | } 83 | 84 | #exercises ol { 85 | margin: 0 20px 10px 0; 86 | padding: 0; 87 | list-style-type: none; 88 | } 89 | 90 | #exercises ol li { 91 | padding-top: 5px; 92 | } 93 | 94 | #exercises ol ol ol { 95 | padding-left: 60px; 96 | list-style-type: decimal-leading-zero; 97 | } 98 | 99 | #exercises ol ol ol li img, #exercises ol ol li img { 100 | margin-left: 4px; 101 | margin-bottom: -10; 102 | } 103 | 104 | #exercises h2 { 105 | margin: 10px 0 0 0; 106 | } 107 | -------------------------------------------------------------------------------- /html5-animation-source-code/xtras/easing-equations/src/linear.js: -------------------------------------------------------------------------------- 1 | easing.linear = { 2 | /** 3 | * Easing equation function for a simple linear tweening, with no easing. 4 | * @param {number} t Current time (in frames or seconds). 5 | * @param {number} b Starting value. 6 | * @param {number} c Change needed in value. 7 | * @param {number} d Expected easing duration (in frames or seconds). 8 | * @return {number} The correct value. 9 | */ 10 | easeNone: function (t, b, c, d) { 11 | return c * t/d + b; 12 | } 13 | }; 14 | 15 | easing.linear.easeIn = easing.linear.easeNone; 16 | easing.linear.easeOut = easing.linear.easeNone; 17 | easing.linear.easeInOut = easing.linear.easeNone; 18 | easing.linear.easeOutIn = easing.linear.easeNone; 19 | --------------------------------------------------------------------------------