Flowcode: An AI-Powered Programming Environment for Scaffolding Iteration in Creative Computing Education

2026-07-07

AI Summary

This work addresses the challenges novice creative programming learners face in comprehending code structure and effectively extending example-based programs to realize their own ideas. To support learners in understanding program logic and iteratively developing original projects, the authors propose Flowcode—a collaborative programming environment that integrates flowchart-driven code visualization with a tailored AI-powered conversational interface. By combining visual scaffolding with carefully calibrated interactional friction, Flowcode facilitates deeper engagement with computational concepts. Findings from two user studies demonstrate that Flowcode significantly enhances novices’ ability to interpret and adapt exemplar code, thereby validating the efficacy and potential of structural visualization and pedagogically informed AI interaction in creative programming education.

Abstract

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.

Problem

• creative coding
• code understanding
• code extension
• learning to code
• example-based learning

Innovation

• Flowcode
• creative coding
• AI-powered programming environment
• code visualization
• scaffolding iteration