Quickly Visualizing Mouse Movement Distance in Excel

In my last post I talked about using Excel to visualize debug output. As another example, here's a short program for tracking the distance that the mouse has traveled.

You can get this running simply by copying the Actionscript below into the first keyframe of a new Flash movie. Run it and then copy the trace output into Excel and draw the chart.

import flash.events.MouseEvent;
import flash.geom.Point;
 
/** the position of the previous mouse move event */
var prevMousePosition:Point;
 
/** the total distance the mouse has moved */
var totalDistance:Number = 0;
 
trace("distance");
 
function mouseMoveHandler(evt:MouseEvent):void
{
	if (prevMousePosition)
	{
		var dx:Number = evt.stageX - prevMousePosition.x;
		var dy:Number = evt.stageY - prevMousePosition.y;
		trace(totalDistance);
		totalDistance += Math.sqrt(dx * dx   +   dy * dy);
		trace(totalDistance);
	}
	prevMousePosition = new Point(evt.stageX, evt.stageY);
}
 
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

Note that this program writes output at irregular intervals, that is, only when the mouse moves. If you copy the distance values into Excel and graph it, you won't be able to see the periods where the mouse wasn't moving at all. What should be a flat line indicating no change in distance gets compressed into a single point.

This is bad. The data you see in the graph is poorly presented: it looks like time is constant along the x-axis when it's actually chopped up, depending on when the mouse was moving.

So how do we fix this?

To get time flowing constantly on the x-axis, I've setup the following version to print out a timestamp with each value. We can then use these to even out the time scale.

import flash.events.MouseEvent;
import flash.geom.Point;
 
/** the position of the previous mouse move event */
var prevMousePosition:Point;
 
/** the total distance the mouse has moved */
var totalDistance:Number = 0;
 
trace("time\tdistance");
 
function mouseMoveHandler(evt:MouseEvent):void
{
	if (prevMousePosition)
	{
		var dx:Number = evt.stageX - prevMousePosition.x;
		var dy:Number = evt.stageY - prevMousePosition.y;
		trace(getTimer() + "\t" + totalDistance);
		totalDistance += Math.sqrt(dx * dx   +   dy * dy);
		trace(getTimer() + "\t" + totalDistance);
	}
	prevMousePosition = new Point(evt.stageX, evt.stageY);
}
 
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

Only three lines have changed. The column label trace statement and the value trace statements.

When you try to create a line graph of the output in Excel, it wants to create a different series for the time column. In step 2 of the Chart Wizard, click the "Series" tab and remove the "time" series. Now for the value of the "Category (X) axis labels" field, select all the values in the first column, not including the column label. If there are 500 values, the resulting "Category (X) axis labels" value should look like this:

=Sheet1!$A$2:$A$501

Now in step 3, go to the "Axes" tab and for the "Category (X) axis" choose Time-scale. This will make the time values increase consistently along the x-axis.

Hit finish and you've got a graph of the output!