HTML and CSS Reference
In-Depth Information
ball.vy *= bounce;
} else if (ball.y - ball.radius < 0) {
ball.y = ball.radius;
ball.vy *= bounce;
}
lines.forEach(drawLine);
ball.draw(context);
}());
};
</script>
</body>
</html>
This example contains a lot of code, but it's all stuff you should recognize by now. Complex programs are
not necessarily composed of complex pieces—they are frequently built from smaller pieces, and put
together in just right way. In this case, the body of the
checkLine
function is identical to what was in
drawFrame
in the previous example, it's just being called five times each frame.
Important formulas in this chapter
Here's a reminder of the two main formulas introduced in this chapter.
Coordinate rotation
x1 = x * Math.cos(rotation) - y * Math.sin(rotation);
y1 = y * Math.cos(rotation) + x * Math.sin(rotation);
Reverse coordinate rotation
x1 = x * Math.cos(rotation) + y * Math.sin(rotation);
y1 = y * Math.cos(rotation) - x * Math.sin(rotation);
Summary
As you've seen in this chapter, coordinate rotation can give you some very complex behavior, but it all
boils down to a couple of equations that never change. Once you're comfortable with the formulas, you
can use them anywhere. I hope you're starting to see how you can create very complicated and richly
realistic motion just by adding in more simple techniques.
You'll be using the coordinate rotation formula quite a bit in the next chapter, where you'll learn how to
handle the results of collisions of objects with different velocities and masses.
