Document Open Access Logo

PShapeTrace: Linking Drawing Instructions with Visual Outcomes in Processing

Authors Takashi Ishio , Yuta Yamasaki

PDF HTML 5

Files

Thumbnail PDF
PDF
OASIcs.Programming.2025.14.pdf
  • Filesize: 1.46 MB
  • 12 pages
HTML5 Logo HTML (experimental)
OASIcs.Programming.2025.14.html

Document Identifiers

Subject Classification

ACM Subject Classification
  • Software and its engineering → Integrated and visual development environments
  • Software and its engineering → Maintaining software
Keywords
  • Traceability
  • dynamic analysis
  • graphical user interface

Metrics

Abstract

Processing is a Java-based programming language designed to facilitate learning programming through visual arts and creative coding. However, beginners must simultaneously learn both the programming language itself and image-processing concepts such as coordinate systems, making it challenging to understand the correspondence between drawing instructions and their visual outcomes. To help beginners analyze the drawing process in their code, this study proposes a tool named PShapeTrace that observes the execution of Processing programs and visualizes the relationship between drawing instructions and their results. A user study was conducted to evaluate the tool. Participants reported that the tool was useful for completing programming tasks. The resulting System Usability Scale (SUS) score was 72.75, indicating acceptable usability.

Cite As Get BibTex

Takashi Ishio and Yuta Yamasaki. PShapeTrace: Linking Drawing Instructions with Visual Outcomes in Processing. In Companion Proceedings of the 9th International Conference on the Art, Science, and Engineering of Programming (Programming 2025). Open Access Series in Informatics (OASIcs), Volume 134, pp. 14:1-14:12, Schloss Dagstuhl – Leibniz-Zentrum für Informatik (2025) https://doi.org/10.4230/OASIcs.Programming.2025.14

Author Details

Takashi Ishio
  • Department of Media Architecture, School of Systems Information Science, Future University Hakodate, Japan
Yuta Yamasaki
  • Department of Media Architecture, School of Systems Information Science, Future University Hakodate, Japan

Funding

  • Ishio, Takashi: JSPS KAKENHI No.JP20H05706.

Supplementary Materials

References

  1. Aaron Bangor, Philip Kortum, and James Miller. Determining what individual SUS scores mean: adding an adjective rating scale. Journal of Usability Studies, 4(3):114-123, May 2009. URL: https://uxpajournal.org/wp-content/uploads/sites/7/pdf/JUS_Bangor_May2009.pdf.
  2. Brian Burg, Richard Bailey, Amy J. Ko, and Michael D. Ernst. Interactive record/replay for web application debugging. In Proceedings of the 26th annual ACM symposium on User interface software and technology, pages 473-484, 2013. URL: https://doi.org/10.1145/2501988.2502050.
  3. Keith Chan, Zhi Cong Leo Liang, and Amir Michail. Design recovery of interactive graphical applications. In Proceedings of 25th International Conference on Software Engineering, pages 114-124, May 2003. URL: https://doi.org/10.1109/ICSE.2003.1201193.
  4. Clarence Dang, Anh Vinh Le, Amir Michail, Kim Cuong Pham, Tran Quan Pham, Nicholas Seow, Anuraag Sridhar, and Jasper Timm. Design recovery of real-time graphical applications using video. In Proceedings of 20th IEEE International Conference on Software Maintenance, pages 338-347, 2004. URL: https://doi.org/10.1109/ICSM.2004.1357819.
  5. Ruanqianqian Lisa Huang, Philip J. Guo, and Sorin Lerner. UNFOLD: Enabling Live Programming for Debugging GUI Applications . In Proceedings of 2024 IEEE Symposium on Visual Languages and Human-Centric Computing, pages 306-316, September 2024. URL: https://doi.org/10.1109/VL/HCC60511.2024.00041.
  6. Amy J. Ko and Brad A. Myers. Designing the whyline: A debugging interface for asking questions about program behavior. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pages 151-158, April 2004. URL: https://doi.org/10.1145/985692.985712.
  7. Mihaela Malita and Ethel Schuster. From drawing to coding: Teaching programming with processing. Journal of Computing Sciences in Colleges, 35(8):245-246, April 2020. URL: https://doi.org/10.5555/3417639.3417663.
  8. Jeanine Meyer. Programming 101: Learn to Code with the Processing Language Using a Visual Approach. Apress, 2nd edition, 2022. Google Scholar
  9. Yoshiaki Mima. Discussion on the way of computer programming education: 8. Programming education for the first-year undergraduates at Future University Hakodate. Information Processing, 57(4):370-373, 2016. [in Japanese]. URL: https://ipsj.ixsq.nii.ac.jp/records/158102.
  10. Processing Foundation. Processing - overview. https://processing.org/overview, accessed on August 5, 2024.
  11. Casey Reas and Ben Fry. Processing: A Programming Handbook for Visual Designers and Artists. The MIT Press, 2nd edition, 2014. Google Scholar
  12. André L. Santos. GUI-driven code tracing. In Proceedings of 2012 IEEE Symposium on Visual Languages and Human-Centric Computing, pages 111-118, September 2012. URL: https://doi.org/10.1109/VLHCC.2012.6344495.
  13. André L. Santos. GUI code tracing through direct program interaction. Journal of Software: Evolution and Process, 26(6):552-568, June 2014. URL: https://doi.org/10.1002/smr.1650.
  14. Jinshui Wang, Xin Peng, Zhenchang Xing, and Wenyun Zhao. An exploratory study of feature location process: Distinct phases, recurring patterns, and elementary actions. In Proceedings of 2011 27th IEEE International Conference on Software Maintenance, pages 213-222, September 2011. URL: https://doi.org/10.1109/ICSM.2011.6080788.
Any Issues?
X

Feedback on the Current Page

CAPTCHA

Thanks for your feedback!

Feedback submitted to Dagstuhl Publishing

Could not send message

Please try again later or send an E-mail
© 2023-2025 Schloss Dagstuhl – LZI GmbH About DROPS Imprint Privacy Contact