HTML and CSS Reference
In-Depth Information
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="arrow.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
arrow = new Arrow(),
vr = 2; //degrees
arrow.x = canvas.width / 2;
arrow.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
arrow.rotation += vr * Math.PI / 180; //to radians
arrow.draw(context);
}());
};
</script>
</body>
</html>
In terms of velocity here, the speed is 2 and the direction is clockwise. We might even get away with that
definition, because there's still some motion going on. When we start using terms like “alpha velocity” (how
fast something is fading in or out), it starts confusing people. Still, it is useful to think of such properties in
these same terms. We want to change the alpha at a certain rate by adding or subtracting to its value on
each frame. As we often find ourselves changing several properties over time, each at certain rates, it's
nice to relate them all by calling them velocities. Thus, we might wind up with something like this:
arrow.x += vx;
arrow.y += vy;
arrow.alpha += vAlpha;
arrow.rotation += vr;
arrow.scaleX = arrow.scaleY += vScale;
// etc.
You see a lot of examples like this later in the topic, so please forgive the occasional v.
That about does it for velocity and its “cousins.” Now, let's move on to acceleration.
Acceleration
It's common to think of
acceleration
as speeding up and deceleration as slowing down. And although this
is not incorrect, for this topic, we use a slightly more technical definition for acceleration.
