A Study of Editor Features in a Creative Coding Classroom

Title of the Paper

A Study of Editor Features in a Creative Coding Classroom

Bibliographic Information

• Subject Area: Human-Computer Interaction (HCI), Programming Tool Design, Creative Coding Education
• Keywords: Creative Coding, Programming Editors, p5, Introductory Programming, Code Editor Feature Design

Research Background and Issues

• Problems and Challenges:

  • Creative coding has rapidly developed in the realms of artistic expression and computing education, but current tools have not sufficiently addressed how to better support the creative needs of beginners and professional artists.
  • Most existing integrated development environments (IDEs) lack designs that balance learning and creativity, especially for novices and users without programming backgrounds.
  • As creative coding becomes part of programming education, it is necessary to gain deeper insights into learners' needs and experiences and to develop tools tailored to these requirements.

• Significance:

  • Creative coding tasks, by combining art and computing, serve as an important entry point to encourage a diverse group of students to engage in programming education, with notable success in attracting women to learn programming.
  • Programming courses centered on creativity hold vast educational potential, but the design of tools in current development environments has yet to establish best practices.

• Research Motivation and Related Work:

  • Many current tools prioritize simplicity and ease of use, potentially sacrificing features that are more valuable to beginners and artist users.
  • There is a research gap regarding the conceptualization and implementation of dynamic code editing features. This study aims to guide design practices to improve creative coding environments.
  • A core research question is how experimental tools (e.g., real-time refresh, color pickers, shape toolboxes) influence user experience in creative domains.

Solution

• Proposed Approach:

  • The authors developed an improved version of the p5.js editor, named p5/y1 and p5/y2, and deployed it in four creative coding courses (university and high school levels).
  • In the first year, they observed and surveyed students' usage and preferences for existing features. In the second year, they added several new editor features based on these findings and studied their practical effects.

• Core Innovations:

  • Combining creative expression with tool design, the study proposed and implemented experimental features such as bidirectional shape editing (Shape Toolbox) and improved real-time auto-refresh.
  • Integrated traditional programming editor features (e.g., code beautification) with creativity-focused features (e.g., color pickers, dynamic value sliders).
  • Linked teaching process data with user behavior logs to identify key factors influencing students' usage and preferences.

• Implementation Steps and Techniques:

  1. In the first-year course (p5/y1), the authors recorded students' code editing behaviors and conducted detailed surveys on user preferences and expectations for existing editor features.
  2. In the second-year course (p5/y2), they introduced new features such as a color picker, auto-completion, and a shape toolbox, and continued tracking and analyzing students' usage.
  3. For the new or improved features, qualitative and quantitative analyses were conducted from multiple dimensions, including cognitive load, learning efficiency, and classroom teaching needs.

Research Outcomes

• Specific Findings:

  • Surveys identified beginners' preferences for tool features during creative coding, with features like the color picker and auto-completion being widely regarded as very useful.
  • Feature logs showed that some experimental features (e.g., shape toolbox, real-time refresh) had high initial usage rates but declined as students became more familiar with manual operations.
  • Static analysis features (e.g., code formatting and syntax checking) were considered highly supportive for programming learning, though their implementation could sometimes cause user frustration (e.g., overly frequent prompts).

• Comparison with Existing Solutions and Advantages:

  • Compared to traditional lightweight editors, p5/y2’s introduction of static and dynamic tools better aligned with the content needs of artistic programming while maintaining beginner accessibility.
  • The editor provided a method for dynamic feedback and recording tool usage preferences, enabling beginners to understand program outputs more quickly through iterative processes.

• Experimental or Evaluation Results:

  • Surveys and log data revealed users' acceptance processes for features and the actual utilization rates of specific features at different learning stages.
  • For example, user evaluations of the updated real-time refresh feature improved, though its usage frequency remained limited.
  • Enhanced visualization features (e.g., shape toolbox) were almost universally helpful for beginners in overcoming the learning "gap" between code and output.

• Limitations and Future Directions:

  • Limitations:
    • Technical issues in data collection, such as some sessions not being correctly identified.
    • Using static images for survey evaluations may have led to biased expectations of feature characteristics.
  • Future Directions:
    • Explore mechanisms for designing programming features that adapt better to educational needs, such as progressive features aligned with learning curves.
    • Further study the potential impact of features on learning outcomes based on comprehensive observation of usage data.
    • Extend this development approach to other creative programming domains and conduct cross-disciplinary comparative studies with the needs of professional artists.