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

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

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

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

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

 
 

 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 在不同地区用户的活跃以及使用时间等。
 

02

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

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

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

 

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

 

 
Flight Patterns,数据可视化全球飞机的飞行路线和时间,人工是做不到这种多量次的数据运算的。

 

 
跨界能力:从编程的角度来看,媒介之间的界限几乎不存在图像、声音、文字、机械运动都可以统一看作是数据。创意编程创作,归根结底是数据的提取、计算与再现。

 

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

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

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

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


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


03

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

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

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

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

 

同一组数据,有多少种视觉表达?

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 轴运动,这也是案例所呈现的基本视觉效果:

 

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

 

04

关于创作、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 中级水平,并能举一反三,继续学习其他语言。

 

 
Spindle,邱伟豪,数据可视化作品
 

 

编辑:关

未经授权 请勿转载(不免费授权)

欢迎指正和投稿:media@zuibishe.com