Date
Publisher
arXiv
Building upon found examples is a popular way people learn to code, especially in creative coding communities where sharing projects and remixing are common practices. But effectively doing so requires being able to 1) understand how existing code works, and 2) extend it by writing code that implements your own ideas, practices that can be challenging for new creative coders. We explored how to support these two processes through the design of Flowcode, a creative coding programming environment that integrates a flowchart for visualizing code structure and a chat interface tailored to support learning to code over vibe coding. We share how we iterated on the design of Flowcode over two studies with new creative coders, reflecting on the roles visualization and friction may play in enabling productive AI-use in computing education.
Study at a glance
- Question: How can AI-generated visual code structures and step-by-step fill-in-the-blank explanations scaffold novice creative coding without encouraging passive code generation?
- Setting and data: Private research university in Northeastern United States, 7 workshop students and 9 female lab study students, using Anime.js and CodePen projects.
- Method: System development, pilot workshop, and think-aloud lab study with interaction logs, screen recordings, and thematic analysis.
Why it matters
Understanding and remixing existing code is challenging for beginner creative coders. Standard AI assistants often generate full solutions that encourage passive vibe coding rather than fostering active learning and code comprehension.
Key findings
- AI-generated flowcharts helped novice learners orient to multi-file codebases, navigate across languages, understand functional code relationships, and plan subsequent edits.
- Introducing friction through step-by-step reveals, manual copy-pasting, and fill-in-the-blank snippets encouraged students to read explanations and actively write critical code values.
- In the lab study, the model produced complete solutions instead of blanks in 22% of JavaScript snippets and 23% of CSS snippets.
Summary drafted with AI from the full paper and may contain errors. See the full paper for details.
What is the application?
Who is the user?
Who age?
Why use AI?
