Oh!Coder

Coding Life

有趣的Processing-基本图形

| Comments

Hello!在上一次的学习中,我们了解了Processing的基本编程框架,在此基础之上,我们完成了最基本的“Hello, World!”之旅。除了编程框架,我们还了解了Processing的2D坐标系统。对于在2D范围内进行画图有了基本的概念。这一次,我们将更进一步,来看看在Processing中,2D图形的点,直线,矩形以及椭圆是如何画出来的。

起始点

上一次,我们在完成“Hello, World!”的时候,讲到了坐标系。而在具体画图的时候,每个图形自身会有一个起始点(也有称为锚点的)。起始点对于普通的圆点和直线来说没有太大意义,而对于矩形和椭圆来说,会有一些区别。下面举例说明。

在Processing中,不管是矩形还是椭圆,起始点分为两种,一种是以左上角开始,另一种是以中心为开始。下图说明了矩形以左上角为起始点的例子。

rect-corner

图片来源:Processing官网

接下来的这张图,展示了在矩形中,以中心为起始点的例子。

rect-center

图片来源:Processing官网

上面的两张示例图中,用到了两个方法,rectMode()rect()。其中,rectMode()方法的用处就是设定起始点,rectMode(CENTER)指定了起始点在矩形的中心处,rectMode(CORNER)指定了起始点在矩形的左上角。rect()方法用来画出矩形,其中有四个参数,前两个参数x和y就是指定图形的起始点坐标,后两个参数width和height,是以x,y为参照点来设置矩形的宽和高。如果矩形的起始点是图形自身左上角,那么width和height就以图形的左上角为原点,设置图形的宽和高。如果矩形的起始点是图形自身的中心点,那么起始点的坐标值,就是width/2和heith/2,均分矩形的宽和高。同理,对于椭圆的设置也是如此。

ellipse-center

图片来源:Processing官网

上图中,展示了椭圆把起始点定在中心的示例。

ellipse-corner

图片来源:Processing官网

同样的,上图中展示了椭圆把起始点定在左上角的示例。

与矩形类似,示例中也用到了两个方法,ellipseMode()ellipse()。其中ellipseMode()方法的用处就是设定起始点,ellipseMode(CENTER)指定了起始点在椭圆的中心处,ellipseMode(CORNER)指定了起始点在椭圆的左上角。方法ellipse()用来画椭圆,其中有四个参数,前两个参数x和y是指定起始点的坐标,后两个参数width和height,是以x,y为参照点来设置椭圆的长轴和短轴。起始点的设定与矩形类似,如果起始点设定为左上角,长轴和短轴以左上角为起始点画图。如果起始点设定为中心,则起始点均分椭圆的长轴和短轴。

对于点和直线,则不需要考虑起始点的问题。

画图

讲了一大堆的理论。接下来,我们看看用代码如何将它们画出来吧!

首先,打开Processing 3的编辑器,打开之后,默认会新建一个项目窗口。如下图所示。

processing-new-window

图片来源:Processing新项目窗口

然后,将下面的代码添加进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup(){
    // 设定窗口的大小为500*500
    size(500, 500);
    // 设定窗口的背景色为白色
    background(255, 255, 255);
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
    // 画点。
    point(150, 100);
    // 画线。
    // 第一个点的坐标为(300, 100),
    // 第二个点的坐标为(400, 100)。
    line(300, 100, 400, 100);
    // 将矩形的起始点设为中心。
    rectMode(CENTER);
    // 画矩形。
    // 起始点坐标为(150, 300),
    // 宽和高都为100。
    rect(150, 300, 100, 100);
    // 将椭圆的起始点设为中心。
    ellipseMode(CENTER);
    // 画椭圆。
    // 起始点坐标为(350, 300),
    // 长轴为100,短轴为150。
    ellipse(350, 300, 100, 150);
}

添加完成之后,点击新建项目窗口中菜单栏里三角图标,进行编译运行。

processing-window-menu

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

如果一切顺利,会弹出一个新窗口。窗口的背景色为白色,里面可以看到有四个图形,左上为点,右上为线,左下为矩形,右下为椭圆。如下图所示。

processing-fun-shapes

图片来源:Processing程序执行结果

至此,整个示例讲解完成,最终效果如上图所示。

总结

这次,我们学习了如何用processing画基本的图形,包括点,线,矩形和椭圆,当然,椭圆的特殊情况,就是圆形。在讲到矩形和椭圆的时候,我们了解了矩形和椭圆起始点的设定,以及原理。这里面涉及到的方法,一共有四个,rectMode()rect()ellipseMode()以及ellipse()。其中带有Mode组合的两个方法,是用来设定矩形和椭圆的起始点的,另外两个是用来画矩形和椭圆的。

上面示例的代码中,size()方法是系统提供的方法,用来设定窗口大小及相关状态的。background()方法也是系统提供的方法,是用来设定窗口背景颜色的。关于颜色的设定,我们会在下一次学习的过程中进行讲解。

下期预告

这一次,我们了解在Processing中,如何画基本图形,但是很单调,都是黑白照片,没有彩色,令人乏味。下一次,我们将让它们看起来五颜六色!我们将一起学习Processing中的颜色设置!

Comments