新青年丨当程序猿学会了设计...

郑越升

HOTSAR创意便利店店长兼技术总监

个人技术公众号：坏打印机

https://www.behance.net/BadPrinter

2017年毕业于软件工程专业，一直致力于探索视觉和编程之间跨界结合的可能性。这一次他用案例向各位设计师展现编程和视觉结合可以有多好玩，以及分享设计师应该如何从零开始接触编程，最后还有学习Tips。

HOTSAR是一家藏匿于上海的创意便利店（都是95后的超年轻团队）。

商业项目集合 

▽

虽然HOTSAR是一个非常年轻的团队，但是他们都是为：微信、阿里、腾讯、OPPO、网易、麦当劳等大企业提供创意解决方案。而越升不仅作为其中的技(yan)术(zhi)担当有时候还会串门做做设计、建模。小编只能默默的送上膝盖～

2017年CG Demo

👇

编程可以在视觉上做什么？

可以为所欲为

"人们习惯性地把程序员跟设计师分成两种不同性质的人，好像程序员就不会有美感，设计师逻辑思维就一定会很弱，但最近几年我们发现越来越多的程序员学设计，设计师学编程的跨界故事。"

140字符大赛

Tweetable Mathematical Art

这是一个很有挑战性的视觉编程比赛。比赛的规则很简单，用不超过140个字符的代码生成酷炫的视觉效果，并且生成的图是可以无限分辨率的！ 

140个字符是什么概念？那如果不考虑压缩的话，大概就相当于只有47个像素数据量的代码。用这么少代码来生成一张酷炫的图，引起了很多程序员的关注。我们来看一下在网上这些有极强胜负欲的疯狂程序员都写出了什么样子的代码？

  

   

   

在程序员的世界里面，最可怕的还有那些基于计算机图形学知识，用shader去写各种视觉效果的那群人，他们可以在没有任何三维模型的输入的条件下，纯靠几百行代码就可以写出这样的效果。

如何用编程做视觉？

让计算机根据制定的规则生成效果

"不要狭隘的把编程视觉简单理解成用编程去生成图像。它是一种移植性很强的东西。"

飞线作画

我们先来简单的理解这个规则。首先我先把一张照片当做一个大草原，然后我在这个草原上随机扔一些虫子。让我们放大其中一只虫子，这个虫子掉落在了草原的某个地方。然后我们赋予这只虫子一个有限的视力范围，他只能看到方圆十个像素，在方圆十个像素有限的可视范围里面，黑色的像素是虫子的食物。虫子会一个像素一个像素计算它的亮度值，向亮度值最暗的像素方向走一步，它走过的路，像素的亮度值就会提高，因为那一段路的黑暗食物已经被这个虫子给吃掉了。

另外，为了让虫子的运动更加随机一点，我在这个草原上加了一阵狂风，这个风在编程里面就是noise。那草原上的风是随机不断的在吹的，会在一定程度上影响这个虫子的走向。成千上万只虫子在照片的黑暗食物分布跟风的影响下会不断的挪动，直到他的生命值为零，所有虫子走过的路径就是我们最终生成了飞线作画图像的样子。

在某一段时间里面，我会很喜欢去研究这些规则，也叫做算法。而这些规则它应用的场景绝对不止不只是生成一张图这么简单，我们需要更广义的把它定义成一种效果。而这种效果可以应用在平面、三维、可交互可实时交互程序等各个你想得到的地方。

反应扩散算法

反应扩散算法只有两条公式，但这里就不仔细去分析这两条公式到底是什么意思，我们只需要把它具象化理解成一个培养皿，培养皿里面分布着一些养料，这些养料会不断更新，当我们给培养皿中滴入一滴含有微生物的液体的时候，微生物会根据培养皿上的养料分布进行繁衍生殖，而微生物最终在培养皿上的分布就是我们用这个算法生成的最终的图像。

微生物在培养皿里面繁衍生殖的动态分布效果

如果我们改变公式的参数值，微生物的分布效果会截然不同，从而一种算法可以产生各种各样的图形效果。如果我们在培养皿里面的养料分布是一张图的亮度值，比如说养料是根据输入图的亮度值去分布的，那微生物的分布会发生什么有趣的反应呢？

