CodeToon
Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven Storytelling
Abstract
Recent work demonstrated how we can design and use coding strips, a form of comic strips with corresponding code, to enhance teaching and learning in programming. However, creating coding strips is a creative, time-consuming process. Creators have to generate stories from code (code->story) and design comics from stories (story->comic). We contribute CodeToon, a comic authoring tool that facilitates this code-driven storytelling process with two mechanisms: (1) story ideation from code using metaphor and (2) automatic comic generation from the story. We conducted a two-part user study that evaluates the tool and the comics generated by participants to test whether CodeToon facilitates the authoring process and helps generate quality comics. Our results show that CodeToon helps users create accurate, informative, and useful coding strips in a significantly shorter time. Overall, this work contributes methods and design guidelines for code-driven storytelling and opens up opportunities for using art to support computer science education.
CodeToon
CodeToon (https://codetoon.uwaterloo.ca/) is a flexible authoring tool that allows users to automatically or manually generate comics from code.
Scalability
CodeToon scales to any code input, as it uses (Python) interpreter in the backend. CodeToon parses code and transpiles it into comic (programming language -> visual language). As will be explained later, comic was also designed to scale to any code input.
Comic Design
Automatically generated comic is designed to show code semantics and execution steps. As can be seen from the demo, it can help students in several ways, e.g,. teach how to trace execution steps.
Here is a presentation video.
Cite this work
@inproceedings{suh2022codetoon,
title={CodeToon: Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven Storytelling},
author={Suh, Sangho and Zhao, Jian and Law, Edith},
booktitle={Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology},
pages={1--16},
year={2022}
}