
第2章
变化多端的圆形
2.1 变量与循环
在第1章我们体验了Processing的画布、画笔和颜色。不难发现,Processing用数字表示图形和颜色,而变化的数字可以产生变化的图形和颜色。变量(variable)用来表示变化的数,譬如:

运行程序后,控制台打印出-1和-3两个结果。代码中的int a=-1语句做了两件事:①声明一个整数型(int)变量a;②把一个具体的值-1赋予a。因为a是变量,所以我们可以随时赋给它新的值,如a=-3。一般来说,变量的名字用小写,如果变量的名字由几个单词组成,可以用the_first_variable或theFirstVariable这两种形式。

值得注意的是,a是一个int型变量,因此不能把小数赋给它。例如,a=0.5语句会触发程序异常(Exception),消息区域会变成深褐色,并显示:cannot convert from float to int。当等号右侧的数据类型无法自动转换为等号左侧的数据类型时,就会触发这类异常。
另一种常用的数据类型是小数(float),现在我们来创建一个名为x的float型变量:

其中,+=运算符的含义是:把运算符左边的变量加上右边的数,并计算最终结果。类似的还有-=、*=和/=,读者不妨自己试一试,看看结果是否和想象的一样。运行上面的程序会得到-1.6、0.39999998三个结果。【好可怕!程序吃掉了0.00000002!】最后一个结果看上去很奇怪,因为正确结果应该是0.4。
实际上float数据类型所表示的数字精度是有限的,这和我们熟悉的“绝对精确的数学”完全不同。但对于生成艺术来说,精度似乎不是问题。
变量之间也可以做运算,例如:

其中,++运算符的含义是给左边的变量加上1。“程序猿们”热爱偷懒,发明了很多简化的运算符,类似的还有——运算符。程序的运行结果为“result is 2.5”。最后一句println()中的参数为“result is”+result,即把一个小数(result值为2.5)与字符串“result is”拼接成一段字符串。

现在我们在屏幕中央画一个圆形,使圆的边缘始终与鼠标光标对齐:

代码运行结果如图2-1所示。

图2-1 一组同心圆,移动鼠标可控制圆的大小
在指定HSB颜色模式时,我们采用了变量之间的运算:mouseX*256/w,即把鼠标的x坐标(从0到w)缩放到0~255。代码中的dist()是Processing自带的求两点之间距离的方法,四个参数分别为第一个点的x与y坐标,以及第二个点的x与y坐标。运用勾股定理,代码中的dist()语句可以用以下代码代替:

其中,sqrt()是求平方根的方法,sqrt是square root的缩写。

下面来认识一下编程语言中常用的for循环语句:

该循环从变量i等于0开始,每次循环给i加上1,直到i为8(不再满足i<8的循环条件)的时候停止循环。全世界的“程序猿”都喜欢从0开始计数,所以

中的i会从0变到n-1,因此花括号内的代码不会经历“i=n”的情况。现在我们用手指来表示n。

for循环有很多灵活的用法,譬如计算5~25中所有奇数的平方根:

这里的初始状态条件是i=5(不是从0开始),继续循环的条件是i≤25(允许i等于25),每次循环会把i增加2。