本节书摘来华章计算机《交互式程序设计 第2版》一书中的第3章 ，第3.4节，Joshua Noble 著 毛顺兵 张婷婷 陈宇 沈鑫 任灿江 译更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.4 Processing绘图基础
因为Processing是为艺术家提供的工具，所以它简化了很多任务，其中最重要的一个任务是绘图。第8章和第9章会介绍利用矢量和位图绘图。第13章将介绍图形库OpenGL（Open Graphics Library）和一些3D（3 Dimension，三维）基础，以及如何创建复杂的绘图系统。在本节，你将学习如何绘制简单的形状和线条，以及如何创建颜色去填充它们。
3.4.1 rect()、ellipse()和line()方法
有3个最简单的绘图方法rect()、ellipse()和line()，利用它们可以在程序窗口中绘制简单图形。rect()方法可以画矩形，语法如下：
rect(x, y, width, height)
rect()方法的4个参数每一个都可以是int型或float型。x和y是矩形的左上角的坐标。在窗口客户区中绘图时，将客户区左上角坐标看做原点(0,0)，绘图方法中所用的坐标是相对于原点而言的。这是计算机图形处理中的惯例（只不过是将笛卡儿直角坐标中的y轴翻转，对于任何有数学背景的人而言，这稍显古怪，但也不难理解）。
ellipse()方法可以画椭圆，语法和rect()很相似：
ellipse(x, y, width, height)
ellipse()方法的4个参数，也可以是int型或float型。其中，x和y是椭圆中心坐标，width和height是椭圆外接矩形的宽度和高度。特别地，如果width和height取值相同，那么画的是圆。所以没有提供circle()方法。
最后，line()方法可以画线，语法如下：
line(x1, y1, x2, y2)
x1和y1是线段起点的坐标，x2和y2是线段终点坐标。示例3-5就用到了这三个绘图方法。
示例3-5：line.pde
void setup() {
size(300, 300);
}
void draw() {
rect(100, 100, 50, 50);
ellipse(200, 200, 40, 40);
line(0, 0, 300, 300);
}
图3-4中有一点要说明，由于先画矩形和椭圆，后画直线，所以直线位于矩形和椭圆的上方。在程序演示窗口中，每一个绘图命令绘制的图形都位于已有图形的上方。
可能需要给图形填充颜色。在学习颜色填充方法之前，我们要先进入一段小插曲：了解表示颜色的两种方式。
3.4.2 RGB彩色模型与十六进制颜色模型
在Processing中有两种表示颜色的方式：RGB彩色模型（Red Green Blue）和十六进制颜色模型。它们很相似，都利用红、绿、蓝三色分量来表示颜色。这是因为，计算机显示器的像素点颜色本来就是由红、绿、蓝三分量混合来决定。在RGB彩色模型中，可以将三个0~255的数值作为参数传递给color()方法，从而构建出某种颜色。例如，下面的语句可以构建白色：
图3-4：用rect()、ellipse()和line()绘图
int fullred = 255;
int fullgreen = 255;
int fullblue = 255;
color(fullred, fullgreen, fullblue);
反之，下面的语句可以构建黑色：
int fullred = 0;
int fullgreen = 0;
int fullblue = 0;
color(fullred, fullgreen, fullblue);
如果红色分量是255，绿色和蓝色分量是0，那么得到的颜色就是红色。如果蓝色分量是0，红色和绿色分量都是255，那么得到的颜色是黄色。如果红、绿、蓝三个分量的值相同，那么彩色相互抵消，得到的颜色是灰色（介于黑、白之间，包含黑和白）。
RGB彩色模型是一种容易理解的颜色表示方式。另一种颜色表示方式是十六进制颜色模型，它通常被Internet上的HTML（HyperText Markup Language）网页使用，并且已经广为流行。
什么是十六进制数？嗯，先想想十进制数。从0数到9，再加1会产生进位1。此后个位数又从0开始不断增长。所以，如果数到9，再加1变成10；如果数到19，再加1就变成20。这就是十进制。十六进制基于数字16，每当个位数达到16就会产生进位。对计算机来讲，十六进制效率很高。因为计算机是用二进制表示数据的，所以对于4或者16以及它们的倍数，计算机处理起来很容易。处理10的倍数却要耗时一些。十六进制数从0数到15依次是：0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F。所以如果你要把十进制的13用十六进制的方式写出来，你需要写D。要写24，你应该写18。要写100，你需要写64。要写255，你应该写FF。十六进制用更少的字符去表达同一个数值（“255”占3个字符，“FF”只有2个字符），这是一个很重要的理念，也是效率高的部分原因。较少的字符意味着高效率的处理。表示红、绿、蓝三分量的十六进制数写在一起，构成一个十六进制整数，例如：
0xFF00FF
或
#FF00FF
它的意思是，red = 255，green = 0，blue = 255。但用十六进制数表示颜色，效率更高。前缀0x和#告诉编译器，这个数字是十六进制数，而非输入错误。如果你要用到十六进制的话，请记住这两个前缀。
一些常用的颜色：
000000 = black
FFFFFF = white
00FFFF = yellow
十六进制颜色模型中还有一个极为重要的概念，那就是alpha通道。alpha值表示了颜色的不透明度，它被放在红、绿、蓝三分量的前边。alpha的取值范围也是0~255（在十六进制中是0~FF）。alpha越小，颜色越透明；alpha越大，颜色越不透明。
0x800000FF是纯粹的蓝色（红、绿分量都为0，蓝色分量是255），透明度是50%。可以把它拆分如下：
Alpha = 80 （即50%）
Red = 00 （即0%）
Green = 00 （即0%）
Blue = FF （即100%）
0xFFFF0000是纯粹的红色，透明度为0%，即完全不透明。该颜色中红色分量是255，没有绿色和蓝色去中和它。0x00FFFF00是品红，但它又是完全透明的，因而不可见。所以很多系统中用ARGB即不透明度、红、绿、蓝这4个分量来表示颜色。
了解了颜色基础，现在你可以使用丰富的颜色来绘图了。
3.4.3 fill()方法
顾名思义，fill()方法决定了图形内部区域用何种颜色来填充。Processing将矩形和圆这些二维图形看做是一组点，其中的空白区域需要涂上填充色。想象一下，设置填充色，也就规定了图形内部如何填充。如果没有fill()方法，Processing就不会知道图形内部用什么颜色去填充。fill()方法让你可以定义填充色。
在学习fill()方法之前，有一点要记住，fill()方法是一组重载方法。也就是说，fill()方法有多种签名。如果你对重载不熟悉，或者想再补习一下，就复习第2章。
fill()方法有多种途径去设置填充色。
fill(int gray)
参数gray是灰度值，它是整数，介于0（黑）和255（白）之间。
fill(int gray, int alpha)
第一个参数gray是灰度值，介于0（黑）和255（白）之间。第二个参数alpha表示不透明度，也是整数，介于0（透明）和255（不透明）之间。
fill(int value1, int value2, int value3)
三个参数分别表示红、绿、蓝三分量的值。例如，fill(255, 0, 0)将填充色设置为红色，fill(255, 255, 255)将填充色设置为白色，fill(255, 255, 0)将填充色设置为黄色，fill(0, 0, 0) 将填充色设置为黑色。
fill (int value1, int value2, int value3, int alpha)
和上一种方法相似，但它增加了一个alpha参数来表示填充色的不透明度。
fill(color color)
fill()方法也可以用定义好的color变量作为参数，例如：
void draw(){
color c = color(200, 0, 0);
fill(c);
rect(0, 0, 100, 100);
}
fill(color color, int alpha)
和上一个方法相比，多了一个alpha参数：
color c = color(200, 0, 0);
fill(c, 150);
fill(int hex)
该方法将十六进制数表示的颜色设置为填充色。参数是十六进制数，应该有0x前缀或#前缀。然而，如果你用0x作为前缀，那么Processing会认为该十六进制数中已经包含了不透明度。也就是说，如果你想将颜色和不透明度合在一起，你要用0x前缀；如果你希望颜色和不透明度分开成两个数据，那么颜色数据的前缀必须是#。比如下面这个方法。
fill(int hex, int alpha)
该方法用具有#前缀的十六进制数（只能是6位十六进制数）表示填充色，用alpha表示不透明度，alpha的取值范围是0~255。
一旦fill()方法设置好填充色，此后的所有绘图方法都将以此填充色来填充内部区域，直到填充色被再次改变。例如，如果你将填充色设置为蓝色：
fill(0, 0, 255);
然后画4个矩形，那么它们都会被蓝色填充。
3.4.4 background()方法
要设置程序窗口的背景色，需要用background()方法。background()也是一组重载方法，这和fill()一样。多个fill()方法和多个background()方法是一一对应的，当然，只要把某个fill()方法的方法名从fill改成background，就得到了一个background()方法。background()方法会用指定的颜色覆盖窗口画布上现存的所有东西。当你想删除窗口上现有的一切东西，你可以调用background()方法。这在动画中很有用，因为你可以容易地用background()将旧的图形覆盖，然后改变图形的位置和大小，再画一个，没有留下旧图形的痕迹。这不就是动画吗？
3.4.5 line()方法
line()方法可画线，有两种用法。第一种是画二维空间线段：
line(x1, y1, x2, y2)
第二种是画三维空间线段：
line(x1, y1, z1, x2, y2, z2)
三维线段看起来象二维线段一样，除非你将三维空间中的物体拖来拖去。关于3D绘图的内容将在第13章介绍，这里介绍的二维平面绘图要简单些。line()方法在两个点之间画一条线，每个点的坐标用两个参数来描述（三维空间则用三个参数描述一个点）。你可以用stroke()方法来设置绘图的颜色，用strokeWeight()方法来设置线宽。
3.4.6 stroke()和strokeWeight()方法
stroke()方法可以设置画笔的颜色。stroke()也是一组重载方法，它们的参数和fill()方法一样。strokeWeight()方法可以设置线宽，线宽用像素数表示。参见示例3-6。
示例 3-6：strokeWeight.pde
void draw(){
stroke(0xFFCCFF00); // 将画笔颜色设置为黄色
strokeWeight(5); // 将线宽设置为5像素
// 画线
line(0, 100, 600, 400);
line(600, 400, 300, 0);
line(300, 0, 0, 100);
}
该程序画了3条线段，颜色是黄色，线宽为5像素。这3条线段组成一个三角形。
3.4.7 curve()方法
curve()方法可用于画曲线。它和line()一样需要指定端点，但不同的是，curve()方法还需要你指定锚点。锚点决定了曲线的朝向和曲率。
你可以用二维空间模式调用curve()方法：
curve(x1, y1, x2, y2, x3, y3, x4, y4);
也可以用三维空间模式：
curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4);
curve()的所有参数都是float型，所以调用时既可以用浮点数，也可以用整数。x1、y1和z1是第一个锚点的坐标，也就是说，曲线会朝着它弯曲。x2、y2和z2是曲线起始点的坐标。x3、y3和z3是曲线终止点的坐标。x4、y4和z4是第二个锚点的坐标，曲线也会朝向它。参见示例3-7。
示例 3-7：curving.pde
void setup(){
size(400, 400);
}
void draw(){
background(255);
fill(0);
int xVal = mouseX*3-100;
int yVal = mouseY*3-100;
curve(xVal, yVal, 100, 100, 100, 300, xVal, yVal);
curve(xVal, yVal, 100, 300, 300, 300, xVal, yVal);
curve(xVal, yVal, 300, 300, 300, 100, xVal, yVal);
curve(xVal, yVal, 300, 100, 100, 100, xVal, yVal);
}
该程序运行时，效果如图3-5所示。程序运行时，移动鼠标，看看有何变化。
图3-5：运行用curve()画曲线的示例
3.4.8 vertex()和curveVertex()方法
顶点是什么？顶点就是两条线的交点。例如，一个三角形有3个顶点。在Processing中，你可以用3个或3个以上的顶点来构建图形。图形可以有填充色，也可以没有，具体做法是先调用beginShape()方法，然后构建若干顶点，最后调用endShape()方法。beginShape()和endShape()方法告诉Processing系统，你要定义若干顶点，并用它们来构建图形。3个顶点可以构建一个三角形，4个顶点可以构建四边形，以此类推。Processing会自动在你定义的点之间画线，从而画出一个多边形。多边形内部的填充色是你提前用fill()方法设置好的。示例3-8建立了3个顶点：一个是窗口左上角(0, 0)，一个是窗口右下角(400, 400)，最后一个是鼠标位置。该程序的运行结果如图3-6所示。程序运行时，移动鼠标看看有何变化。
示例3-8：vertices.pde
void setup() {
size(400, 400);
}
void draw(){
background(255);
fill(0);
beginShape();
vertex(0, 0);
vertex(400, 400);
vertex(mouseX, mouseY);
endShape();
}
图3-6：根据顶点画多边形并填充
