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.
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:
If this project interests you, take a crack at the pre-project as part of your project proposal.