Online Python Tutor: Learn programming by visualizing code execution | Hacker News Reader

Online Python Tutor: Learn programming by visualizing code execution

pythontutor.com

325 pointsColinWright41 comments

Oh wow, woke up this morning to some great emails. Thanks, everyone!

Here is some context behind the current incarnation of Online Python Tutor:

https://plus.google.com/+ResearchatGoogle/posts/cseo9qi7LWq

Un-fucking-believable!

This is exactly what I needed to help people visualize their code. I can't tell you how many beginners have a hard time figuring out how a program steps through their code and this is a huge win there.

Huge thanks!

Looks good.

However, my big criticism of these sorts of visualisations is they seem to be entirely geared towards imperative programming. Has anyone seen similar visualisations for more functionally structured code?

Oh, I see you can write your own code to be visualised. Here's a simple list comprehension: http://pythontutor.com/visualize.html#code=myList+%3D+range(...

Not the most enlightening visual.

Generators are similarly confusing to visualize... http://pythontutor.com/visualize.html#code=def+fib(n)%3A%0A+...

It does look a bit confusing, but it does step through the program in the order it executes. Unlike list comprehension, where it completely misses some instructions.

Checkout DrRacket's debugger. Obviously not as well documented as this, but amazingly insightful.

The inherent limitation here is that Online Python Tutor is built upon a line-oriented single-step debugger (Python's bdb module), so there's no way for it to step inside of subexpressions (e.g., in your list comprehension example).

I still believe that imperative is the best paradigm to start programming. I.e. once you understand all the subtleties of for/while and branching, you can undertand a list comprehension as an abstraction on top of that, applicable for certain situations. In that light I think OP's tool is exactly what one needs to get going.

A similar approach for those mounting towards FP would be certainly nice though, but it would have a completely different target demographic. Also it seems to me that languages like Haskell and F# are better for just learning FP.

Just 5 days ago HN was all so negative about Bret Victor's visions[1] of how programming should be taught. And yet here we are, looking at a working example of one of the ideas he wrote about.

[1] - http://news.ycombinator.com/item?id=4577133

Bret has certainly been an inspiration to lots of us who work in this field, but I still don't think this is an implementation of his vision. To truly implement his vision, someone would need to design a new programming language and environment.

My motivation has been to ease the learning path for an existing popular language (Python).

I have been thinking of such a language for several years. Now that life programming environments are getting traction, I might be able to bootstrap the process and program my ideated language on top of one of them.

See this 2003 PhD thesis at MIT for two examples of existing languages designed to take full advantage of live programming environments. (Flogo I -graphical- and Flogo II -textual): http://llk.media.mit.edu/papers/ch-phd.pdf Particularly interesting is Flogo II capability to mix the imperative and functional-reactive programming paradigms in the same code block, as parallel runtime processes; I hadn't seen that before.

Christopher Hancock's thesis is pretty good; flogo II plays around with this feature called "live text" where it embeds code exucution visualizations directly in the text of the code. I still haven't seen anyone pull that off again.

To clarify: I didn't mean that it was whole his vision, nor did I thought you was inspired by his recent text (someone mentioned in the other thread that your tool is around for months). But this is a living example of one of the ideas he discussed in his last essay (even if this example is independent of and older than the essay itself).

1006 points? Negative? Most of the comments are actually positive

Former discussion: http://news.ycombinator.com/item?id=3609263

I saw it some months ago (1) but it didn't get much traction. And I failed to upvote it, shame on me. This is really good work.

(1) http://news.ycombinator.com/item?id=3759858

This would have been really useful when I was learning Python on Udacity and was confused by the behavior of = and += on lists and tuples.

This should definitely be integrated into Udacity and other learning platforms! Most instructors have to do this by hand in CS 101 lectures anyways.

Too bad it stops at 300 steps, I would have loved to use it for my hand-ins at the university - still, pretty cool! I checked how it looked with MergeSort and it was pretty awesome, even though it didn't get far with 300 steps.

Hey guys, Isn't this the same as a debugger. Can people not learn from that?

Installing PyDev in Eclipse is a few big hoops for a beginner to jump through. The Web version Just Works with a browser.

Even now, after almost 10 years of programming, I still wish my debuggers had arrows pointing to data structures in a nice GUI. Sometimes, you don't want to interrupt your train of thought to recall the gdb or pdb command you need, or to remember "was 0xAE32F542 the first node in the list or the second node?" And consider the WebKit debugger for Javascript: just by looking at the Scope Variables tag, it's not obvious to catch a bug where you did `x = y` rather than `x = deepClone(y)`.

TL;DR I wish this was the same as a debugger, because then debuggers would be awesome.

Not quite. The visualizations are great, but the ability to rewind and replay time is the critical piece here. How many times have you had to stop and restart debugging because you missed something critical?

Philip, this is fantastic stuff. How have I not heard of your project before? Have I not been paying attention, or have you not shown it here before?

I don't think Philip has posted this project on here before. His user name is: http://news.ycombinator.com/user?id=pgbovine

Another project he worked on that you may have seen on HN is the PhD Grind book (about getting a CS PhD from Stanford).

Oh, I know. He's been a regular here for a while. Which is why I was surprised I did not know about one of his projects.

I've never actually posted any of my projects in the past. Every so often I wake up to an inbox flurry and then check HN :)

I'm sold. Great work! I advocate learning to program to non-programmers all the time (and typically suggest Python), but visualizing flow is hard to teach succinctly with words. I really think this type of visualization with accompanied explanation, where needed, will help quite a bit. Heck, I may use it for debugging at times in the future.

A big plus for most people out there. I'm a visual learner myself. I've always had trouble in the early stages of learning because I didn't really realize I was a visual learner until later on. Also, college professors didn't give simple tips like you should draw out diagrams of what's happening in the code because that helped me out a lot.

this is awesome, learning from visualizing how the code is executed IMO is a great way to learn to code. To add to that, its teaching python which I believe is already very easy to read and learn, brilliant. If this doesn't make it easy for young students learn programming for the first time then I don't know what will ! great job !

It's not exactly Python (or I'm doing something wrong). Which is very confusing / "dangerous" for people learning Python (They will learn it wrong and not have the xp/confidence to question tutor)

