基础部分

第1章
画布、画笔和颜色

1.1　第一个程序

你是否曾经为画画之前要准备一大堆画笔、颜料而烦恼？一旦下载了Processing这个“神器”，你就立刻免去了这些麻烦，因为Processing开发环境已经在计算机上为你准备好了画布、画笔和所有颜色。【还可以做动画哦！】

Processing是由麻省理工学院的Ben Fry和Casey Reas为艺术家、设计师、建筑师、学生开发的图形化编程环境，它在全球掀起了一股编写创意编码的热潮。Processing诞生于2001年，今年已经20周岁了。

Processing是一款免费的开源软件，在Windows和Mac下运行的效果完全一致。Processing已经有好几个版本了，但大家还是觉得2.2版本用起来更顺手。下载安装完成后打开Processing，在文本编辑器内迅速输入六行神秘的代码：

注意这些字符有不同的颜色。如果有些英文单词没有变成彩色，那么可能是因为拼写错误。代码里面的标点符号是必须的，而且字母的大小写也不能搞错哦！

Processing工具栏左侧有两个按钮酷似老式录音机上的播放键（run）和停止键（stop）。单击播放键，代码开始运行，这时有一个展示窗口（画布）弹出来，鼠标就能不断地在画布上画直线了，如图1-1所示。

平复一下激动的心情，现在可以按停止键关闭程序了。单击“文件/保存”选项保存代码，给文件（.pde格式）取一个有意义的名字吧，譬如：

ManyLines_HuaHao_20200114.pde

这个名字明确了三点：程序内容、作者姓名和创作日期（yyyymmdd）。文件的命名十分重要！想象一下你已经写了上百个程序，如果这些文件都没有一个有含义的名字，你很难找到那个你想要的文件。当你和他人分享代码时，为文件取名是一种基本的礼仪。此外，建议你在计算机里新建一个文件夹，专门存放你的程序。

回到那六行代码，我们暂且无视void、setup、draw这些词，只看和图形有关的代码：

你可以试着在代码中改变展示窗口的大小和直线起点的位置，看结果是否和你想象的一样。譬如，把画线的那行代码改成line(0, 0, mouseX, mouseY);。你也许会惊讶地发现屏幕的原点在左上角，而一般数学书里的坐标原点在左下角，但这不影响我们理解“坐标”。假如有一只青蛙从原点起跳，坐到了草地上，我们就能标出它的位置了。

用两个数来表示一个点在平面内的位置，这是一项古老的发明，传说是400多年前法国的勒内·笛卡儿（René Descartes）在生病卧床时受蜘蛛网启发后发明的。笛卡儿坐标系把图形与数字或变化的数字，联系起来，并在程序中用“变量”（variable）来表示，这是所有数字化视觉艺术的基石。Processing中的笛卡儿坐标系可以是二维或三维的，本书专注于二维坐标系中的图形艺术。

有时，你会发现程序莫名其妙地无法运行了。譬如，把mouseX这个关键词写成mousex，运行程序时文本编辑器下方的消息区域（会变成深褐色）内会出现一行白色的字：

Cannot find anything name “mousex”

意思是无法找到mousex。因为Java编程语言是一种严格区分字母大小写的语言，因此mouseX和mousex是截然不同的。Processing内部已经定义了很多关键词，如mouseX指鼠标在显示窗口中的x坐标，这些关键字会自动变成彩色。常见的关键字还有：

width——展示窗口的宽度；

height——展示窗口的高度；

frameCount——整数，当前帧的序号。

注意代码的颜色有助于减少错误。尽量不要在代码里混入中文字符，否则容易出现一些难以发现的错误。

大部分编程语言允许无用的空行、空格夹杂在代码里，Java编程语言也一样。在代码任意一处增加一个空行，不会对程序的运行产生任何影响。在各关键词、数字前后增加空行也没有任何问题。推荐大家经常用菜单栏的Edit / Auto Format 命令来使代码整齐划一，去掉那些多余的空格。

为了使代码的可读性更强，我们可以用//符号添加注释。程序会忽略//后面的内容，同时这些内容会变成灰色。下面我们给第一个程序添加注释：