CodeToon：面向代码驱动故事创作的故事情节创意、自动漫画生成与结构映射

文献标题

CodeToon: Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven Storytelling

文献信息

• 主题领域: 编程教育与可视化工具
• 关键词: 编码驱动的故事讲述, 漫画, 编码条, 作者工具, 编程教育, 计算机科学, 自动漫画生成, 结构映射, 可视化编程
• 发表会议: The 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22)
• 年份: 2022

研究背景与问题

• 问题与挑战:

  • 编程语言的抽象特性对初学者来说学习起来非常困难，特别是基于文本的编程语言，其符号表达复杂且规则繁琐。
  • 虽然教学中使用漫画（如“编码条”）有助于解释代码的执行及其背后的计算概念，与代码的连接性和创作的繁琐性使得这种方法难以普及。
  • 创建“编码条”的过程需要创作者从代码中生成故事，再将故事转化为漫画，这个过程费时、繁琐且需要创造性。

• 重要性:

  • 减少学习编程的障碍和抽象性，提升学习者的直观理解。
  • 通过生动的视觉呈现（漫画）来吸引学生的兴趣，并增强教学过程的互动性。

• 研究动机:

  • 在如何高效生成与代码相关联的故事及漫画方面，现有解决方案仍有不足。
  • 亟需开发自动化的、面向创作者友好的工具，使得教学者能快速生成高质量的教学材料。

解决方案

• 方法:

  • 开发了一款名为 CodeToon 的漫画创作工具，其核心功能包括：
    1. 故事生成: 通过比喻推荐机制从代码生成与之对齐的故事模板。
    2. 漫画自动生成: 从用户输入的故事模板自动生成视觉化的漫画。
    3. 结构映射: 保证代码、故事与漫画三者之间的1对1映射，从语义上保持一致。

• 创新之处:

  1. 基于Gentner的“结构映射理论”，明确了代码至故事和故事至漫画的映射关系。
  2. 引入视觉叙事语法，用于设计和生成漫画模板。
  3. 极大提升了“编码条”的创作效率，将故事创意与漫画设计过程自动化。

• 实施步骤与关键技术:

  • 在工具的故事面板中，用户可以添加自己的代码，系统会生成对应的故事模板。
  • 用户在填充模板时可以得到由CodeToon推荐的比喻（例如，将x=10比喻为“时间是10点”）。
  • 工具对这些内容进行解析，自动生成表征代码执行逻辑的漫画。
  • 通过1对1的映射，保持代码、故事、漫画三者清晰的语义关联。

研究成果

• 具体成果:

  • CodeToon帮助用户在显著缩短时间的情况下，快速创作准确、信息丰富、且对教学有帮助的“编码条”。
  • 提供的设计实现了代码与故事、漫画之间清晰的结构映射，增强了对编程语意和逻辑的理解。

• 优势比较:

  • 相较于传统完全人工创作的方式，CodeToon简化了漫画的创作过程。
  • 它揭示了如何使用抽象到具体的视觉转换来提升教学效果，降低学习者的心理负担。

• 实验与评估结果:

  • 利用24位参与者对工具进行了实验，研究表明:
    • 使用CodeToon的用户创作漫画的速度更快（平均节省6分钟），任务完成效率更高。
    • 用户普遍认为CodeToon生成的漫画具有高准确性和较好的教学价值。
    • CodeToon的创作支持指数（Creativity Support Index, CSI）得分显著高于对照组，特别是在对工具的趣味性和用户体验方面表现突出。

• 局限性与未来方向:

  • 局限性:
    • 生成的漫画在视觉设计质量和主题类别的广度上仍需改进。
    • CodeToon当前的用户群体主要是具备编程基础的用户，对于非专业学习者的实际效果需进一步测试。
  • 未来方向:
    • 引入生成式模型（如GPT-3或Codex）以进一步增强故事生成的灵活性和创意。
    • 在教育领域广泛测试，探索其在不同学习场景和人群（如初学者和非编程专业学生）中的效果。
    • 扩展支持其他编程范式和语言的能力（如面向对象编程）。

整体而言，CodeToon展示了一种全新且高效的方式，将代码、故事与视觉漫画融合，用以支持计算机科学教育，具有极大的应用前景。