Oh!Coder

Coding Life

有趣的Processing-Hello, World!

| Comments

Hello!从今天开始,我们将一起学习Processing!上一次,我们一起大概了解了一下Processing的过去,现状以及未来。今天呢,我们将先从了解她的编程环境开始,做出Processing的第一个“Hello, World”!

学习环境

Processing在2015年更新到了最新的3.0版,相较于过去的版本,这次的更新还是蛮大的。当前官方提供的工具,主要分为桌面版和Web版,从编程框架上来讲,之间非常相似,也就是说,学会了桌面版,再去学Web版,容易许多。桌面版开发出来的软件,利用官方提供的开发工具,可以很容易部署到Linux,Mac OS X以及Windows平台。既然如此,前期我们的学习,就以桌面版为主,不管你当前用的是哪种操作系统,都能满足你基本学习的需求。

了解工具

好,下面我们来具体了解一下官方为我们提供的开发工具。Processing的开发工具,官方用缩写PDE(Processing Development Environment)表示,此工具是用Java开发,并且是开源项目,有兴趣的朋友可以到他们的Github账户下下载,也可以到他们的官方网站下载已经发布的稳定版

下载下来之后,需要根据你所使用的操作系统,依照正常的安装步骤进行安装。安装步骤都比较容易,这里就不再阐述,官方也有一段简短的安装说明

安装完成之后,新建一个项目窗口,大概长成这个样子。

processing-new-window

图片来源:Processing新项目窗口

如果想对窗口做一些自定义设置,比如代码的字体,颜色等等,Processing也提供了相应的设置。由于不同操作系统下,设置选项的位置不同,这里就不做过多的介绍,设置相对来说也比较容易。

第一个“Hello, World!”

下面我们要写出第一个“Hello, World!”。

1
2
3
4
5
6
7
8
9
10
// 程序的初始化,
// 此方法只在每次程序运行时调用一次。
void setup(){

}
// 程序开始后,
// 无限次循环调用此方法
void draw(){

}

上述代码这是一个基本框架,其中没有添加任何操作。

processing-window-menu

图片来源:Processing新项目窗口中的菜单栏

点击上图中最左侧的三角图标的按钮,执行程序。会蹦出一个背景为灰色的小窗口,如下图所示。要想停止程序,只需点击三角图标右侧的正方形图标,即可退出程序运行。菜单栏中的最右侧是一个看起来像小虫子的图标,点击它可进行调试,具体学习实例的时候,我们会穿插介绍。

init-window

图片来源:初始化运行的空窗口

上面代码中展示的两个方法,都会在程序运行过程中,被系统调用,其中setup()方法被调用一次,draw()方法被无限循环调用,直到程序退出为止。在以后的学习中,大多数情况下,我们都会以上述程序框架为基础,向其中添加一些代码,来达到我们想要的效果。

说到这儿,我们还没有输出我们的“Hello, World!”。下面就让我们向其中添加几行代码,完成我们今天的“Hello, World!”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 程序的初始化,
// 此方法只在每次程序运行时调用一次。
void setup(){
  // 初始化窗口的大小,
  // 此处为500*500。
  size(500, 500);
}
// 程序开始后,
// 无限次循环调用此方法
void draw(){
  // 画线。
  // 四个参数,前两个是第一个点的(x, y)坐标,
  // 后两个点是第二个点的(x, y)坐标。
  line(0, 0, 500, 500);
}

按照官方文档所说,画一条线就算是Processing世界的“Hello, World!”啦!嘻嘻!此处,我们利用line()方法,画了一条线,点击菜单栏中三角形的图标,运行程序,会看到一个灰色背景的窗口,大小为500*500,从左上角到右下角,一条黑色的斜线穿过。Processing对于坐标系的规定是,窗口的左上角为坐标的(0, 0)点,右下角为窗口的最大坐标点,此处为(500, 500),也就是说,整个坐标系的原点为窗口的左上角,y轴正方向指向下方,x轴的正方向指向右侧。

在此例中,会看到一条黑色斜线把窗口分成了两半儿!如下图所示

processing-fun-helloworld

图片来源:Processing的“Hello, World!”

总结

通过这次学习,我们了解了Processing的开发工具,最基本的程序框架,以及二维图形中的坐标系,为什么此处要特意指出是二维图形呢?因为Processing可以基于OpenGL画3D图形,随着不断的学习,这个以后我们会介绍。还利用line()方法画出了一条直线,它代表了Processing世界里的“Hello, World!”。

下期预告

只画一条直线是不是太简单啦?下一次,看我们如何用Processing画其他基本图形!

Comments