Use Excel to Quickly Visualize Debug Output

Most, if not all programmers make use of trace, echo, or System.out.println statements to find out what's going on with their code. It's not as tidy as using a logging API but it's quick and does the job.

Sometimes, though, you need more than just text output to see what's going on. For example, you might want to observe the velocity of a braking car in a video game or a falling ball in a physics simulation.

Example: Simple Ball Physics in Flash

In the Flash movie above, you set the initial velocity of the ball and the acceleration which affects it during each step of the animation. The box on the left outputs the position of the ball at the end of each step for 30 steps.

Go ahead and hit "Start" if you haven't already. You'll see the ball do it's little animation and a bunch of numbers appear in the text area.

Now that you've got some output, select everything in the text area including the column headers and put it on the clipboard. Then, fire up Excel or any other spreadsheet app with graphing capabilities and paste the data. You should get two columns and thirty rows of data.

In Excel, just highlight the data, click the chart wizard button (or Insert > Chart...). In the wizard, select line graph and just hit "Finish."

Voila!

A graph of the ball's position over time

Now you have a graph of your debug output complete with a little legend. Looking at the graph you can see that the x-coordinate of the ball is increasing steadily because it has a non-zero initial velocity and no x-acceleration. The ball's y-coordinate is a bit more interesting since it has a negative velocity and positive acceleration.

Using this in Your Project

When you're putting this to work, you don't need to go through all the hassle of creating a text area like I did. Just make sure your debug output is clean and trace, echo, or System.out.println a bunch of values. And be sure to separate values in a row using tabs because with spaces, all your values will end up in the same cell.

Position isn't the only thing you can view this way. In fact, position is a terrible example because you can already see it right in the Flash movie. However, if you want to observe something more complex such as the total or average velocity of a bunch of objects in a physics simulation this would be a quick way to do it.

So next time you want to create a quick graph that doesn't need to look pretty, fire up Excel and in a matter of seconds you're laughing.

Comments

Curtis Yacboski says, "Yo.."
Curtis Yacboski's picture

Hey awesome tutorial! Keep more coming..... ;)

daniel says, "Thanks man!"
daniel's picture

Hey Curtis,
Glad you enjoyed this little tut. Definitely more to come...
D

Post new comment

The content of this field is kept private and will not be shown publicly.
If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

About

Daniel McLaren

Daniel is a Flash and Flex developer specializing in the art of information visualization.

Latest from SketchyD

Latest Drawing from SketchyD

This is the most recent drawing from my mobile sketch blog, SketchyD.com.

Recent comments