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.

Background

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.

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:

Create an instrumented Coffeescript compiler
that traces individual lines of execution.
This is the suggested pre-project.

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.

Experiment with tracing local variable names and
values and stackframes as part of the trace.

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".

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.