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

▶
semi automated svg programming via direct manipulation
SMART_READER_LITE
LIVE PREVIEW

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

Feb 24, 2023 286 likes •1.2k views

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

slide-1
SLIDE 1

Semi-Automated SVG Programming via Direct Manipulation

Brian Hempel and Ravi Chugh

slide-2
SLIDE 2

Direct Manipulation

2

slide-3
SLIDE 3

Direct Manipulation

Drawing Documents

And so many more…

3

slide-4
SLIDE 4

But not for one application…

4

slide-5
SLIDE 5

Programming

5

slide-6
SLIDE 6

Programming

5

slide-7
SLIDE 7

Programming

5

slide-8
SLIDE 8

6

Program

slide-9
SLIDE 9

6

Program

slide-10
SLIDE 10

6

Program

slide-11
SLIDE 11

6

Program Refactored Program

slide-12
SLIDE 12

6

Program Refactored Program

Better for both experts and non-experts

slide-13
SLIDE 13

7

DM

slide-14
SLIDE 14

8

DM + Code

slide-15
SLIDE 15

9

Existing Approach: DM + Code

slide-16
SLIDE 16

10

Bret Victor, “Drawing Dynamic Visualizations”

Existing Approach: DM + Code

slide-17
SLIDE 17

10

Bret Victor, “Drawing Dynamic Visualizations”

Existing Approach:

Toby Schachman, “Apparatus”

DM + Code

slide-18
SLIDE 18

12

+ Code DM

slide-19
SLIDE 19

12

+ Code DM

slide-20
SLIDE 20

Our Approach: Code + DM

14

Chugh et al. [PLDI ’16]

slide-21
SLIDE 21

Our Approach: Code + DM

15

Chugh et al. [PLDI ’16]

slide-22
SLIDE 22

[PLDI ’16] Code First, Then DM

16

slide-23
SLIDE 23

Goal:

Less Keyboard, More Mouse.

17

slide-24
SLIDE 24

18

slide-25
SLIDE 25

19

Draw

slide-26
SLIDE 26

20

Draw Relate

slide-27
SLIDE 27

21

Draw Relate Abstract

slide-28
SLIDE 28

New DM Tools

22

Draw Relate Abstract

slide-29
SLIDE 29

New DM Tools

23

Draw Relate Abstract

slide-30
SLIDE 30

New DM Tools

24

Draw Relate Abstract

slide-31
SLIDE 31

New DM Tools

25

Draw Relate Abstract

slide-32
SLIDE 32

26

Draw Relate Abstract

slide-33
SLIDE 33

Demo

27

Draw Relate Abstract

slide-34
SLIDE 34

Demo

28

Draw Relate Abstract

slide-35
SLIDE 35

29

Draw Relate Abstract

Sketch-n-Sketch

Programming in 2015

slide-36
SLIDE 36

30

Draw Relate Abstract

Sketch-n-Sketch

Programming in 2015

slide-37
SLIDE 37

30

Draw Relate Abstract

let rect1 = ... let line2 = ... let line3 = ...

Sketch-n-Sketch

Programming in 2015

slide-38
SLIDE 38

30

Draw Relate Abstract

let rect1 = ... let line2 = ... let line3 = ...

Sketch-n-Sketch

Programming in 2015

slide-39
SLIDE 39

31

Draw Relate Abstract

Sketch-n-Sketch

Programming in 2015

slide-40
SLIDE 40

31

Draw Relate Abstract

let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ...

Sketch-n-Sketch

Programming in 2015

slide-41
SLIDE 41

31

Draw Relate Abstract

let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ...

Sketch-n-Sketch

Programming in 2015

slide-42
SLIDE 42

31

Draw Relate Abstract

let rect1_x = ... let rect1_y = ... let rect1 = ... let line2 = ... let line3 = ...

Sketch-n-Sketch

Programming in 2015

slide-43
SLIDE 43

32

Draw Relate Abstract

Sketch-n-Sketch

Programming in 2015

slide-44
SLIDE 44

32

Draw Relate Abstract

let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999

Sketch-n-Sketch

Programming in 2015

slide-45
SLIDE 45

32

Draw Relate Abstract

let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999

Sketch-n-Sketch

Programming in 2015

slide-46
SLIDE 46

32

Draw Relate Abstract

let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999

Sketch-n-Sketch

Programming in 2015

slide-47
SLIDE 47

32

Draw Relate Abstract

let group x y size = let rect1 = ... let line2 = ... let line3 = ... group 0 0 999999

