processing动态代码大全_做一张动态海报需要多少步？

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

新媒体艺术家，邱伟豪也是其中一员，放弃程序员的稳定高薪职业，只为探索创意的无限可能。

本期分享会精彩回顾，除了经验分享外，他还会用两个案例向大家展现：只修改一行代码，可以有多少种视觉呈现？做一张动态海报需要多少步？

本期文章干货满满，推荐大家阅读收藏

Hello Meetup NO.77

分享嘉宾

▼

目前在加州大学圣塔芭芭拉分校 Media Arts and Technology 专业读 PhD (博士)学位。作品主要包括数据可视化，可交互视觉艺术，可交互装置等。拥有计算机专业的本科背景，师从新媒体艺术先驱、古根海姆奖获得者George Legrady。

个人作品网站：q-wh.com

01计算机背景自学设计跨界思维激起新创意伟豪一直探索科技与设计的可能性，在他的作品中，我们能感受到编程与设计、理性与感性的碰撞。他认为编程就是现代的画笔，更精确、更有效率，如果你会使用它。自写软件，实现多屏幕互动Chameleon●

Chameleon 是一个由伟豪自主开发的分布式高清图形渲染系统，能够在大规模超高分辨率多显示器上，进行动态视觉计算，这也是伟豪的研究生毕业生项目。这种多屏幕的创作方式，不仅成本低，拥有无损分辨率，还可无限扩大，近年也受新媒体创作者的欢迎。

在这个系统中，即便是有N台分立的显示单元(树梅派+屏幕)，用起来也能和一台电脑一样，操作更为简单，更容易运用到设计创作当中。

展示视频 ?

从150000+照片中发现世界规律Exposure & Light●

这是一个数据可视化项目，也是互动的装置。里面的基本数据是，24小时内在全球照片共享平台 Flickr 上发布的20万+张照片。伟豪通过设计算法，将照片按照拍摄时间和日期排列在世界地图上。通过算法分析，将低曝光的图像涂上蓝色，随着曝光的增加，逐渐向红色、橙色、黄色递进。

每张图片都会以矩形光环出现，观众只需触摸屏幕，就可以查看不同时间和区域中具体的照片。

数据可视化很有趣的一点，就是在可视化中发现出乎意料的规律。不同的曝光程度，可以反映出当天每个地区不同的光照程度，Fliker 在不同地区用户的活跃以及使用时间等。

Exposure & Light 展示视频 ?

编程不会自动让你的作品酷炫作品做得好还是要靠设计很多同学会把：编程 = 酷炫的作品连接起来，但其实，伟豪认为编程不会自动让你的作品酷炫，作品做得好不好，还是要靠创意和设计。

那究竟编程对于创作/设计会有什么帮助？伟豪通过自身的经历，从四个部分向大家分享。

交互性：作品与观众产生联系，作品不再是预制作的，而是随着观众的互动变化的。作者的创作与观众的参与共同成就最终的结果。

处理效率：计算机比人效率高，将重复性高的工作托付交给计算机，可以让创作者专注在更有价值的地方。

Flight Patterns，数据可视化全球飞机的飞行路线和时间，人工是做不到这种多量次的数据运算的。跨界能力：从编程的角度来看，媒介之间的界限几乎不存在图像、声音、文字、机械运动都可以统一看作是数据。创意编程创作，归根结底是数据的提取、计算与再现。

虚拟图像与现实环境的交互，并不存在界限

自定义工具：创作者可以根据自己的需求，量身定制自己的工具。一方面可以提升创作的体验，另一方面，工具的制作本身也是一种创作，往往一个新的工具会帯来一种新的创作形式以及一系列的新作品。

Box，用2D 投影实现3D效果，配合机械臂的使用，实现新的创作方式

在平面设计设计当中，还能实现自动排版、动态海报、参数化设计等。

不要狭隘的把编程视觉简单理解成用编程去生成图像，它是一种移植性很强的东西。如果你平时有一些奇奇怪怪的想法，编程可以帮你迅速的实践你的想法。

只要学会编程原理学什么语言都快

相比视觉呈现的学习，伟豪认为学会编程原理，更重要。只要懂原理，学什么语言都快。

那么初学者应该怎样入门创意编程？在伟豪看来，学习编程最主要的方式可以分为：案例学习、语言学习、思维学习，学习并不是一次性的，而是找到精髓，举一反三，这也是本次课程我们所要跟大家强调的。

为此，伟豪向我们深入拆解了两个案例：

同一组数据，有多少种视觉表达？

The Bach-Project

Tim Rodenbröker

●

在 The Bach-Project 中，Tim Rodenbröker 把巴赫的《 C大调前奏曲》的乐谱，解译为纯数字结构(数据)，并且排列在二维网格中。

Tim Rodenbroeker 通过角度分析、绘制线条等算法，将数字结构转化为视觉图形，这也是巴赫计划的原理。

接下来，我们尝试使用同一组数据，赋予不同的视觉算法，会发生什么？如果单个数字表示圆的直径，通过修改一行代码，我们可以得到：

同样还是那组数据，如果单个数据表示颜色的明暗，我们还可以得到：

如果把单个数据(0-6)，表示骰子的一面，“0”表示一个黑色的方格，就算变成这样：

如果只是把数字简单地转换角度，可以看到：

同样的原理，我们也可以在很多艺术作品中看到。艺术大师，池田亮司创作的 test pattern [N°12] ，通过改变同一组数据中线条的粗细程度，实现视觉形式的不同。

所以，同样是使用同一组数据，我们可以生成的视觉形式是多样的，天马行空的想法都能实现。

做一张动态海报，需要多少步？

Programming Posters

Tim Rodenbröker

●

伟豪认为，当我们看见一个案例，首先需要想到的是：

使用的数据是什么？
数据是如何变成视觉的？
我需要用的怎样的编程指令？

接下来我们通过三步，教大家如何理解、创作案例中的动态海报。

第一步：

使用的数据是什么？

大家可以看到，案例中图形呈现规律波动的状态，可以让我们联想到：Sin 函数，我们来验证一下。

如果我们使用 Sin 函数控制小球的运动轨迹：

让 Sin 函数的y轴坐标映射小球的直径变化：

让 Sin 函数，控制小球的x轴的运动轨迹变化：

以上可以看到，Sin函数，让单个小球有多种运动的变化，好像慢慢有点苗头了。

第二步：

数据如何变成视觉？

我们继续用 Sin 函数试试看，就以上而言，我们同时控制10个小球的话：

小球根据 X 轴运动，因为十个小球运动状态不一，每个小球之间就会有距离变化的效果。

根据 Y 轴轨迹运动

X+Y 轴运动，大家可以看到，这已经与案例中的视觉呈现(轨迹运动)很相似了，也就是说这是案例中动态海报背后的数据原型。

第三步：

我需要用怎样的编程指令？

以上两步说的还是原理部分，当我们弄清楚原理后，怎样才能作出结合图形的视觉效果？我们尝试以小球为中心的正方形，比喻为镜头，截取“a“字母的某个部分，我们可以得到：

隐藏背后“a”字母，小球依然在x轴运动，“镜头”可以看到：

十个小球同时在 X 或 Y 轴运动：

所以，当十个小球同时在 X+Y 轴运动，这也是案例所呈现的基本视觉效果：

其实所有案例都可以使用以上的拆解方法，在基本原理上加入额外的算法呈现，可以让图形更富创造力。

关于创作、Processing、教学的疑问

这里你都能找到答案

关于创作

Q：数据可视化在实际中的运用除了美以外，会运用在？

邱伟豪：数据可视化本身有艺术/创意方向，也有功能性强的。功能性的话，强调数据可视化一般数据量很大，而且可以根据数据的类型自定义视觉模型，达到最好的呈现效果。

Q：Processing 和视觉传达专业结合，能应用到那些方面呢？

邱伟豪：如果是视觉传达，那你可以做可交互的视觉设计、会比较符合当今的趋势一点。也可以做一些学术上的研究，通过编程去分析视觉传达。

邱伟豪作品之一，HSL Transformation：将2d图像生成3d模型，也能将 3d 模型渲染成 2d 图像

Q：编程创作是趋势吗？像现在用各种软件做的平面作品，以后交互作品是不是会应用得更多呢？

邱伟豪：我觉得是趋势，现在海报很多都拿C4D做了。也有交互的灯光箱，我觉得编程学习以后会让你的设计如虎添翼，不是说要取代你的设计知识。

Q：考虑平面上的延伸以及入门难度等方面，processing 和 p5.js 哪个会更适合呢？这两者最大的区别又是什么呢？

邱伟豪：processing 入门难度会更低一点。Processing 会和其他语言更相通一些，所以如果你还要学习其他的东西，processing 会更合适。如果你确定专攻网页端，那 p5.js 适合你。

邱伟豪作品之一，interactive-bubble：泡泡互动体验

关于 Processing

Q：Processing 所做出来的非交互性视角与 AE 相比有什么区别么？

邱伟豪：有区别 processing 是实时的，AE 是渲染的，交互性是最大优势。当然你学会编程了可以再使用 Houdini、blender ，有时候作品呈现的结果会比 AE 好。

Q：是不是做装置可以应用这个软件？

邱伟豪：可以的。事实上很多装置都是 Processing + Arduino，并且两者的语法和界面很相似。

Q：Processing 可以结合 blender、c4d、zbrush 这些建模软件吗？

邱伟豪：都可以的，只要你懂得两种软件、那你就可以写他们的连接代码。

Q：processing 可以应用到移动端软件上面嘛，比如说游戏？

邱伟豪：我建议是如果想做移动端，可以尝试用网页，也可以学习 Andriod 或者 IOS 开发，Openframeworks 和 IOS 是无缝连接。语法比 Processing 难一点。

Machinery Interference，创作者：邱伟豪、罗捷亮

互动体验装置，通过相机捕捉的观众的面孔，创造一个抽象的雕塑，装置通过从真实世界的图像中创造出一个虚拟的场景，模糊了真实与虚幻之间的界限。

关于课程 Q：课程中做的作品对于申请国外学校会有帮助吗？邱伟豪：有帮助的。尤其是相关专业。这方面的学生比较少。如果你做的很对口申请很有帮助。Q：数学基础不是很好怎么办？邱伟豪：不需要太好的数学知识、目前只是用到了三角函数；课程中我还讲了一下平抛运动呢，没准比高中老师讲的好哦。Q：刚入门编程的同学，会很纠结有那么多语言，到底学哪个好？邱伟豪：给大家的建议是，一定要学编程背后的思想，当你有了这种思想后，学任何语言都会很快。而 Processing 是设计师入门编程的很好的语言，文档对初学者很友好，有问题查文档就可以解决。而本期课程重点在于学习创意编程领域的基础，你可以学习各种多媒体的数据表达和创意编程的思想，对于 Processing 来说，上完这门课程你可以达到中级的使用水平，接下来需要的是多做案例，持续提升。

Q：课程能教到什么程度？

邱伟豪：市面上大部分的视觉创作分析拆解，找出解決方案，找出自己不足的地方，然后去网上搜索解決办法。假如能认真跟着课程学习，能到 Processing 中级水平，并能举一反三，继续学习其他语言。