一次Computational Design实验

去年年末萌生的一个想法，想做一点关于智能设计的学习，克服懒癌总算是做完了。大体上是一个2D的平面生成实验，设计和代码改了好几轮，今天这篇权当是记录总结了。

1、项目概念

概念CG

偶然之间看到一张科幻电影的海报，这不可名状的扭曲，总让人联想起宇宙中变化的引力和未知的空间。在数不清的科幻电影宇宙里，有无数的人在进行着星际的旅行。

这些宇航员在穿梭虫洞时，由于引力的变化，身体出现扭曲和不可预测的姿态。而作为环境的虫洞本身也是变换无穷，我希望用Computational Design的方式来探索和展示这个场景的可能性。

2、思路和流程

我把设计元素拆分成宇航员和虫洞两部分，分别对其进行设计。策略方面还是从参数化构建出发的，一方面是因为参数化系统可以使设计师对生成的风格有比较好的控制力，另一方面如果要用机器学习的话，数据集的采集也是个难题。而参数化系统正好可以大量生成数据集，可以作为之后进一步做机器学习的基础。

在宇航员的设计上，我们借鉴了传统皮影戏的概念，用骨骼系统来控制整体人物形态的生成。在插画稿设计之初就建立在一个模块化的基础上。

设计了好几款头盔的手稿，最终还是选了一款比较传统的。骨骼系统使得设计元素能很方便的替换，也能套用其他人物形象。

生成方面，相比于纯粹的随机生成或者遗传算法，我们选择了一种交互式的生成算法。用户可以在系统随机产生的姿态中进行选择，在被选择的姿态之间进行插值计算，从而生成近似的一系列方案，这也能增加用户的参与度、体验感。

背景方面，逻辑就更为简单了。我在grasshopper中构建了一个三维的虫洞，虫洞的形状、内部的元素（扭曲的线条和浮动的几何体）都通过一系列随机的参数进行控制，并在一定范围内的随机位置对其进行观测。由此可以产生大量的平面背景样本，数量和风格也都非常可控。

起初做的渲染风格的背景，后来发现和宇航员的插画风格不搭配，最后还是转向了更为扁平的风格。

3、整合设计

上述工作都完成之后，我们在p5.js里整合了所有的设计元素，并且部署到了网页上。用户可以在网页上生成不同的宇航员和背景，选择并迭代自己喜欢的方案，保存生成的结果。

网页设计原型

项目体验地址：http://break-through.studio/p5sketch/fallingintoblackhole/

4、超越参数化

从功能来说，上面的内容已经很完整了；但是对于实验来说，下面进行到了非常有趣的部分。我把背景部分的几何元素去掉，输出了10000张作为数据集，在RunwayML中进行机器学习训练。

当然，在3000步的训练之后，能产生非常接近的视觉效果，在分辨率不高的情况下，用StyleGan生成的图像和参数化生成的看起来非常接近了。但其实作为普通用户来说，他们并不在意这是用什么方式生成了。

而我们设计背景的初衷，是去表现一个光怪陆离的隧道状空间。所以我试着在一个生成星云的模型上迁移我的训练，在500步的时候，产生了非常理想的结果——得到了一个有科幻电影质感的虫洞。

不得不感叹，做Computational Design是一个“控制感”和“意外性”的博弈。我们想要去控制生成的画面，但是我们也希望能有意外的惊喜和突破。在权衡这两者的过程中，保持设计的初衷，是一件困难而又有趣的事情。之后我又尝试了一下别人训练好的StyleTransfer模型，希望能获得一些Non-photorealistic rendering（非真实感渲染）的风格，效果也很不错。

5、IP应用

最后，作为一个平面设计的项目，做了一些衍生品的效果图，实物之后也会考虑定制出来，作为一些UDM Lab的周边吧。

在电子产品上的一些应用

6、总结

作为一个非盈利性质的实验项目来说，总体结果我还是满意的，剩余当然也有一些遗憾和后续需要改进的地方：比如说最开始插画稿细节很丰富，但是在网页上缩小了之后效果就没那么好了；网页的交互也没来得及做的很好……后续也希望能把整个项目做成实时3D的网页版本，能带来更惊艳的交互体验。