二维平面的场景

▼

这个是我用Three.js实现的反应扩散算法，然后以一张名画的图作为它的养料输入，最终实现的动态效果。一种效果，它不仅可以应用在平面上，它还可以应用在三维，甚至是实时交互程序里面，那如果我想把反应扩散算法应用在一个三维的场景里面，他会出现什么样的效果？ 

三维平面的场景

▼

我用Houdini的VEX实现了反应扩散算法，并且把微生物的分布体现在了三维平面的凹凸上，就有了这种效果。那如果我想让它作用在一个三维的模型上面，比如说一个三维的人头上，那效果会是什么样呢？

三维模型的场景

▼

所以我们看到一个反应扩散算法，可以从二维平面到三维平面，从三维平面到三维模型，所以不要狭隘的把编程视觉简单理解成用编程去生成图像，它是一种移植性很强的东西。当然你也可以在实时交互程序里面去运用算法，实时交互也是编程视觉一个很大的优势。这就不仅仅是Motion动态的层面了，还会根据你的交互给出实时的反馈。

可实时交互的编程视觉

这是HOTSAR工作室还没上线的官网首页的一个WebGL的交互程序，可以在手机端触摸屏幕进行交互，触摸到HOTSAR logo的时候，logo表面上的立方体会做一个三维紊乱的运动。

当然这不是单纯编程就能实现的，很多情况下我做的东西都需要设计软件跟编程互相配合才能实现。

比如说立方体分布在logo表面上点的位置是提前在Houdini里根据logo的模型用Scatter节点去分布好的，然后把点模型导出obj格式出来，接着还要用Processing写一个简单的脚本处理程序，把obj文件里面的点信息提取出来，删掉冗余信息，然后导出txt文本数据给web端的JavaScript去读取调用，这个是属于设计类的软件来配合编程做东西。

编程除了在视觉方面可以大放异彩，设计师也可以在其它领域感受到编程是有趣的。如果你平时有一些奇奇怪怪的想法，编程可以帮你迅速的实践你的想法。

设计师应该如何从零开始学习编程？

“学习重在坚持，除了坚持之外，找一个一起学习或者可以引路的人，对学习更有帮助。”

推荐工具

▼

目前而言，设计师打开编程世界友好度最高的还是Processing！ 这是一款大大降低设计师学习成本，专注于视觉跟互动的软件，而且学习资料相当丰富，文档也很完善，基本上只要认真学习一周，都可以简单的上手Processing。

如果你想了解更多关于创意编程的东西，下面这个网址已经帮你整理好了：

https://github.com/terkelg/awesome-creative-coding

学习方法

学习资料与教程

▼

Google、Vimeo、Youtube、Shadertoy、各种艺术家程序员的个人网站、各种创意编程框架的官网。搜索跟适应英文环境也是学习编程很重要的前提。有技术上的问题，百度是给不了帮助的，所以你要学会科学上网。

反复练习 大量输出

▼

这是一个被很多人实践过的一个好方法。集中一段时间学习，反复练习，大量输出，给自己做一个反馈，提高学习的积极性，断断续续的学习效果是很差的。集中火力大量练习，才能熟能生巧。

找人同行 智慧提问

▼

如果能在学习的领域找到一个同行的人并肩作战，或者找到一个走在前面的人带路，会少走很多弯路。这里就涉及到一个与人相处的问题：学会如何智慧的提问。一个国外程序员写的一篇文章 How To Ask Questions The Smart Way，列举了很多在请教技术类问题的时候应该如何智慧的提问，让被问者乐意帮助你的一些技巧，这篇文章很值得一读，大家可以在网上搜搜一下。

不要拖延，马上着手你的想法

▼

灵感这种东西往往是稍纵即逝，一旦你有什么灵光一现的想法，马上着手去实践它，这是你绝佳的锻炼机会，也是最能够体现你个人特色的作品。

END

还不赶快去练习敲键盘

...

如想了解更多，请持续关注“最毕设”（全网同名）