For our first example, we're going to create two simple streaming lines. The result we'll be aiming for is the following (which you can see by opening up the DVD3/src/chapter-06/D06-01.html example):
In this image, we have got two horizontal lines which move from the right of the screen to the left. Whenever you move your mouse, the distance traveled is stored and rendered as two lines. Each point in the graph represents the total distance traveled along the x-axis or the y-axis. The bottom of this graph is a simple axis which shows the current time, and which moves together with the line graph.
To accomplish this graph, we need to take the following steps:
- The first thing we need to do is define the various scales which we can use for rendering the scale at the bottom, and which we use to determine the x and y positions of each graph element.
- When we've got the scales, we...