|
|
Processing综述
本手册适用于Processing2.0及以上版本。如果您发现有任何错误或者有什么建议,请联系我们。本教程源自《Visualizing Data》,Ben Fry编写,Reilly出版社2007年出版
Processing是一门简单的编程环境,设计重点用来在动画方面的视觉导向应用程序开发,并通过交互为用户提供及时的反馈。开发者设想的是用代码来“草图”出想法。在过去的十年里,其功能得到了扩展,除了它本身的绘制草图角色,Processing已经被用于更为先进的生产级别的工作。原本是作为一个特定领域构建,现在已经扩展到了面向Java的艺术家和设计师,Processing已经发展成为一个成熟设计和原型设计工具,用于大规模安装工作、运动图形和复杂数据可视化。
Processing是基于Java语言的,但是由于它的程序单元相当简单,你可以学会使用它,哪怕你不懂任何Java语言。如果你对Java很熟练,最好暂时忘掉它,因为用Java在Processing上没用！除非你想知道应用程序界面(API)是怎么工作的。
最新版本的Processing可以在这儿下载：http://processing.org/download
这个项目的一个重大目标就是使这种编程风格能够让广大观众得到。因此,Processing是免费下载、免费使用并且开源的。使用Processing环境和代码库建立的项目可以用于任何目的。这种模式和GCC(GNU编译采集器)相同。GCC和与其关联的库(e.g.libc)在GNU公用许可证(GPL)上士开源的,GPL规定更改代码需要得到同意。然而,用GCC创建程序(例子有很多)本身是不需要开源的。
Processing包括：
- Processing开发环境(PDE)。这就是你双击Processing图标运行的软件。PDE是用极简主义思想特性设计得集成开发环境(IDE),作为一个编程的简单入门或者一次性想法的测试。
- 一堆函数(也称为命令或者数学表达式)主城程序编辑界面的“核心”,或者API,还有一些库——支持跟高级特性如网络发送数据、读取网络摄像头实时图像和用PDF格式保存复杂图像。
- 语法规则,和Java相仿但是做了一些修改。
- 积极的网上群体,建立在http://processing.org
- 因为这些原因,Processing的手册可能有些模糊不清。我们可以一起讨论API、开发环境或者是网页吗？我们会在这个文本中仔细的提及每一个。
用Processing画草图
一个Processing程序被称为草图。这个想法是为了让Java风格的设计感觉更像是脚本,并用脚本的方式快速编写代码。草图存在草图薄中,这个文件夹作为保存您项目的默认位置。存放在草图薄里面的草图可以从文件——草图薄读取。或者,文件——open……可以用来打开系统中任何位置的草图。
高级程序员不适用PDE,作为一个选择,反而选择它的库来作为Java环境的选择。然而,如果你才刚刚开始,建议你跟使用PDE来编写最初的几个项目,熟悉做事的方法。尽管Processing是基于Java的,但并不意味者就是作为JavaIDE的火车轮。为了更好地满足用户,概念模型(程序是怎么工作的,接口的建设和文件处理)与
Java有些不同。
Hello world
(PS我真的觉得这个不能翻译过来,尽管这个是非非常容易翻译的,但是有时最最不容易翻译的。)
Processing相当于“Hello World”程序的是非常简单的画一条线：
[pre lang="processing" line="1"]line(15,25,70,,9);[/code]
输入这个程序并按下运行按钮,运行按钮就是看起来像任何视屏或音频设备播放按钮的图标。你的代码就会出现在一个新的窗口,灰色的背景和从坐标(15,25)到(70,90)的黑线。坐标(0,0)是显示窗口的左手上方。写个程序来改变显示窗口大小并设置背景色,输入以下代码：
[pre lang="processing" line="1"]size(400,400);
background(192,64,0);
stroke(255);
line(150,25,270,350)[/code]
这个版本设置窗口大小为400×400像素,设置背景色为橙红,画一条白色的线,设置描边色为255。默认规定颜色范围在0到255之间。stroke()函数参数变化有不同结果：
[pre lang="processing" line="1"]stroke(255); //设置描边色为白色
stroke(255,255,255); //同上
stroke(255,128,0) //橙黄(红255,绿128,蓝0)
stroke(#FF8000); //橙红网络色
stroke(255,128,0,128); //橙红,50%透明度[/code]
fill()函数同前面一样,设置填充颜色,background()函数,用来其管理显示窗口(PS有点晕)。如同其他Processing函数填满整个绘图内容一样,填充和描边色渲染屏幕上的所有几何体知道下一个填充和描边色函数。
Hello mouse(PS就是讲鼠标的啦！)
编写来作为语句列表的程序(如前面例子)被称为静态草图。在金塔草图中,一系列的功能是用来执行任务或者创建没有任何动画或者交互功能的单一图像。交互式程序被画为多帧框架图像,你可以通过增加名为setup()和draw()函数创建它,如下代码所示。这些都是被称为机械化的内置函数。
[pre lang="processing" line="1"]void setup(){
size(400,400);
stroke(255);
background(192,64,0);
}
void draw(){
line(150,25,mouseX,mouseY);
}[/code]
setup()板块只运行一次,draw()板块反复运行。这样setup()可用作任何初始化;同样的,设置屏幕大小,让背景为橙色,设置描边色为白色。draw()板块用作处理动画。size()函数在setup()内必须在首行。
因为background()函数只是用了一次,随着鼠标的移动屏幕将虫棉线条。为了跟随鼠标画一条单线,将background()函数移动到draw()函数,这将在每次draw()运行后清理显示窗口(用橙色填满它)。
[pre lang="processing" line="1"]void setup(){
size(400,400);
stroke(255);
}
void draw(){
background(192,64,0);
line(150,25,mouseX,mouseY);
}[/code]
静态程序通常使用非常简单的例子,或者以线性方式运行脚本然后退出。例如,一个静态程序开始i后,为一个PDF文件画一页,然后退出。
大多数程序都使用setup()和draw()模块。也可以引入更高级的鼠标处理,例如mousePressed()函数在任何时候鼠标按下时使用。在接下来的例子中,当鼠标按下,屏幕将会通过background()函数清理：
[pre lang="processing" line="1"]void setup(){
size(400,400);
stroke(255);
}
void draw(){
line(150,25,mouseX,mouseY);
}
void mousePressed(){
background(192,64,0);
}[/code]
输出和分布你的作品
Processing环境的一个重要的特性就是能够将你的草图打包并应用,只需要点击一下。选择文件——输出应用打包你现有的草图做为应用程序。这将打包你的草图作为Windows、Mac OS X或者Linux的应用程序。应用程序文件夹将会在每次你输出后覆盖——在修改文件加内容之前要从草图文件复制或者移动它们。或者,你可以在参数设置中关闭自动文件查出功能。
更多输出特性可以在手册中找到：http://processing.org/reference/environment/#Export
从你的作品中创建图像
如果你不想发布实际项目,你可以创建一个输出图像来代替。图像由saveFrame()函数保存。在draw()的结尾处添加一个saveFrame()将会产生一系列的TIFF格式的程序输出图片,从scree-0001.tif、scree-0002.tif……开始命名。每次draw()运行后将保存一个新的文件——小心,它将很快的用数以百计的文件撑满你的草图文件夹。你也可以用特殊名称和文件格式白保存,函数格式是：
saveFrame(”output.png”)
同样可以设置序列,使用#(斜条)来代替要用序列的地方：
saveFrame(”output-###.png”);
为了高质量输出,可以绘制PDF文件的几何体来代替屏幕,就像size()函数的第二屏幕上绘制一样。
例子和说明
诚然很多程序员在学校里学习代码,有其他人教或者自己学习。自己所需要的学习需要看很多其他的代码：运行、更改、打破和增强代码,知道你将其重塑成新的东西。鉴于这个学习模式,Processing软件下载了数以百计的展示编程环境和API的不同特性的例子。
例子可以通过文件——例子菜单打开。他们按照函数功能分类(如运动、排版和图像)或者使用的库分类(如PDF、网络和视频)。
根据你对列表项目的兴趣尝试一个例子。你会发现这些函数非常熟悉,e.g.stroke(),line(),和background(),还有其他没有包含在内的函数。想要知道函数是怎么工作的话,选择函数名,右击并在快捷菜单的手册中选择查询(在帮助菜单下面同样可以找到手册中的查询)。然后就会在你的默认浏览器打开手册中的这个函数部分。
为增强对函数语法的说明,每个手册页面包括一个使用该函数的例子。手册中的例子都尽可能的短(常常是四到五行)比长代码例子更容易上路。
更多关于size()
size()函数设置全局变量宽和高。物体的宽高取决于屏幕,通常使用常和宽变量来代替数字。这样预防size()行的改变。
[pre lang="processing" line="1"]size(400,400);
//指定屏幕中间的错误方式
ellipse(200,200,50,50);
//通常中间是不随size()行改变的
ellipse(width/2,height/2,50,50);[/code]
在以前的例子中,创建size()函数只是窗口的宽和高。size()函数的一个可选参数指定如何渲染图形。Processing API的渲染处理是用一个特别的输出函数来实现的(不管是什么屏幕、高端图形卡驱动屏幕屏幕还是PDF文件)。默认渲染器有着高质量的2D向量图形,已经做得很好了,但是是以速度为代价。特别是直接使用像素比较缓慢。Processing包含的其他几个渲染器各自有着独特的功能。冒着可能会太深入细节的危险,介绍Processing使用中可能会用到的其他几个绘图模式。
size(400,400,P2D);
为了使用Processing简单图形APIs和Processing开发环境能够更容易的导出应用程序,P2D渲染器为二维图形快速渲染使用了OpenGL。
size(400,400,P3D);
为得到更快的渲染P3D渲染器同样使用了OpenGL。它可以绘制空间三维、二维项目,包括亮度、质地和材料。
size(400,400,PDF,”output.pdf”);
PDF渲染器可以绘制所有的几何图形到文件代替屏幕。为了使用PDF,不仅要改变size()函数,而且还要选择输入库,然后PDF才会出现在草图菜单。这是默认渲染器的亲戚(鬼佬也会关系到位啊！),但是代替了直接写到PDF文件。
加载和显示数据
Processing API的一个独特方面就是发送和处理方式。loadImage()函数和loadStrings()函数都期望在数据文件夹中找到相应的文件,这个文件是草图文件夹中的子目录。
高级主题：数据文件夹笔记
当处理代码的时候数据文件夹地址同时变化,这是在本地测试但是在网络部署的。如同Java,用Processing写的软件收到安全规则的限制,安全规则决定一个程序怎么访问资源,例如本地硬盘或者网络连接的其他服务器。这样可以防止开发人员编写可能会损害您电脑或破坏数据的恶意代码。
在开发阶段安全限制很难起作用。当在本地运行软件的时候,可以直接从硬盘读取数据,尽管这些数据必须放在用户相应的“工作目录”中,通常是应用程序所在位置。当在网络上运行时,数据必须来自于同一台服务器的同一个位置。数据也有可能附在代码本身(在一个JAR文档,稍后将讨论,或者来自于同一个服务器的另一个URL)。对于本地文件,Java的FileInputStream类可以被使用。如果文件是捆绑在JAR存档,就会使用getResource()函数。对于服务器上的文件,会使用URL.openStream()。从开发到部署整个过程,他可能需要哦使用这单个函数。
使用Processing,每一个脚本(和其他东东)都会由API函数文件透明地处理。通过在数据文件夹放置资源,Processing将会根据在线或者离线使用的必要打包文件。
文件处理函数包括loadStrings(),该函数读取文本文件转换为字符串对象组;loadImage(),该函数读取图片并转换为PImage对象,Pimage为Processing中的图像数据容器。
[pre lang="processing" line="1"]//加载文本文件和JPED图像的例子
//从草图数据文件夹中。
String[ ] lines = loadStrings(”something.txt”);
PImage image = loadImage(”picture.jpg”);[/code]
如果你知道编程中的数据格式和类型概念,这个例子就比较容易读懂。每个变量都必须有一个数据类型,例如String型或者PImage型。
String[ ]语法的意思是“String类型的一个数组数据”。这个数组由loadStrings函数创建,可以在同一行对其命名;这个名字可能在后面的程序中使用。loadStrings创建数组是因为某个.txt文件被当做单独一行。PImage函数将以图像名称创建一个单独的变量。
为了增加一个文件到Processing草图中的数据文件夹中,使用草图——添加文件菜单选项,或者拖动到PDF的编辑窗口。如果文件夹不存在的话,会创建它。
访问草图文件夹内容,可通过草图——显示草图文件菜单选项。这将在你炒作系统的文件浏览器中打开草图窗口。
添加新特性的库
库就是一种指定格式的一组代码,这使得Processing能够很容易的使用它。库对项目的发展非常重要,因为它可以让开发者为用户提供新的功能,而不需要去做Processing API的核心部分。
来自Processing的几个核心库,可以在在线手册中的图书馆部分看到(PDE的帮助菜单中也有。)。这些库可以在这儿看到：http://processing.org/reference/libraries/
一个例子就是关于PDF导出的库。这个库使得直接从Processing写PDF文件成为可能。这些向量图形文件可以扩展到任意尺寸,并且以非常发哦的分辨率输出。
在项目中使用PDF库,选择草图——输入库——pdf。这将在草图顶端增加一行：
import processing.pdf.*;
Java编程者认识import命令。在Processing中,这行代码同样用作在输出支程序或者应用程序时确认哪些代码将被打包在草图中。
现在了解了PDF库的重要,你可以使用它创建一个文件。例如,下面一行代码创建一个新的PDF文件并命名为lines.pdf,你可以在上面绘图。
beginRecord(PDF,”lines.pdf”);
每个绘图函数如line()和ellipse()都将同时在屏幕和PDF上绘图。
其他库提供功能如读取摄像机图像、发送接收MIDO和OSC的命令、复杂的3D摄像机控制和访问MySQL数据库等。
草图和脚本
Processing的草图由一个或多个标签组成,每个标签表示一段代码。环境是围绕项目设计的,项目通常有几页代码,通常三到五页。这些代码涵盖了大量的项目开发测试和原型想法,经常为更广泛的部署将这些嵌入更大的项目中或者建造更强悍的应用程序。
草图的想法和脚本相同,除了你不能插入解释型脚本语言,但是比起Java类型文件获得了更好的编译性能。当然,严格的说,Java本身就是一种解释型语言,但是比起JavaScript、Python或者Ruby语言它的字节编译使它更接近“机器”。
Processing从未打算作为视觉编程的最终语言,相反,我们开始做一些：
一个为我们工作的草稿本,捡回了许多本该我们承担的任务。
用以教导非传统观众编程的编程环境。
给许多复杂或者不同语言,如成熟的Lava或者C++,做一块脚本语言垫脚石。
着这些点交汇处会有一个速度和简易度权衡点。如果我们不关心速度,使用Python、Ruby或者其他脚本语言更明智些。这在教育方面很正确。如果我们不关心过度到更高级的语言,我们应该避免C++或者Java风格的语法。但是Java为草图语言做了一个很好的起点,应为它比C/C++更兼容,并且咏絮用户通过网络发布输出草图。Processing集合了我们再建设软件方面的经验(草图的交互式工作或可视化数据驱动),并简化了我们觉得应该更简单点的部分,比如快速入门、杜绝新用户那些个Java方面与设置有关的问题。
不要试图从建立一个大家伙开始
如果你已经熟悉编程了,就需要重点去了解Processing和其他开发环境不同的地方。Processing鼓励快速构件代码的工作作风,明白要么代码用作快速草图,要么想法在建立好最后一个项目前测试。这可能会被误认为异端软件工程师。也许我们离“黑客”不远,但这更适合于Processing被使用的角色。为什么要迫使学生或临时程序员在屏幕上用鼠标做交互式的显示一些东西之前学习图形环境、县城和事件处理函数？同样的对于高级开发人员：无论他们开始什么项目,都需要从同样的两页代码开始？
另一场景,快速尝试事物的能力比复杂代码结构更高级别。通常你不知道结果是什么,因此你会为一个初始假说花一个星期来建造一些东西,然后再接下来的一个星期在前一个星期的基础上建造一些新的东西。为此,在你开始用Processing书写代码之前请记住以下事项：
- 在你的代码中对于建造不必要的结构小心点。当你知道怎么把你的代码封装成类后,很容易搞一个更小的类,应为数据通常都可以细化。你需要学习分子、原子或者夸克级别吗？仅仅应为原子更小并不意味着我们需要工作在一个抽象的低级别。如果类是半页,是否意味着有六个额外的每个长达半页的子类？同样的事情可以用总共只有一页半的简单类完成吗？
- 考虑项目的规模。第一天没必要构造企业级的软件。探索首要：找出必要的最低代码帮助回答你的问题和满足你的好奇心。
- 这个不是为了避免不断的改写,而是推迟工程工作知道它合适。一个软件的开始工程门槛是比传统的编程项目更晚,应为这是一种艺术的快速迭代过程早期。(PS：没搞明白！)
当然,一旦事情开始,为了自身利益应避免冲动的重写。当处理一个完全不同的问题时应该重来。如果你不能一针见血的搞定,你就应该重新清理函数名称和交互类型。但是完全重来一个差不多就要搞定的代码总是一个坏主意,不管这个代码有多丑。
|
|
发表于 2012-11-3 21:15:45
