Processing计算机语言及其程序设计思维在创意设计中的应用

李柳君

(温州商学院艺术与设计学院，浙江 温州 325035)

Processing计算机语言及其程序设计思维在创意设计中的应用

李柳君

(温州商学院艺术与设计学院，浙江 温州 325035)

目前国内的创意编程教学和科研方兴未艾，授课的对象是数字媒体专业的学生。processing是一款适于图形与动画设计的开源性编程语言和开发平台，通过对processing的教学和研究，使我们更直观地了解互动艺术的学习和创作。从创意设计教学科研的角度出发，适当进行实际案例实现的技术性分析，将重点放在程序设计思维的整理构思和提炼，后期理论运用于实践创作，设计出创意丰富的互动媒体案例。

Processing；创意设计；创意编程；声音可视化

1 Processing：一款开源的编程语言

Processing是一款开源编程语言和环境，由美国麻省理工学院媒体实验室( M.I.T.Media Laboratory)的Casey Reas与Ben Fry创立的一个专为设计师和艺术类学生学习和使用的编程开发语言，有为图像、动画交互使用这个开放源代码的效用。这是一门新兴的比较有发展前景的计算机程序语言，通过长期的研究不难发现Processing原本就是Java语言的衍生语言，当然也可以把它叫做P语言。那其他的开发软件，如Openframework是基于C语言开发的图形编程语言。

Processing 是一个免费的程序开发平台，采用的是开源的编程语言，专门为电子交互设计和数字媒体艺术而创建发明的，Processing不但是非常优秀的可视化编程语言和开发环境，而且是使用开源技术实现的优秀的案例之一。作为一种源代码可以任意获取计算机程序语言，并允许用户学习、修改、提高这款程序的质量，免费下载和使用，甚至可以修改Processing源码，使它适合你的需求。可以通过网站来分享你的项目和知识。例如：www.openprocessing.com。开源的另外一个重要的特征就是有相关开发的库（library），这是新的概念。Processing 的语法规则是从Java的基础上发展过来的，但使用了相对简化的语法和规则，并在此基础上增加了图形和交互的特征，整合各种音频视频文件，因此这些库大多以Java语言作为开发基础。可以调用大量的Java的库（library）。如OpenGL、OpenAL、OpenCV、Minim、OpenKinect、Arduino、sound、video、keystone、oscP5……

Processing 不但可被科学家用来实现数据可视化，也可以被设计师、艺术家和那些对学习编程和可视化设计的人来使用和开发。由于文化和语言的不同，国内从事研究Processing程序开发的人并不多，目前国内高等院校已经开设Processing相关创意编程的课程也并不多。但是，在互动媒体艺术和数字媒体产业迅速发展的今天，进行创意编程课程的教学和研究，让对编程感兴趣的艺术学院的学生也能动手编写代码来实现自己的图形创意，是非常具有现实意义的一件大事，值得为之去探索和研究。

2 Processing是创意编程的开发与教学利器

创意编程是在创造性的活动中学习电脑程序设计，充分利用电脑程序构建虚拟世界，在充分启发和引导下，在解决问题的过程中，主动探索式地学习编程，这也是数字媒体艺术发展到今天的必然的产物。那么，什么是数字媒体？The list reduces all principles of new media to five: numerical repersentation, modularity, automation,variablity and cultural transcoding。［1］”Lev Manovich 的著作《The Language of New Media》定义了数字媒体艺术。简单地理解就是数字媒体必须有模块化、自动化、可变性、数据化和可编码性。而这些正是创意编程的重要特点。

在数字媒体艺术中主要相关的交互图形技术包括：计算机监控技术、语音交互技术、手写识别技术、虚拟现实技术、计算机视觉技术、多通道人机交互技术等等。对于计算机视觉来说，“科学研究表明，人类80%的信息是通过视觉获得的。让计算机有类似于人类的视觉功能成为了众多科学家的梦想，这个梦想正在逐步实现。目前的计算机视觉主要是采用摄像机代替人眼，计算机代替人。［2］”多通道人机交互技术的特点是：使用多个感觉和应用通道、在三维空间内直接操作、允许非精确的交互、交互具有双向性、交互的隐含性。［3］”笔者认为，在创意编程的教学中，其学习方法是通过创造一个个互动图形的案例程序来学习编程互动编程的新方法，并在编程的基础上表达数字创意图形。而Processing是对图形设计师最方便的代码编程开发平台。不管你是学生、老师、设计师或交互设计师，利用Processing就能用最简单直接的方式创造互动图形，最直接的视觉形式让你的想法通过P语言的编程实现，简单易学，扩展库非常多，在2017编程语言排行榜上位列第23。而且，你可以通过Processing与其他开发平台以及扩展的硬件的创作、输出、整合属于你自己的互动图形作品。

3 Processing在创意设计中应用的程序设计思维

3.1 互动图形

通过学习Processing，学生不需要系统地学习编程语法知识，也不需要高等级的英语水平，便可通过几行代码创作出唯美的数字图形以及图形交互的作品。通过具体的代码案例，仅仅写几行代码，就能制作出跟随鼠标画线的互动图形作品来（图1）。用鼠标在画布中实时变换的x，y轴的值，来实时地改变画布中线条的长度和位置的变化。

图1 互动图形

当然Processing也支持3D渲染器。Processing渲染器是以默认2D模式运行，如果要在processing里使用3D渲染器，就需要在size函数中的第3个参数位置指定大写的渲染器名称，如：size(800,600,P3D);在通常人的眼里，编程技术是理工科的专业，被认为是枯燥乏味的编写代码的过程。

Processing的诞生，可以被视为艺术设计领域图形创作的一场重大的变革。利用Processing设计师可以将抽象的代码数字转化为生动的且有动态效果的视觉图形。它不仅可以生成唯美的数据图形，还能编写出功能强大的图形互动艺术作品。

3.2 数字的设计

“数字的设计”（Design By Numbers），通过代码数字来设计是Processing特有的设计方式。其主导的核心思想是通过编写一行代码，就会在计算机屏幕上添加一个相应生成的数字图形，再增加几行数字代码并结合鼠标响应的图形函数，实时生成图形就能根据鼠标的移动发生相应的图形变化。通过Processing编写的这些代码保存后，会生成草稿（Sketch）文件，文件格式为.pde。Processing的创建者一致认为，（Sketching）也就是草稿化是一种新型图形创作的方法，方便而且快捷，可以让设计师在很短时间内探索出更多的图形创意和解决方案。“草稿”一词的含义所强调的就是让设计师或开发者能体会把计算机的显示屏幕当作画布来创作，就像我们在油画布上作画一样。这也让编程成为一种新的艺术表现形式。

“同样在今天，完全强调艺术品的展示价值，成为一种对艺术品全新功能的创造。”“类似这种状况，那时强调它的崇拜的绝对价值，它首先是一种宗教神示，只是到后来才被视为艺术品。[4]”《机械复制时代的艺术》这段话说明的是摄影艺术之所以可以成为艺术品的根本原因。我觉得同样也适用于计算机生成的图形。

3.3 简化的代码，并且能实现强大的图形功能

Processing的语法是在Java语言的基础上发展而来的，支持当前的Java语言基础框架，不过在语法基础结构上进行了简化，并具有许多更符合图像开发的设计改造。如基本的绘图函数、填充颜色的函数、鼠标交互的函数、声音函数、图像函数、视频处理函数等。

Processing也支持3D图形的渲染，有P3D渲染器和OpenGL渲染器。Processing默认情况下以2D模渲染器下运行，如果需要使用3D渲染器，则需要在size（）函数中的第三个参数位置指定渲染模式，如size（w，h，P3D）或者size（w，h，P2D）。P3D是Processing内置的3D动画渲染器，而P2D则以2D图形渲染的形式存在。

在size()中增加一个变量如下

size(400, 400, P2D);这是普通2D渲染模式

size(400, 400, P3D);这是3D的渲染引擎模式

size(400, 400, PDF, "output.pdf");这是导出PDF格式的文件。

这两个指令的区别：P3D还可以调整画面明亮度（lighting）,质感（texture）,材质（materials）等。

“library”库的形式是Processing独有的，扩展和实现Processing本身其他方面的功能。除Processing自身的基本库以外，还有将近200个非官方的扩展库在Processing上的library的链接里下载安装。这些扩展库使Processing在音频、图形、视频、kinect、网络和pdf等在硬件和软件开发的功能，甚至进入到了计算机视觉图形、AR和VR等研究领域。下载和导入这些库，就在Processing能够实现读写更多种类的数据信息和处理。

3.4 与Arduino的互动

Arduino是开源电子硬件平台，与Processing是相关的开发项目，二者有着相关联的编程开发环境和相类似的程序语法结构。在Processing的开发环境中，范例程序提供了一些和Arduino通讯相关的互动图形案例。Processing可以通过读取Arduino的传感器数据，然后把这些采集的数据实时地绘制在计算机屏幕上。这种计算机的信息数据通信不仅是相互关联的，也可以用Processing程序创建的图形界面作为操控界面，控制灯光、扬声器、摄像头、led、机电等设备。当然，其他支持串行通讯的硬件设备也都可以和Processing来实现互动图形互动开发的效果。

Processing还有更多程序的开发优势。如，其支持手机app的开发，同样的程序文件可以输出不同类型的文件格式，在不同硬件设备和开发环境中运行。而且正是因为开源而拥有大量的免费资源，也是Processing最重要的开发优势之一。

3.5 声音可视化

图2 音频文件的可视化

声音可视化，是指一种以视觉为核心，以音乐数据文件为载体，将音乐的数据文件转化成实时变换的动态图形的研究。将纯粹的声音数字数据转化为图像的可视化的图形研究，这是Processing特有的强项之一。下面的案例就是把一首MP3格式的音频文件，通过Processing的程序进行图形的可视化研究。

图3 3D图形

3.6 3D 图形

Processing有非常强大的实时三维渲染功能，我们通过了解 Processing 所提供的 3D渲染器，将2维的平面图形扩展到第三维。通常一个简单的 3D程序，它使用sphere函数在绘图窗口中创建一个三维的对象。顾名思义，sphere函数会在显示画面中创建一个球体。只需要给sphere指定一个参数大小就能够创建球体（图3）。通过spheredDetail()函数来设置球体表面的三角形面数，在这个案例中设置了mouseX/100的参数通过鼠标的x轴实时变化的数值来控制球体表面的三角形面数。当然,也可以添加新的旋转rotate函数,这些函数允许您按一个指定方向的轴旋转。rotateX围绕x轴旋转，rotateY围绕x轴旋转。旋转的参数可以由特定轴上鼠标位置来进行互动。在这个案例中先读取鼠标x轴的数值，然后通过除100.0的浮点数，来实现鼠标的交互。而Processing也提供了其他的一组函数，它们可以简化这个编码的操作。这里先通过另一个3D对象创建方法来演示其中一个sphere函数，与box函数相似，也可以使用box函数在显示窗口中创建一个 3D立方体。box的参数表示了立方体的长宽高。

我们也可以通过pointLight的函数来创建一个光源，这个光源是由 pointLight 的6个参数来设定的。例如：pointLight(51, 102, 126, 35, 40,36);前3个参数定义了光线的颜色，后面3个参数定义的位置。directionalLight 函数支持将光线聚焦到一个特定方向上，并支持更多基于光线方向和角度变化的自然光。其他的函数如spotLight 函数可以更多地控制聚光灯。例如：除了光线颜色、位置和方向，还能够控制 spotlight 锥体离心值和锥角。Processing 提供了更复杂的使用顶点创建对象的方法。形状可以用这种方法创建，并能够对它们进行修改。

4 Processing在创意编程教学过程中的应用

尽管整个课程只有48课时，但是学生每次课程都能用一天多的时间就做出了很棒的图形作品。提到Processing就不能不提一下Processing与其他软硬件的互动。了解这些，对于新媒体艺术的创作大有裨益。

学习Processing 的途径：

在第一次课程里，我们会介绍常用的绘图函数程序的基本结构，例如size()。

size()函数决定的是整个程序的画布大小，而画布中的图形（比如说前面距离的斜线）应该在画面的哪个具体的位置。通常都会用常用的变量来代替具体的数字。因为画布的大小有的时候因为屏幕宽度有着不同显现效果。

例如错误范例：

size(800, 800);

ellipse(400, 400, 100, 100);

如果按这样输入代码指令，那么当size函数里的参数值产生变化的时候，ellipse(圆）还是在长度400宽度400的座标位置，就不再保持在画框的正中央位置了。

正确范例：

size(800, 800);

ellipse(width/2, height/2, 100, 100);

这样的代码指令，ellipse（圆）的位置就会永远在画框正中央位置。

5 结语

在国内的各大院校里很多人都把Processing当作一个软件来看，其实它是一种编程语言，只是它的开发环境也叫Processing。理论上来说可以用这样的语言来做任何事情，如：数据可视化、音乐可视化、3D动画、手机程序开发、网页开发等等。Processing是一个最新的计算机科学与艺术跨界的产物，这也是值得我们继续去研究和探索的价值所在。

[1] Lev Manovich.The Language of New Media [M].MIT Press，2002.

[2] 林迅.新媒体艺术[M].上海：上海交通大学出版社，2011.

[3] 同济新媒体艺术国际中心.大型展示中的新媒体艺术[M].上海：同济大学出版社，2010.

[4] 瓦尔特·本雅明.机械复制时代的艺术[M].李伟，郭东,译.重庆:重庆出版社,2006.

李柳君（1983-），男，温州商学院艺术与设计学院助教，硕士研究生。E-mail:676621918@qq.com

2017-06-28