Sketch-n-Sketch

Programming in 2015

slide-48
SLIDE 48

33

Draw Relate Abstract

Sketch-n-Sketch

Programming in 2015

slide-49
SLIDE 49

33

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

slide-50
SLIDE 50

34

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

slide-51
SLIDE 51

34

Draw Relate Abstract

(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...

Sketch-n-Sketch Sketch-n-Sketch++

slide-52
SLIDE 52

34

Draw Relate Abstract

(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...

Sketch-n-Sketch

Smarter Algebra + Helper Functions

Sketch-n-Sketch++

slide-53
SLIDE 53

35

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

slide-54
SLIDE 54

35

Draw Relate Abstract

; Top-Level Defs (def rect1 ...) (def line2 ...) (def line3 ...) ; Main Expression [ rect1 ... ]

Sketch-n-Sketch Sketch-n-Sketch++

slide-55
SLIDE 55

36

Draw Relate Abstract

; Top-Level Defs (def rect1 ...) (def line2 ...) (def line3 ...) ; Main Expression [ rect1 ... ]

Sketch-n-Sketch Sketch-n-Sketch++

Refactor Programs

  • f Arbitrary

Structure

(def group1 (def rect1 ...) (def line2 ...) (def line3 ...) [ rect1 ... ] ) group1

slide-56
SLIDE 56

37

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

slide-57
SLIDE 57

37

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

slide-58
SLIDE 58

37

Draw Relate Abstract

Sketch-n-Sketch Sketch-n-Sketch++

?? ? ? ? ?? ? ? ?

slide-59
SLIDE 59

37

Draw Relate Abstract

Sketch-n-Sketch

Additional
 Interaction
 to Resolve
 User Intent

Sketch-n-Sketch++

?? ? ? ? ?? ? ? ?

slide-60
SLIDE 60

38

Program

slide-61
SLIDE 61

38

Program

slide-62
SLIDE 62

38

Program

Domain-specific

slide-63
SLIDE 63

38

Program

Domain-specific General

slide-64
SLIDE 64

38

Program

Domain-specific General

slide-65
SLIDE 65

38

Program

Domain-specific General

slide-66
SLIDE 66

38

Program

Domain-specific General

slide-67
SLIDE 67

38

Program

Domain-specific General

slide-68
SLIDE 68

38

Program

Domain-specific General

slide-69
SLIDE 69

38

Program

Domain-specific General

slide-70
SLIDE 70

Related Work

39

slide-71
SLIDE 71

Related Work

39

DM + Code DDV Apparatus

slide-72
SLIDE 72

Related Work

39

Programming
 by Example Chimera Metamouse Mondrian DM + Code DDV Apparatus

slide-73
SLIDE 73

Related Work

39

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

slide-74
SLIDE 74

Related Work

Constraint Oriented Systems Sketchpad ThingLab Juno-2

39

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

slide-75
SLIDE 75

Related Work

Constraint Oriented Systems Sketchpad ThingLab Juno-2

39

Programming
 by Example Chimera Metamouse Mondrian Code + DM Wang et al. Live PBE McDirmid’s Demos Sketch-n-Sketch DM + Code DDV Apparatus Domain Apps Parametric CAD Procedural modeling

slide-76
SLIDE 76

Our Approach

Start with general-purpose language add D.M. features.

40

slide-77
SLIDE 77

Goal:

Less Keyboard, More Mouse.

41

slide-78
SLIDE 78

Demos on YouTube

Sketch-n-Sketch

https://ravichugh.github.io/sketch-n-sketch

42

slide-79
SLIDE 79

Just google “sketch n sketch”

Demos on YouTube

Sketch-n-Sketch

https://ravichugh.github.io/sketch-n-sketch

42

slide-80
SLIDE 80

Thank you!

43

slide-81
SLIDE 81

44

slide-82
SLIDE 82

Extra Slides

45

slide-83
SLIDE 83

Traces

46

slide-84
SLIDE 84

Traces

let a = 3 in

46

slide-85
SLIDE 85

Traces

let a = 3 in let b = 5 in

46

slide-86
SLIDE 86

Traces

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

46

slide-87
SLIDE 87

Traces

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

⇓

46

slide-88
SLIDE 88

Traces

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

⇓

8

46

slide-89
SLIDE 89

Traces

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

⇓

8

47

slide-90
SLIDE 90

Traces

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

⇓

8

48

slide-91
SLIDE 91

Traces

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

⇓

8a+b

49