摘要

像　　素

千里之行，始于足下。

—老子

本章主要内容：

明确像素和坐标的概念

绘制基本图形：点、线、矩形、椭圆

颜色：灰度、RGB

颜色：alpha透明度

请注意，你在本章并不会真正开始编程！你只是使用基于文本的指令在屏幕上创造图形，请尽情享受这个过程带给你的愉悦。事实上，这些文本指令就是“代码”！

1.1　坐标纸

本书会教授你如何通过计算媒介进行编程，我们以Processing开发环境（http://www. processing.org）为基础进行讨论和举例。在一切开始之前，你要像八年级的学生一样，拿出坐标纸，在上面画一条线。两点之间距离最短的是经典的直线，我们的学习就从这两点一线开始。

图1-1展示了点A（1，0）和点B（4，5）之间的一条线段。如果你想指导一个朋友绘制同样的线段，你会跟他说：“请绘制一条始于点（1，0），止于点（4，5）的线段。”此刻，想象你的朋友是一台计算机，你想指导这个数码家伙在它的屏幕上绘制出同样的线。其实上述指令同样适用于计算机（只是此时你可以忽略掉朋友之间的客套寒暄，而需要留意的是精确的指令格式）。这条指令如下所示：

 

祝贺你，你已经写完了第一行计算机代码！稍后，我会告诉你关于这行代码的具体格式要求。现在，我们为电脑提供了一条指令（我称之为函数（function）），并且命名为直线（line）让它来执行。此外，我们还声明了绘制从点A（1，0）到点B（4，5）直线的实参（argument）。如果把这条线的代码比作句子，那么函数就是谓语动词，实参则是句子的宾语。只是代码以分号而不是句号结尾，如图1-2所示。

这里，关键是要注意计算机屏幕不过是一张精致的坐标纸。屏幕中的每个像素都具有一个坐标，即两个数值：x坐标（横坐标）和y坐标（纵坐标）。这样就决定了一个点在平面中的位置。你的任务就是在这些像素坐标上指定图形的形状和颜色。

坐标纸和电脑窗口的坐标系都采用笛卡儿坐标系统（Cartesian coordinate system），并且将原点（0，0）置于坐标系*。不同的是：坐标纸的y轴正半轴朝上，x轴的正半轴朝右（y轴负半轴和x轴负半轴分别朝下和朝左）；而在电脑窗口的坐标系统中，y轴方向是相反的。原点（0，0）在屏幕的左上方，原点右侧是x轴正半轴，原点下侧是y轴正半轴，如图1-3所示。

 

图　1-3

练习1-1：通过观察绘制一条直线的过程—line(1，0，4，5)，猜想应该如何绘制矩形、圆和三角形？首先用文字写出如何绘制，然后尝试用代码写出。

汉语：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

代码：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

汉语：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

代码：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

汉语：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

代码：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

待会回来看一下你猜想的代码和Processing实际的代码是否一致。