PB Projection Boxes

Try Projection Boxes!!! (opens in new tab)

Note: the above link does not work in Safari and works best in Chrome. It also takes some time to load, not because of projection boxes, but because of the Python execution environment (Pyodide).

Live programming is a regime in which the programming environment provides continual feedback, most often in the form of runtime values. In this project, we explore Projection Boxes, a novel visualization technique for displaying runtime values of programs. The key idea behind projection boxes is to start with a full semantics of the program, and then use projections to pick a subset of the semantics to display. By varying the projection used, projection boxes can encode both previously known visualization techniques, and also new ones. As such, projection boxes provide an expressive and configurable framework for displaying runtime information.

Our first work in this space explored projection boxes and how users interact with this new UI. Through a user study we demonstrated that (1) users find projection boxes and their configurability useful (2) users are not distracted by the always-on visualization (3) a key driving force behind the need for a configurable visualization for live programming lies with the wide variation in programmer preferences.


Projection Boxes: On-the-fly Reconfigurable Visualization for Live Programming (CHI 2020)


Focused Live Programming with Loop Seeds

While using projection boxes, we discovered that in some situations test cases are insufficient for good live data, in that there are no test inputs that can drive certain incomplete loops to produce useful data. We call this problem the loop-datavoid problem. The problem stems from the fact that useful data inside the loop might only be produced after the loop has been fully written. To solve this problem, we propose a paradigm called Focused Live Programming with Loop Seeds, in which the programmer provides hypothetical values to start a loop iteration, and then the programming environment focuses the live visualization on this hypothetical loop iteration.


Focused Live Programming with Loop Seeds (UIST 2020)



We have also explored how to combine Live Programming with Synthesis. Program synthesis is a technique that can generate programs or program snippets from examples. Previous approaches that combine the two have taken a holistic approach to the way examples describe the behavior of functions and programs. In our work we present a new programming paradigm called Small-Step Live Programming by Example that lets the user apply Programming by Example locally. When using Small-Step Live Programming by Example, programmers can change the runtime values displayed by the live visualization to generate local program snippets. We implemented this appraoches in a tool called SnipPy built on top of Projection Boxes.

Try Snippy! (opens in new tab) Go to Snippy Web site


Small-Step Live Programming by Example (UIST 2020)


[Short Video]

[Long Video]

Artifacts (Code, etc)

Comming soon.