Viz Mode Tutorial

CodeSkulptor

Viz mode in CodeSkulptor

One powerful technique for understanding the behavior of simple Python programs is to visualize the step-by-step execution of these programs. Viz mode is a new feature in CodeSkulptor that provides an interactive approach to visualizing the execution of Python programs. Viz mode supports the same basic functionality found in the popular tool Online Python Tutor. Due to its software architecture, Viz mode has several capabilities that are not found in Online Python Tutor:

  • Visualize the execution of Python programs who size is on the order of hundreds of lines,
  • Set breakpoints in your program and jump between these breakpoints (both forwards and backwards).
  • Control the order and rate at which events are triggered in an event-driven program,
  • Run entirely within the browser without the need for communication with a server.

To load an existing program into Viz mode, create or load the program at www.codeskulptor.org. Then click the "Viz mode" button on the upper right of the window. This action will save your file and open a new tab with your saved program loaded in www.codeskulptor.org/viz. Since saving to the cloud is not allowed in Viz mode, you may copy any changes that you make to your program by selecting (ctrl+a) and copying (ctrl+c) the revised code, and then pasting (ctrl+v) this code back into the original tab.

The following tutorials below are designed to familiarize you with the basic capabilities of Viz mode. We suggest that you briefly walk through them and then experiment with programs of your own creation.


Visualizing the execution of standard programs

  • The layout of the Viz mode user interface
  • Navigating the trace of a simple program
  • Visualizing the state of a simple program
  • Visualizing function evaluation via frames
  • Visualizing lists via reference diagrams
  • Visualizing classes and objects
Visualizing the execution of event-driven programs
  • Firing button/input events and the event log
  • Firing draw/timer events
  • Firing mouse/keyboard events

The Viz mode tutorial was built by Joe Warren.