【04】processing-形状（中文）

简单图形

 

 

在处理过程中，您将看到的绝大多数编程示例本质上都是可视化的。这些例子的核心是绘制形状和设置像素。

让我们从四个基本形状开始。

 

                     点          线               面                  圆

 

 

对于每个形状，我们都会问自己需要什么信息来指定该形状的位置和大小（以及随后的颜色），并了解处理过程将如何接收该信息。在下面的每个图表中，我们假设一个宽度为10像素，高度为10像素的窗口。这不是特别现实，因为当你真正开始编码时，你很可能会使用更大的窗口（10x10像素仅仅是几毫米的屏幕空间），为了更好地说明每行代码的内部工作原理，最好使用较小的数字来表示可能出现在绘图纸上的像素（目前）。

 

点（）是最简单的形状，也是一个很好的起点。要画一个点，我们只需要一个x和y坐标。

pint(x坐标，y坐标)

 

line（）也不是很难，只需要两点：（x1，y1）和（x2，y2）：

 

line(x1坐标，y1坐标，x2坐标，y2坐标 )

 

 

一旦我们画了一个rect（），事情就变得有点复杂了。

在处理过程中，矩形由矩形左上角的坐标及其宽度和高度指定。

 

rect(x坐标，y坐标，宽度，高度);

 

 

绘制矩形的第二种方法是指定中心点以及宽度和高度。

如果我们更喜欢这种方法，我们首先指出我们希望在矩形本身的指令之前使用“中心”模式。

注意，processing是区分大小写的。

 

//通过设置矩形中心点模式绘制矩形

rectMode(模式);     
rect(x坐标，y坐标，宽度，高度);

 

 

 

最后，我们还可以画一个有两点的矩形（左上角和右下角）。这里的模式是“角落”。

//通过设置矩形两点模式绘制矩形

rectMode(模式);     
rect(x1坐标，y1坐标，x2坐标，y2坐标);

 

 

一旦我们熟悉了绘制矩形的概念，椭圆就很容易了。实际上，它与rect（）相同，区别在于在矩形的边界框所在的位置绘制椭圆。椭圆（）的默认模式是“中心”，而不是“角点”

 

//默认情况下，中心点在中间
ellipse(x坐标，y坐标，x轴直径，y轴直径);

 

//也可以通过模式设置
ellipse(模式);
ellipse(x坐标，y坐标，x轴直径，y轴直径);

 

//也可以通过中心点在左上角模式绘制圆形
ellipse(模式);
ellipse(x坐标，y坐标，x轴直径，y轴直径);

 

//也可以通过两点模式绘制圆形
ellipse(模式);
ellipse(x1坐标，y1坐标，x2坐标，y2坐标);

 

 

必须承认，这些椭圆看起来并不是特别的圆形。处理有一个内置的方法来选择哪些像素应该用来创建一个圆形。

像这样放大，我们得到一个圆形图案的正方形，但是在电脑屏幕上放大，我们得到一个漂亮的圆形椭圆。

processing也使我们有能力开发我们自己的算法来对单个像素进行着色（事实上，我们已经可以想象如何使用“point”一次又一次地进行着色），但是现在，我们满足于允许“ellipse”语句完成这项艰巨的工作。（有关像素的更多信息，请从：像素参考页开始，不过请注意，这比本教程更高级。）

 

现在让我们来看看在更真实的设置中，窗口尺寸为200×200的形状的一些代码。

注意使用size（）函数指定窗口的宽度和高度。

我们通过点，线，面，圆来绘制下面的“人物”

 

 

 

size(200,200);                          //第一步：绘制窗口宽度和高度

rectMode(CENTER);                       //第二步：绘制木桩身体
rect(100,100,20,100);

ellipse(100,70,60,60);          //第三步：绘制大圆脸

ellipse(81,70,16,32);           //第四步：绘制大眼睛
ellipse(119,70,16,32); 

line(90,150,80,160);                //第五步：绘制大长腿
line(110,150,120,160);

 

 

 

用代码绘制静态图形很麻烦，建议采用“调整功能”

1. 绘制大体的图形
2. 保存当前代码
3. 菜单栏【速写本】→【调整】
4. 用鼠标左键拖拽数字参数调整
5. 保存已调整参数

 

演示动图如下：