This is a list of updates, corrections, and typos for the book version of Foundation HTML5 Animation with JavaScript. For the latest fixes to any of the book examples, please double-check it against the source code contained within the online code repository.
If you find any more problems, please drop me a message, or submit an issue. Thanks for reading!
Chapter 4 should be titled "Rendering Techniques".
Typo in last paragraph, the sentence should read: There are also event handlers added ...
In example 04-wave-1.html, the drawFrame function should
look like:
ball.x += xspeed;
ball.y = centerY + Math.sin(angle) * range;
angle += yspeed;
ball.draw(context);
The division operation is extraneous to the equation abstraction (submitted by Peter Stema), and the book omits the line where the angle is incremented each frame (submitted by Steve Paget).
In examples 08-circle.html and 09-oval.html, to match
the text above, the sine and cosine functions should be
reversed when calculating the ball's position. (Submitted by
Gerald Cullen)
ball.x = centerX + Math.cos(angle) * radius;
ball.y = centerY + Math.sin(angle) * radius;
Typo in the last sentence, it should read: You should have no trouble creating some beautiful pictures or animations with trigonometry.
In examples 04-multi-curve-1.html and
05-multi-curve-2.html, the code to move to the first point
should read: (Submitted by Gerald Cullen)
context.beginPath();
context.moveTo(points[0].x, points[0].y);
A production error caused an errant graphic to obscure portions of the text. The complete paragraphs are as follows:
... So, given the 45 degrees and the hypotenuse of 1 pixel, you
should be able to use Math.cos and Math.sin to find the
lengths of vx and vy.
The side adjacent to the angle is vx. The cosine of an angle
is the adjacent/hypotenuse. Or, stated another way, the
adjacent side is the cosine of the angle times the
hypotenuse. Similarly, the opposite side is vy. Sine is
opposite/hypotenuse, or the opposite is the sine times
hypotenuse.
Here’s the formula you would use:
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;
Now don’t you dare forget to convert the 45 degrees to radians before passing it into the Math functions! This is what the code looks like after we plug in example values: ...
In the paragraph following the example, the third sentence
should read: If speed is greater than friction,
subtract; otherwise, speed equals zero. (Submitted by
Gerald Cullen)
In an updated Editor's Draft of the W3C Animation-Timing
specification, window.cancelRequestAnimationFrame has been renamed to window.cancelAnimationFrame. (Submitted by Paul Irish)
Exercise 03-easing-off.html has been updated to use this name:
window.cancelAnimationFrame(animRequest);
The cross-browser test for the cancelAnimationFrame
function definition has been updated in utils.js to reflect its name change:
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
window.clearTimeout);
}
In the drawFrame function, the following lines should be
highlighted since they are new for this example:
springTo(ball0, ball2);
...
springTo(ball1, ball2);
...
context.lineTo(ball0.x, ball0.y);
The last sentence in the first paragraph should read: ... the overall velocity to look like something Figure 11-7.
The beginning of the third paragraph should read: Because
you use ball0 as ...
In the second bullet point, there is an extraneous full stop after the word versus.
Typo in the last paragraph, the sentence should be: Rename the original slider ...
Exercise 14-time-based-3.html exhibits a bug when a user
switches to a new browser tab, then, after a few seconds,
switches back to the tab running the example. (Submitted by
Paul Irish)
The current frame uses the time stored by the previous frame
to calculate the elapsed time. Since switching browser tabs
increases this value by many times, the calculation for
vertical velocity results in excessive motion. One fix is to
establish a range for the elapsed value before applying
the gravity multiplier. The typical framerate is about 17
milliseconds.
elapsed = Math.min(20, Math.max(-20, elapsed));
vy += gravity * elapsed / 1000;
Due to a printing error during production, there are a number of missing minus signs within source code entries throughout the book. If the code doesn't seem to run in your browser, make sure to double-check it against the examples in this online repository. I apologize for the frustrating experience and want to thank everyone who has submitted (or will submit!) errata to clean this up. Special thanks to Gerald Cullen and Garrett Rodriguez for finding these little buggers.
vx = Math.random() * 10 - 5,
In the trackVelocity function:
vx = ball.x - oldX;
vy = ball.y - oldY;
vx = Math.random() * 10 - 5,
x2 = x1 * cos - y1 * sin,
//get position of ball, relative to line
var x1 = ball.x - line.x,
y1 = ball.y - line.y,
//rotate coordinates
...
y2 = y1 * cos - x1 * sin,
if (ball.x + ball.radius > bounds.x && ball.x - ball.radius < bounds.x + bounds.width) {
//all the rest of the code that was in this function
}
The formula should read:
(m0 - m1) × v0 + 2 × m1 × v1
v0Final = ----------------------------
m0 + m1
(m1 - m0) × v1 + 2 × m0 × v0
v1Final = ----------------------------
m0 + m1
In the code example:
var dist = ball1.x - ball0.x;
And the formula below should read:
(m0 - m1) × v0 + 2 × m1 × v1
v0Final = ----------------------------
m0 + m1
The formula should read:
(m1 - m0) × v1 + 2 × m0 × v0
v1Final = ----------------------------
m0 + m1
In the drawFrame function:
var dist = ball1.x - ball0.x;
var dist = ball1.x - ball0.x;
ball0.x = canvas.width - 200;
ball0.y = canvas.height - 200;
ball0.vx = Math.random() * 10 - 5;
ball0.vy = Math.random() * 10 - 5;
...
ball1.vx = Math.random() * 10 - 5;
ball1.vy = Math.random() * 10 - 5;
In the checkWalls function:
ball.x = canvas.width - ball.radius;
...
ball.y = canvas.height - ball.radius;
In the checkCollision function:
var dx = ball1.x - ball0.x,
dy = ball1.y - ball0.y,
var vxTotal = ball0.vx - ball1.vx;
var vxTotal = vx0 - vx1;
ball.vx = Math.random() * 10 - 5;
ball.vy = Math.random() * 10 - 5;
In the gravitate function:
var dx = partB.x - partA.x,
dy = partB.y - partA.y,
In the spring function:
var dx = partB.x - partA.x,
dy = partB.y - partA.y,
particle.vx = Math.random() * 6 - 3;
particle.vy = Math.random() * 6 - 3;
In the Slider.prototype.updateValue function:
handleRange = this.height - this.handleHeight,
valueRange = this.max - this.min;
And in the Slider.prototype.updatePosition function:
var handleRange = this.height - this.handleHeight,
valueRange = this.max - this.min;
In the onMouseMove function:
var pos_y = mouse.y - self.y;
self.handleY = Math.min(self.height - self.handleHeight, Math.max(pos_y, 0));
In the walk function:
segB.vx = segB.getPin().x - foot.x;
segB.vy = segB.getPin().y - foot.y;
In the checkFloor function:
var dy = yMax - canvas.height;