Stamper: An Artboard-Oriented Creative Coding Environment

Cameron Burgess, Dan Lockton, Maayan Albert, and Daniel Cardoso Llach. 2020. Stamper: An Artboard-Oriented Creative Coding Environment. In Extended Abstracts of the 2020 CHI Conference on Human Factors in Computing Systems (CHI EA '20). Association for Computing Machinery, New York, NY, USA, 1–9. DOI:https://doi.org/10.1145/3334480.3382994

作者

卡内基梅隆大学设计学院：

• Cameron Burgess
• Maayan Albert
• Dan Lockton
  卡内基梅隆大学建筑学院：
• Daniel Cardoso Llach

摘要

当代WYSIWYG(所见即所得)设计软件利用数字画板——位于可滚动缩放画布上的有限图形框架；其中许多图形框架可以任意排列、缩放和复制，以探索和并列设计思想。尽管创意从业者越来越多地编写代码来探索设计空间，但创意编码的编程环境通常每个程序只显示一个图形帧。这阻碍了创造性过程的非线性本质，在这种情况下，看到过程工作的踪迹可以激发新的想法。我们建议缩小这个差距，并引入Stamper，这是一个面向画板的创作环境，用于流行的创意编码库p5.js。

Introduction

使用画板可以以一种轻松快捷的方式探索想法，因为它很容易尝试小的修改，同时在外围仍然有先前的工作。另一个好处是，一旦一个人有了几块板，它们就可以被串成一个故事板(storyboard)，有时也被称为缩略图草图(Thumbnail Sketches)或面板(Panels)。

随着计算变得无处不在，“用代码画草图”已经成为艺术家和设计师的一种实践，然而，在这些实践中使用的编程环境，如Processing，没有画板。相反，他们采用了三部分集成开发环境原型“指令箱”、“控制台”和一个单一的“图形画布”。

Design for Creativity

创作过程往往是非线性的。与软件专业人员相反，他们被训练以对正确答案的先入为主的想法开始编码，创造性的实践者倾向于探索许多不同的选项，从松散连接的想法中获得灵感，并通过制作来思考。

Interface

stamper( 原型在p5stamper.com)是一个编程环境，它使用 p5.js 和类似画板的对象，叫做“Stamps”，这些对象位于一个可滚动的缩放画布上。

优点：

• 由于每个功能都有一个独立的“调试视图”，因此作者可以感知系统的表面积更大
• 鼓励模块化编程，使作者能够自由地创建、感知和利用抽象，同时保持可见性

除了通过自动创建图形框架内容来可视化所有功能之外，Stamper 还可以在画布上可视化地呈现图
章之间的依赖关系，在作者看来，这些依赖关系就像带箭头的线条一样。有三种主要类型的线路:

• 参考线表示变量使用和函数调用
• 体系结构线表示 p5.js 的语言行为
• 文件线可视化加载到程序变量中的本地内容

程序在Processing和p5.js中被称为“草图”

Preliminary Evaluation

我们对卡内基梅隆大学的应届毕业生进行了访谈。他们现在从事设计和计算机领域的工作。一位前设计和人机交互的本科生说：“像Git这样的版本控制软件不能反映我创造性的工作流程。Stamper是一个很好的选择，因为它允许我同时看到多个版本并与之交互。”每个受访者都强调Stamper的速度慢得令人恼火。

Discussion and Future Work

对我们来说，这在未来的工作道路上有一个岔路口:(1)继续使用 Stamper 作为 p5.js 程序的编辑器，或者(2)创建一种新的语言，用于面向画板的编程环境——这两个方向都值得研究。

在这两种情况下，我们认为将更多的软件模式(例如类)构造成新的Stamp类型，并且找到可视化不绘制任何东西的辅助函数的方法，是值得注意的有趣的抽象问题。我们还希望将面向画板的设计软件中常见的其他功能调整到 Stamper，例如分组、自动对象布局和同时编辑多个对象。

我们认为画板和一般的设计软件是人机界面研究人员收获设计编程环境的新方法的沃土。