Sketch-n-Sketch: Output-Directed Programming for SVG
summary
Sketch-n-Sketch extends output-directed programming for SVG by forbidding text edits and letting direct manipulation produce and edit real program constructs: point, offset, list and call widgets expose intermediate execution products so users click or drag to insert shared variables, offsets and polygons. The system supports generic refactorings from the output (rename, extract-method, add/remove arguments) driven by a domain-agnostic provenance trace. The authors build a dozen parametric designs (including the first recursive function built via direct manipulation), complete 4 benchmark tasks fully and mostly finish 2 more.
AI-written summary · about
chapters (11)
- 0:00Introduction to manipulation
- 0:28Output directed programming
- 1:12Prior work and objectives
- 1:50The sketch-and-sketch editor
- 3:03Insights for better tools
- 4:53Creating a parametric design
- 6:22Implementing the design
- 9:20Function abstraction and editing
- 12:52Summary of capabilities
- 13:50Limitations and future work
- 15:13Q&A and conclusion
related talks
40mSketch-n-Sketch: Interactive SVG Programming with Direct Manipulation
14mInkling: Sketching Dynamic Systems
41mNightgraph: Putting Code to Paper with Rust
38mApparatus: A Hybrid Graphics Editor / Programming Environment
26mExtending Manual Drawing Practices with Artist-Centric Programming Tools
39mGenerative Machines
22mDreamSketch: Early Stage 3D Design Explorations with Sketching and Generative Design
11mSubsequently: Telling stories with pictures makes programs