Pencil Code Project Ideas

Project: Visual Debugger for Pencil Code

The idea of this project is to create a visual debugger for beginners.

The goal is to give students a "youtube-style" scrubber that lets them examine a trace of their program and run it forward an backward after they finished running the program.

We should provide visualizations of the turtle animation at each step as well as the line-number being run and possibly variable, data structure, and DOM state. Ideally, we would eventually build a visualization that lets students interact with the drawing surface geometrically to and understand the progression of the program over time.


The inspiration of this project is several trace-oriented debuggers that have been created in recent years.

Phillip Guo's Python Tutor is a brilliant online data structure visualization that serves college-level data structure students very well. We are looking to create a similarly useful tool for beginners.

Brett Victor's Learnable Programming essay and demos set out a vision for highly visual and interactive debugging tools. Here is an inspiring talk that he has given a few times:

Theseus is a debugger that traces Javascript executions to provide instant visualizations of line executions after they have run.

Pencil Code has a rudimentary visual debugger that allows students (using Chrome) to mouseover line numbers after a program has run, to see "where the turtle was" at that point.

The Project

This is potentally a big project, so we are assembling a team to tackle it.

You would work with a small team of several people to create high-speed instrumentation and interactive visualizations for a visual debugger. Here are the steps of the project:

  1. Create an instrumented Coffeescript compiler that traces individual lines of execution. This is the suggested pre-project.
  2. Modify the turtle library used by beginners to track turtle positions and animations as part of the execution trace. This is already done for the (current legacy) debugger, and would be revised for the new approach.
  3. Experiment with tracing local variable names and values and stackframes as part of the trace.
  4. Work with a team to create and experiment with visualizations of the trace. In particular, we should provide a basic youtube-scrubber-style slider that lets beginners "run their program forward and backward".
  5. Integrate the UI into Pencil Code, and test it on real students!

If this project interests you, take a crack at the pre-project as part of your project proposal.