Processing入门教程第二课

    上一节课我们简单的了解到了什么是Processing和它能够做什么。并且我们简单的编写了一个我们的第一个程序“hello，world”和真正的processing特点的程序。那么从这一篇文章开始我们* 开始真正的学习Processing.

    学习Processing的第一步当然是最基础的画图，虽然Processing当中2D绘画和3D绘画差不太多但是我们先从2D图形开始学起比较好。

感谢上一节课大力支持的朋友（排名不分先后）：

回乡园

微笑的rockets

Car1ous

willow

1、基本概念

什么是函数

注释是什么

窗口与坐标系

2、基础2D绘图

点

线段

三角形

四边形

矩形

正方形

椭圆

圆

扇形

简单曲线

    编程即写作，和用自然语言写文章相同都是由一个个的字词组成，不同的是程序是由一个个函数、表达式等组成语句表达含义。最重要或者说比例最多的就是函数了。函数的结构一般是“函数名”后面跟上括号，括号里面是这个函数相应的参数，不同的参数之间用“,”间隔，最后以“;”结尾

    和自然语言写作不同的是，自然语言写作我们可以很灵活地创造一些语句，一句话可以有不同的写法和含义。而程序是不可以出现模糊的含义以及不精确的写法。所以～⚠️注意一定要注意所有符号为英文符号。

    在程序当中，注释是给编程的人来看的，计算机不会编译执行。常用方式有两种单行注释和多行注释。看似不执行不重要，其实对于程序来说非常非常重要，特别是以后我们在编写复杂的程序时一定要清晰地标注注释，具体是为什么你们慢慢写多了你就知道了。另外Processing IDE当中不能用英文字母以外的文字。另外注释会编程灰色也是可以让你和其他的程序区分来。

    一、区分大小写，一定要注意！

    二、在参数部分空格无所谓但是！不能把一个函数分开。简单的说就是一个单词不能用空格隔开，单词和单词之间多少个空格都可以的。

    和我们在现实中画画一样我们需要先考虑在多大的纸张上面进行绘画。Processing的绘图首先也是需要考虑我们在多大的纸张上面进行绘画，只不过这个纸张是你的屏幕。当你在Processing当中什么都不写的时候直接运行Processing将自动给你一个默认尺寸（100像素✖️100像素）的画布。当然你也可以选择不同的画布大小。

    现实生活中我们可以选择不同大小的纸，比如A4、A5这些标准，窗口大小其实也有标准的比如2K、1080P这些，不过我们不过多解释。标准纸张其实也是可以用长度单位表示出来。但是在屏幕当中我们无法用长度单位来表示窗口的大小，屏幕当中的最小单位是像素，在屏幕中一般用像素来表示一个窗口的大小，不过这个大小是相对的。在同等像素长度下，分辨率高的反而小。

    设置一个窗口的大小用中文来表示就是“设定窗口为500像素✖️500像素”，在Processing当中如果想要设定窗口尺寸或者让计算机执行一些命令只需要用size()这个函数来设定窗口大小，它有三个参数分别是宽度、高度和渲染模式。

    我们可直接省略renderer（渲染模式）参数，比如这个程序只是单纯的设定了一个1080✖️720尺寸的窗口。当然你也可以把它设定为其他任意的整数尺寸大小。具体的渲染模式等到以后用得到的时候我们再详细解释吧。

    在纸上画图我们直接画就可以了，在Processing当中的绘图和用纸币不一样，需要我们准确的告诉计算机要在什么位置画什么。所以就需要使用数学的方法，想一想我们在小学初中学过的坐标系。利用坐标系我们就可以精确的表示每一个图形的精确位置，一开始你可能不是特别能够适应用坐标来绘图不过慢慢就会好了。Processing的坐标系统与数学（笛卡儿）上的坐标系不太一样，相同的是横向为X轴用来表示水平方向与原点的距离，纵向为Y轴用来表示垂直距离与原点的距离，当然表示方法也相同。不同的是坐标原点在左上角并且从X轴正方向为右边👉，Y轴正方向为下方⬇️。如下图所示。

了解processing的可能经常看到这样一张图。我们今天就来看一看怎么样会出一个类似的图案。

    Processing当中提供了多种类型的基本图形比如点、线段、三角形、四边形、矩形、圆、等等。现在我们来一个一个来看看他们如何在2D环境下使用。

    点可以说是最简单的一个图形，和数学中的点在坐标中表示很像。在Processing当中用到的函数是point()它有两个参数如下表，分别是x和y的两个坐标。默认情况下点为一个像素直径的原点，当然你还可以进行其他设置在这里暂时先不讲解。

