![Page 1: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/1.jpg)
Ravi Chugh
Prodirect Manipulation:
Bidirectional Programming���for the Masses
![Page 2: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/2.jpg)
Motivating Application
The original Chicago Ferris Wheel, built for the 1893 World's Columbian Exposition [Wikipedia]
2
![Page 3: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/3.jpg)
(d)
(a) (b) (c)
(e) (f)Task:
Q: What Would You Choose? Programming Language
(e.g. JavaScript, Processing) Direct Manipulation System (e.g. Illustrator, PowerPoint)
3
![Page 4: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/4.jpg)
(d)
(a) (b) (c)
(e) (f)Task:
Q: What Would You Choose? Programming Language
(e.g. JavaScript, Processing) ✗ Direct Manipulation System (e.g. Illustrator, PowerPoint) ✗
4
![Page 5: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/5.jpg)
5
Immediate���Feedback
Rapid���Prototyping
Abstraction���Capabilities
GOAL: ���
Programmatic Manipulation
GOAL: ���
Direct Manipulation
✗
✓ ✗
VISION:
"Prodirect"���Manipulation
✓ ✓ ✓
✓ ✓ ✗
![Page 6: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/6.jpg)
6
GOAL: ���
Programmatic Manipulation
GOAL: ���
Direct Manipulation
2D Graphics
Presentations
Documents
Spreadsheets
Web Apps
![Page 7: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/7.jpg)
7
GOAL: ���
Programmatic Manipulation
GOAL: ���
Direct Manipulation
2D Graphics
Presentations
Documents
Spreadsheets
Web Apps
General-Purpose���Languages
Domain-Specific���Languages or���
Libraries Domain-Specific���
GUI Tools
![Page 8: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/8.jpg)
v e 8
General-Purpose���Programming���
Language
Domain-Specific���Graphical User���
Interface
![Page 9: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/9.jpg)
v e 9
General-Purpose���Programming���
Language
Domain-Specific���Graphical User���
Interface
v' e'
![Page 10: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/10.jpg)
10
Demo: Sketch-n-Sketch
ravichugh.github.io/sketch-‐n-‐sketch
![Page 11: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/11.jpg)
v e 11
v' e'
Challenges: • Predicting User Intent • Machine-Assisted Programming • Language / Library / UI Co-Design • Intuitive, Interactive Workflow
![Page 12: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/12.jpg)
Constraint-Oriented Programming
Prodirect���Manipulation v.
constraints in���programming model
constraints (only) in���program synthesis
Bidirectional���Programming
Prodirect���Manipulation v.
domain-specific PL, strong guarantees
general-purpose PL, weak guarantees
Programming by���Manipulation
Prodirect���Manipulation v.
"add Pro to DM" "add DM to Pro" 12
![Page 13: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/13.jpg)
Prodirect Manipulation = Programmatic + Direct Manipulation Sketch-n-Sketch = Prodirect Manipulation for SVG
Thanks!
Jacob���Albers
Mitch���Spradlin
Brian���Hempel
13
![Page 14: Prodirect Manipulation: Bidirectional Programming for the ...people.cs.uchicago.edu/~rchugh/static/talks/v2025-prodirect.pptx.pdf · (e.g. JavaScript, Processing) ... Web Apps General-Purpose!](https://reader033.vdocuments.net/reader033/viewer/2022060207/5f03c4037e708231d40aa96b/html5/thumbnails/14.jpg)