locals() and globals() are undefined.

Still crazy slick (if it were the early 90's I'd say "l33t") bit of coding.

If you're learning Python and are using locals() and globals() as anything more than a debugging tool... I'd venture to say you are doing something wrong ;)

In seriousness, any programmer will need to know that functions don't just magically appear... if they don't work, they'll need to know how to pull in some sort of library, or realize why those functions just don't make sense for the current environment (one could explain to a complete novice why it would be a security breach to allow I/O functions, for instance). Python is a language, not a standard library, just as C is C even if you don't #include <stdlib.h>.

http://ec2-107-21-160-68.compute-1.amazonaws.com/crs-ltp/tut... I think the tool of the course in coursera.org is the same.

I used to browse this tutor on MIT earlier.. http://people.csail.mit.edu/pgbovine/python/tutor.html

Is there a self-hosted option for this? I think this would be an excellent resource for my students, but I'm having trouble getting my examples to run. (memory overload?)

Looks like the source is on GitHub: https://github.com/pgbovine/OnlinePythonTutor

Please email me examples that fail to run. It might be memory overload, or just other weird server crashes. (My alert dialog message isn't particularly informative.)

Online Python Tutor isn't meant for running large examples. Think of it as a "digital whiteboard"; I don't think anyone would expect to visualize a 100,000-step program with tons of pointers on a whiteboard :)

Why would they simulate a linked list using tuples? It seems a bit contrived (or rather, not Pythonic) when lists are a built-in datatype.

A quick way to emulate cons cells[1], which are good for explaining how linked lists work?

[1] - http://en.wikipedia.org/wiki/Cons

Yep, right on! I wanted to show off linked list recursion and render box-and-pointer diagrams like those seen in SICP.

This is really awesome. I am trying to teach my kids Python and this will be very helpful.

Oh man! This is useful. Thanks.

Reply on news.ycombinator.com