Semi-Automated SVG Programming via Direct Manipulation Brian Hempel - PowerPoint PPT Presentation

Semi-Automated SVG Programming via Direct Manipulation Brian Hempel and Ravi Chugh

Direct Manipulation 2

Direct Manipulation Drawing Documents And so many more… 3

But not for one application… 4

Programming 5

Programming 5

Programming 5

Program 6

Program 6

Program 6

Refactored Program Program 6

Better for both experts and non-experts Refactored Program Program 6

DM 7

DM + Code 8

Existing Approach: DM + Code 9

Existing Approach: DM + Code Bret Victor, “Drawing Dynamic Visualizations” 10

Existing Approach: DM + Code Bret Victor, “Drawing Dynamic Visualizations” Toby Schachman, “Apparatus” 10

DM + Code 12

Code + DM 12

Our Approach: Code + DM Chugh et al. [PLDI ’16] 14

Our Approach: Code + DM Chugh et al. [PLDI ’16] 15

[PLDI ’16] Code First, Then DM 16

Goal: Less Keyboard, More Mouse. 17

18

Draw 19

Draw Relate 20

Draw Relate Abstract 21

New DM Tools Draw Relate Abstract 22

New DM Tools Draw Relate Abstract 23

New DM Tools Draw Relate Abstract 24

New DM Tools Draw Relate Abstract 25

Draw Relate Abstract 26

Demo Draw Relate Abstract 27

Demo Draw Relate Abstract 28

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 29

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 30

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let rect1 = ... let line2 = ... let line3 = ... 30

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let rect1 = ... let line2 = ... let line3 = ... 30

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 31

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ... 31

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ... 31

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ... 31

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 32

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999 32

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999 32

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999 32

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999 32

Draw Relate Abstract Sketch-n-Sketch Programming in 2015 33

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ 33

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ 34

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ (def polygon7_bot (+ (+ (* 0.5!... (def k3105 (/ (- (+ (- polygon6... (def polygon7_top (- (* 0.5! (+... (def [polygon5_right k3038] [(-... (def k3061 (/ (- (+ polygon5_ri... (def polygon6_bot (- (+ (- poly... (def k3063 (/ (- (+ polygon6_bo... (def polygon5_top (- polygon6_t... (def k3103 (/ (- (+ (- polygon5... (def [k3041 polygon5_bot] [(- p... (def k3134 (/ (- (+ k3041 helpe... (def k3141 (/ (- (+ k3038 helpe... 34

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ Smarter (def polygon7_bot (+ (+ (* 0.5!... (def k3105 (/ (- (+ (- polygon6... (def polygon7_top (- (* 0.5! (+... Algebra (def [polygon5_right k3038] [(-... (def k3061 (/ (- (+ polygon5_ri... (def polygon6_bot (- (+ (- poly... (def k3063 (/ (- (+ polygon6_bo... + (def polygon5_top (- polygon6_t... (def k3103 (/ (- (+ (- polygon5... (def [k3041 polygon5_bot] [(- p... (def k3134 (/ (- (+ k3041 helpe... Helper (def k3141 (/ (- (+ k3038 helpe... Functions 34

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ 35

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ ; Top-Level Defs (def rect1 ...) (def line2 ...) (def line3 ...) ; Main Expression [ rect1 ... ] 35

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ ; Top-Level Defs Refactor (def group1 (def rect1 ...) (def rect1 ...) Programs (def line2 ...) (def line2 ...) (def line3 ...) (def line3 ...) of Arbitrary ; Main Expression Structure [ rect1 ... ] ) [ rect1 ... ] group1 36

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ 37

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ 37

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ ?? ? ? ? ?? ? ? ? 37

Draw Relate Abstract Sketch-n-Sketch Sketch-n-Sketch++ ?? Additional 
 Interaction 
 ? ? to Resolve 
 ? User Intent ?? ? ? ? 37

Program 38

Program 38

Program Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Program General Domain-specific 38

Related Work 39

Related Work DM + Code DDV Apparatus 39

Related Work Programming 
 by Example DM + Code Chimera DDV Metamouse Apparatus Mondrian 39

Related Work Programming 
 by Example DM + Code Domain Apps Chimera DDV Parametric CAD Metamouse Apparatus Procedural modeling Mondrian 39

Related Work Programming 
 by Example DM + Code Domain Apps Chimera DDV Parametric CAD Metamouse Apparatus Procedural modeling Mondrian Constraint Oriented Systems Sketchpad ThingLab Juno-2 39

Related Work Programming 
 by Example DM + Code Domain Apps Chimera DDV Parametric CAD Metamouse Apparatus Procedural modeling Mondrian Constraint Code + DM Oriented Systems Wang et al. Sketchpad Live PBE ThingLab McDirmid’s Demos Juno-2 Sketch-n-Sketch 39

Our Approach Start with general-purpose language add D.M. features. 40

Goal: Less Keyboard, More Mouse. 41

Sketch-n-Sketch https://ravichugh.github.io/sketch-n-sketch Demos on YouTube 42

Sketch-n-Sketch https://ravichugh.github.io/sketch-n-sketch Demos on YouTube Just google “sketch n sketch” 42

Thank you! 43

44

Extra Slides 45

Traces 46

Traces let a = 3 in 46

Traces let a = 3 in let b = 5 in 46

Traces let a = 3 in let b = 5 in a + b 46

Traces let a = 3 in let b = 5 in a + b ⇓ 46

Traces let a = 3 in let b = 5 in a + b ⇓ 8 46

Traces let a = 3 a in let b = 5 in a + b ⇓ 8 47

Traces let a = 3 a in let b = 5 b in a + b ⇓ 8 48

Traces let a = 3 a in let b = 5 b in a + b ⇓ 8 a+b 49