The “C++ Visualizer”

21Jun15

Today I pushed some code that I used last semester for C++ visualization to github. The bad news is that it’s smoke and mirrors, but the good news is that it did the trick: it helped to convey important ideas about flow control and programming semantics to my students.

This is based off of the Python visualizer at http://pythontutor.com by Philip Guo. His visualizer takes an arbitrary Python program as input, and then creates an animated HTML illustration showing which lines of code are executed in what order, and also showing the values of the variables as they change. Eric Grimson had an antique visualizer running at MIT when I was a TA for their course 6.001, but the great and novel aspects of Philip’s one are that it was freely available online, could be embedded in other web pages, had a much nicer interface and output, and used a language that has fewer scary parentheses (and is for this reason more widely taught).

A couple of years ago, I scavenged the frontend of that visualizer and wrote a Java backend for it, creating the Java visualizer. This was very helpful during my stint at Princeton, where the introductory programming course I taught used Java.

Flash-forward to the most recent academic year, teaching C++ at the University of Southern California. I was very used to having a visualizer to show new concepts like for loops, function calls, object-oriented programming and recursion… I’d used it both in Python for CS Circles and for the Java course. The bad news is that the implementations in Python and Java are heavily dependent on modern features, such as a debugging API and reflection, which C++ doesn’t readily offer.

So here’s the “good enough” solution: write programs that are actually Java, but ‘skinned’ to look like C++.

Click on this link to see an example.

The actual code being run by the visualizer is the following:

public class C { public static void main(String[] args) { //><int main() {
 int x = 2;
 int y = 2;
 System.out.println(x+y);//>< cout << x+y << endl;
}} //><}

So it’s Java code, but the parts before //>< are being selectively hidden, so it looks like C++. More examples are available in the course notes.

The biggest disadvantage of this approach is that students can’t enter their own C++ code for visualization, which is a huge tool for learning (and debugging!) when available. But, it’s definitely better than nothing, and it saved me dozens of hours compared to creating PowerPoint animations for every single new control flow topic.

There is some hope that a real C++ visualizer could come about. At least two people have told me they have students working on it, both using text piping to GDB as a means to accomplish it. I think there’s some hope that LLDB’s debugging API could be used; or alternatively by using the same technology as valgrind. Until then, you can read about the fake C++ visualizer in all its glory here.



No Responses Yet to “The “C++ Visualizer””

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: