第一篇 入门基础篇
第1章 Processing简介
Processing是一种开源编程语言,专门为电子艺术和视觉交互设计而创建,其目的是通过可视化的方式辅助编程教学,并在此基础之上表达数字创意。2001年,麻省理工学院(MIT)媒体实验室的Casey Reas和Benjamin Fry发起了此计划,其特定目标之一便是开发一个有效的工具,通过激励性的可视化反馈,帮助非程序员进行编程的入门学习。Processing语言建立在Java语言的基础之上,但使用简化的语法和图形编程模型。
Processing简单易用的特点,以及其丰富的拓展让学习者可以创造出很多富有想象力的作品。因为源自Java,所以大量的Java库都可以添加进来调用,比如Box2D、Unity等引擎都可以在开发时调用。除了强大的Java库,还可以结合Arduino,让图形化界面和硬件产生互动,添加Kinect或Xtion又可以识别人体的肢体动作并进行处理,这些丰富的拓展让Processing的作品充满了想象力。
1.1 初识环境
通过访问Processing官网www.Processing.org/download,可以下载Processing,请根据自己的操作系统,选择相应的Mac、Windows、Linux的版本。
相对于其他语言非常复杂的开发环境,Processing开发环境非常简洁明了,如图1-1所示。
Processing开发环境由代码编辑区、消息区域、控制台、管理文件的标签栏、常用指令按钮的工具栏和一排菜单构成。当程序运行时,会弹出一个新的窗口,称为显示窗口。
利用工具栏中的按钮可以实现以下功能。
图1-1 Processing开发界面
:用于完成程序的检查和编译,并运行程序。
:停止运行中的程序,但不关闭显示窗口。
:新建一个Processing程序。
:打开文件。
:保存当前的文件。
:将当前程序以Java插件嵌入HTML文件内导出。
:建立新的标签页,可以用于创建新的类。
用Processing编写的程序被称作草图(sketch),这些草图是在文本编辑器里完成的。每个草图有独立的文件夹,文件扩展名.pde代表此文件是由Processing开发环境创建的。
1.2 绘制第一个图形
Processing提供了很多默认的函数,用来绘制点、线、椭圆、矩形等。先来绘制一个简单的圆,ellipse(x, y, width, height)是椭圆绘制函数,前两个参数设置椭圆圆心的位置,第三个参数设置长轴,第四个参数设置短轴。当参数width和height相等时得到的就是正圆。
例如,以画面中心为原点画一个直径为100像素的圆,如图1-2所示。
示例:
1-1 ellipse(50,50,100,100);
1.3 绘制第一个动画
图1-2 圆
Processing的文本编辑框中默认会有两个函数:setup()和draw()。前者之中的内容只被执行一次,后者内容会被循环执行。如下例中,设置圆的半径为连续增大的值,在画板中连续绘画呈现的结果就是一个圆逐渐变大的动画效果,如图1-3所示。
示例:
1-2 int r = 0; void draw() { ellipse(50,50, r++, r++); }
图1-3 逐渐变大的圆
1.4 第一个交互
调用鼠标绘制一根直线,可以移动鼠标来进行交互,如图1-4所示。
示例:
1-3 void draw() { line(mouseX, mouseY,0,0); //绘制一条直线 }
图1-4 绘制直线
mouseX和mouseY是系统变量,也是鼠标所在的坐标位置,后面会详细说明。在绘画过程中,不消除原有的绘画留下的痕迹。此时如果想要消除原有的绘画痕迹,需要每次载入一个空白页面。只需加入一行代码即可,如图1-5所示。
图1-5 无痕迹绘图
示例:
1-4 void draw() { background(255); line(mouseX, mouseY,0,0); //直线 }
以上例子介绍了一些基础概念,并没有做详细解释,主要目的是让读者对Processing有初步的认识。接下来将引导读者从语言基础开始,结合简单图案绘制,循序渐进,再进阶到制作动画和交互。为了能得到最大的收获,需要读者尽可能多地上机编程操作,以快速掌握这门语言。