示例：

    在(50,50)的位置生成一个点（可能有点小你需要仔细看）。  当然如果你想要在更大的地方绘图一定别忘了先要设定窗口尺寸然后再绘制点。

    你可能还是需要放大才能看的清楚。当然你的点也可以在屏幕的外面只是不会显示出来比如point(-10,-10);程序不会报错还是会正常执行但是你并不能看到。当然你也可以用无数个点来组成无数种图形。

    line()函数有四个参数，分别是两个点坐标的x1，y1，x2，y2。通过设定两个点后在两点之间绘制一条默认1像素的圆角线段。

示例：

    triangle()函数有六个参数分别定义了三个顶点。连接这三个顶点绘制出一个默认填充白色的三角形。

示例：

    有没有发现后面绘制的三角形会盖住之前的图案，所以一定要注意⚠️绘制图案的顺序。

    ⚠️注意如果不想要三角形的填充你其实可以设定的，或者用最简单的线段来组成

    绘制不同形状的四边形就可以用quad()函数用于绘制四边形，它有八个参数用来定义四个顶点。改变四个顶点你可以绘制出任何四边形（三角形也行），如正方形、长方形、平行四边形或者两个相连的三角形。⚠️！四个点一定要按照顺时针或者逆时针绘制否则就会出现两个三角形。

示例：

    绘制矩形用的函数是rect()函数，这个函数可能比之前的稍微复杂一点。它的完整版是有八个参数可以分别设定一个顶点、宽度、高度、四个角的圆角半径。不过最简单的情况下我们可以只保留四个参数及一个顶点、宽度和高度。默认情况下顶点是左上角的点为顶点，高度正方向是下方，宽度正方向是右方和窗口坐标系保持一致。

    另外它还有几种绘图模式可以用rectMode()函数进行定义。分别是CENTER（中心直径）、RADIUS（中心半径）CORNER（左上角直径，默认模式）CORNERS（两点模式）着四个模式。

示例：

    默认模式下三种不同的绘图方式。

    使用rectMode ()函数设定四种模式：

注意⚠️：设定模式之后的所有命令都会按照设定之后的模式进行，如果需要改变需要在改变的命令前重新设定模式。

    虽然四边形、矩形命令都可以绘制正方形，但是其实Processing有专门的函数给你来绘制正方形（一般书本上都没有写）。这个函数就是square()，它只有三个参数分别是顶点xy坐标以及一个大小。另外它可以被rectMode();函数设定。

示例：

    如果想要绘制各种各样的圆形可以用ellipse()这个函数，从字面上理解其实是椭圆，但是还是可以绘制出正圆来。它有四个参数默认情况下，前两个参数是设定中心顶点坐标。后面两个设定宽和高。

示例：

    如果只是单纯的想要绘制正圆，就可以使用circle()函数。它只有三个参数。它可以被ellipseMode()函数设定模式。

示例：

    如果想要绘制一些曲线或者扇形就可以用arc()函数，有七个参数分别是顶点的两个坐标、宽和高一级扇形起点与终点以及模式参数，模式包含三个参数可选OPEN（默认）、CHORD、PIE。注意扇形的起点和终点的单位是弧度制哦～

    弧度制指用弧长与半径之比度量对应圆心角角度的方式。用符号rad表示，读作弧度。等于半径长的圆弧所对的圆心角叫做1弧度的角。

    Processing当中圆弧的角度0（360）度在圆的右侧，角度沿着顺时针增加。角度和弧度的关系可观察下表我在这里不在详细解释。

    如果你和我一样对弧度制不是很习惯你可以用radians()函数将弧度制转化为角度制。

示例：

通过这个示例可以发现角度、弧度可以用不同的方式进行表示。

    另外用弧度制当中0°/360°、45°、90°、180°有特殊的命名方式，依次是TWO_PI、QUARTER_PI、HALF_PI、PI。

    通过这个示例可以发现角度、弧度可以用不同的方式进行表示。

    曲线绘制比较复杂一些，内容比较多。以后会专门出一节内容讲解，现在这里简单的给大家看一下。

    如果想要绘制出曲线一般有两种方式，样条曲线和贝塞尔曲线。我们在这里简单学习一下贝塞尔曲线，贝塞尔曲线又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。使用函数bezier()进行绘制，它有八个参数其中前两个为起始点，后两个为终止点，中间四个参数分别是两个控制点。

示例：

    还记得最开始那幅图吗？现在你看看它的代码是不是很容易理解呢？你有没有更好的想法来修改呢？

    花了两天时间写的尽可能做到严谨，但是可能还会有不严谨或者错误的地方，希望大家多多留言指正。

参考资料：

[1]谭亮. Processing互动编程艺术[M]. 电子工业出版社, 2011.

[2]Casey Reas,Ben Fry. Processing语言权威指南[M]. 电子工业出版社, 2019.

[3]黄文恺, 吴羽, 伍冯洁. Processing开发实战[M]. 机械工业出版社, 2016.

部分来自网络如有侵权请告知。

注：编写时IDE版本为3.5.4

署名-非商业性使用-相同方式共享 4.0 国际版 (CC BY-NC-SA 4.0)

如果你觉得有用的话，点个关注一键三连