MIT Battlecode!

Two Sigma has been a sponsor of MIT Battlecode for six years now. It's a programming tournament where teams of kids spend a month coding a virtual robot army to battle against other students' virtual robot armies.

Here's what a match looks like:

There's a lot going on in a battle, and it can be confusing. So today my colleague Lee Lin and I coded up some analysis to help us understand what's going on during a match. The x-axis is location on the battlefield -- the left side is one team's home base and the right side is the other team's. The y-axis is the amount of fighting force each team has at that location. We've taken the 2-D battlefield and projected it onto the axis running between the two bases.

The Battlecode code is all java so we started the analysis there. The AffineTransform class came in handy for the projection math. The java code dumped its frame-by-frame data in as valid JavaScript code. The visualization is a Highcharts chart being manipulated by JavaScript code on a simple timer.

The core of the updating code is offensively simple:

function updateData() {
  for (i=0; i<2; i++) {
    chart.series[i == 0 ? 1 : 0].setData(thedata[roundNum][i]);
  }
  if (roundNum < thedata.length-1) {
    roundNum++;
  }
  setTimeout(updateData, 15);
}

The chart is in an object called "chart". The data for the entire match is in a two-dimensional array called "thedata". The function "updateData()" gets called every 15 milliseconds -- we'd like a framerate of 60fps if possible. At the end of updateData() we call setTimeout() which asks JavaScript to call updateData() again in 15 millis.