1 Processing
1.1 Processing简介
Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概念介绍给程序设计师。它是 Java 语言的延伸,并支持许多现有的 Java 语言架构,不过在语法 (syntax) 上简易许多,并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。目前最新版本为Processing 3。以 Processing 完成的作品可在个人本机端作用,或以Java Applets 的模式外输至网络上发布。
上面这段是粘贴百度百科的,哈哈!虽然说Processing是一种新兴语言,但我却不这么认为,什么原因呢?如果你了解Java,那你肯定会觉得processing的语法与Java几乎没有区别。从结构上讲,processing是支持全局变量,但是Java不支持,表面上看起来这点是Java和Processing之间的区别,其实不然,不信的话继续往下看。
2.2 Processing下载与安装
进入processing官方网站点这里:https://processing.org/。你也可以直接点击https://processing.org/download/链接进行下载。详情见下图:
图1.1 Processing官方网站 图1.2 Processing下载页面
选中No Donation单选按钮,单击Download跳转到下面页面。
图1.3 下载页面
选择符合你当前电脑系统的安装包进行下载,这里我选择的是Windows (64bit)版,从该页面也可以发现,Processing最新版已经是3.1.1了。
Processing的安装非常简单,双击刚刚下载的安装包,如下图所示,一路Next,直到结束安装就行了。
2.2 Processing语法介绍
双击桌面Processing快捷方式打开Processing开发环境(客户端)。如下图所示:
关于上述开发环境,目前你只需要知道下面信息就行了:
- 菜单栏下方是工具栏,目前这里有两个按钮,第一个按钮用于启动运行,第二个按钮用于强制终止执行
- 中间空白区域用于输入processing代码
- 空白区域下方的一行灰色区域用于输出错误信息
- 最下方黑色区域用于显示调试信息和程序输出
接下来我们尝试创建一个非常简单的Demo,主要用于讲解Processing的语法和组织结构。首先在中间空白区域输入下面代码:
int x1 = 10;
int y1 = 10;
int x2 = 100;
int y2 = 100;void setup () {
stroke(255);
size(200, 200);
}void draw () {
line(x1, y1, x2, y2);
}
完成之后单击File->Save菜单将项目保存到桌面,项目名称为Demo。接下来单击工具栏的运行按钮,稍等片刻,弹出如下窗口:
从代码和窗口都可以发现,我们在窗口上画一条白色的线。
接下来我们解释上述代码。正如我们前面说的,Processing是支持全局变量的。上述代码的x1,y1,x2,y2都是全局变量。setUp()和draw()方法都是Processing的预定义方法,每次程序启动时,setUp()方法都会被调用一次,所以这里是初始化程序配置的最佳位置。然而,程序运行期间将不断调用draw(),根据命名也可以想象的到,draw()方法用于绘制(渲染)图形。
stroke(int gray)和size(int w, int h)都是Processing为我们提供的配置方法。其中,stroke()用于设置绘制图形时线条的颜色,参数gray表示将要设置的灰度,取值范围应该位于0到255之间,gray等于0,意味着接下来绘制的线条以黑色显示;显而易见的,当gray等于255表示以白色绘制线条。size()方法用于设置窗口的尺寸,单位为像素。类似于上述两种配置方法,Processing还为我们提供了下面方法:
- stroke(int r, int g, int b):设置线条的RGB颜色
- stroke(int r, int g, int b, int a):设置线条的RGBA颜色
- fill(int gray):以灰度值设置图形的填充色
- fill(int r, int g, int b):设置图像的RGB填充色
- fill(int r, int g, int b, int a):设置图形的RGBA填充色
- noFill():设置不填充闭合区域(如矩形、椭圆)。
- noStroke():设置取消线条,即所有绘制的图形将不再包含边框。
- frameCount:表示当前帧的计数。
- radians(float angle):将角度转换为弧度。
接下来看一个更加复杂的实例: