Sketch-n-Sketch: Output-Directed Programming for SVG

For creative tasks, programmers face a choice: Use a GUI and sacrifice flexibility, or write code and sacrifice ergonomics? To obtain both flexibility and ease of use, prior work on a system called Sketch-n-Sketch proposed a workflow that we call output-directed programming, in which direct manipulation of the program's graphical output corresponds to writing code in a general-purpose programming language, and where edits not possible with the mouse can still be affected through ordinary text edits to the program. Sketch-n-Sketch demonstrated that output-directed programming is feasible in the domain of vector graphics: some parametric designs can be created entirely by output-directed interactions, without any textual programming. In this paper, we propose that output-directed programming be viewed not just as manipulation of output alone, but as actions taken with respect to the entire program execution history. Within this new conceptual framework, we explore a variety of novel techniques that extend the expressive power of output-directed programming in Sketch-n-Sketch. We relax syntactic restrictions, expose intermediate execution states for manipulation, and add new program transformations for SVG tasks. To demonstrate the improved expressiveness, we implement a dozen new parametric designs (without text-based edits), including the first demonstration of recursion in an output-directed programming setting.