HTML and CSS Reference
In-Depth Information
dot.vy += Math.random() * 0.2 - 0.1;
dot.x += dot.vx;
dot.y += dot.vy;
dot.vx *= friction;
dot.vy *= friction;
if (dot.x > canvas.width) {
dot.x = 0;
} else if (dot.x < 0) {
dot.x = canvas.width;
}
if (dot.y > canvas.height) {
dot.y = 0;
} else if (dot.y < 0) {
dot.y = canvas.height;
}
dot.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
dots.forEach(draw);
}());
};
</script>
</body>
</html>
Most of this setup is old news to you, so we put the relevant parts in bold. Figure 19-1 shows how running
this code appears on screen.
