Processing编程学习指南1.2 绘制基本图形

1.2　绘制基本图形

本书绝大部分的编程示例都是自然可视的。不论你最终希望利用Processing学习制作交互游戏，还是艺术算法，还是动态logo设计（在这里，思考一下你学习Processing的目的），最核心的是，每一种视觉编程都包含像素的设定。了解Processing运行方式的最简单方法是首先学习绘制基本图形。这和在小学里学习绘画并没有太大区别，只是这里的工具由蜡笔变成了代码。

首先，从图1-4中的四个基本图形开始。

针对每个图形，先问下自己需要什么数据信息才能确定图形的坐标和大小（后面还会增加颜色），然后思考下Processing希望会以怎样的方式接收这些数据信息。下面图表（从图1-5到图1-11）的窗口宽度和高度均为10像素。其实真正开始编程之后，你通常会使用更大的窗口（因为10×10像素只占据屏幕几毫米的空间）。但是，出于示范的目的，小尺寸的窗口更容易呈现出图像在坐标纸上的效果，从而帮助我们理解每一行代码。

点是构成图形的最基本元素，要绘制一个点，只需要一个坐标（x，y），如图1-5所示。绘制一条直线也不是很困难，只需要两个点，如图1-6所示。

 

开始绘制矩形后，就会稍微有点复杂了。在Processing中，矩形由左上角点的坐标、矩形的宽度值，以及矩形的高度值三者确定，如图1-7所示。

 

图　1-7

绘制矩形的第二种方法是：确定矩形中心点坐标、矩形宽度值和高度值，如图1-8所示。注意，在采用这种绘制方式之前，需要事先指定CENTER模式，因为Processing默认的模式是CORNER（见图1-7）。另外注意Processing是区分字母大小写的。

 

图　1-8

绘制矩形的第三种方法是确定矩形的两个点坐标：矩形左上角点和右下角点。这种绘制模式是CORNERS（见图1-9）。

了解了矩形的绘制方法之后，椭圆的绘制也就很好理解了。实际上，椭圆绘制和矩形绘制rect()大同小异，绘制椭圆时，可以想象有一个矩形的边界框（见图1-10）。与矩形rect()的CORNER模式不同，椭圆ellipse()的默认绘制模式是CENTER，如图1-11所示。

必须承认，图1-11中的椭圆看上去并不是特别圆滑。Processing有一个选择使用哪些像

 

 

图　1-11

素创建圆的内置方法。放大后，你会发现有很多小方块以近似圆的方式进行排列，但是缩小到一定程度后，你就会看到一个完美的圆。在后续章节，你会发现使用Processing可以创建自己的算法，能让你单独对图形的每个像素点进行着色（当然，有可能你已经想到可以使用point()命令逐点进行绘制），但是目前，最好使用ellipse()命令执行这个工作。

当然，Processing函数库中不仅仅只有点、直线、椭圆和矩形的图形绘制命令。在第2章，你会看到Processing语言参考文档提供了绘制函数的完整列表，以及对应的实参要求、句法示例和相应的图形输出。当前，作为练习，你可以尝试想象一下其他的图形应该需要什么样的实参，如图1-12所示，依次为：triangle()、arc()、quad()和curve()。

练习1-2：使用下面的空白图表，根据代码粗略绘制出图形。

 

 

 

 

 

练习1-3：根据下面的图形，反向推导出初始的图形绘制指令。