鲸男爱互动

来源：Processing: A Programming Handbook for Visual Designers and Artists
章节：3-”Shape 1 Coordinates,Primitives” Page22-35
进度：page31-33 (Part b)
作者：Casey Reas，Ben Fry
版权：MIT Press
翻译：鲸男(whaleforest).2007/11/28-11/??
发表：www.imlab.cn/forum与http://imlab.cn/whale/与http://www.douban.com/group/processing/
说明：翻译用于Processing中文用户的学习交流与推广，如有侵权请告知我将尽快删除（whaleforest@gmail.com），转载请包括此信息。期待大家指正错误及一起翻译。

(page31)

Drawing order 图形呈现顺序

使用代码绘制多个图形时也需要考虑排列顺序，先绘制出的图形会被后绘制出的图形覆盖。例如，在程序的第一行使用代码绘制出的正方形，会被第二行代码绘制出的圆形覆盖，改变两行代码顺序圆形就会被正方形覆盖。

rect(15, 15, 50, 50); // 下 ellipse(60, 60, 55, 55); //上

2-23

ellipse(60, 60, 55, 55); // 下 rect(15, 15, 50, 50); //上

2-24

Gray values 灰度

以上所有例子的视觉窗口都使用了默认的浅灰色背景，黑色线条，白色填充。想要改变这些设置就必须在程序中声明，使用background() 函数可以在0－255范围内设置视觉窗口的灰度，数字255代表黑色数字0代表白色，在这个范围内更改数字就可以得到想要的灰度。默认情况下背景颜色是204(浅灰色)：

background(0);

2-25

background(124);

2-26

background(230);

2-27

P32
fill()函数用来控制图形的填充色，stroke()用来控制图形外框颜色。
默认情况下填充数值为255（白色），外框颜色为0（黑色）。

rect(10, 10, 50, 50); fill(204); // 浅灰 rect(20, 20, 50, 50); fill(153); // 中灰 rect(30, 30, 50, 50); fill(102); // 暗灰 rect(40, 40, 50, 50);

2-28

background(0); rect(10, 10, 50, 50); stroke(102); // 暗灰 rect(20, 20, 50, 50); stroke(153); // 中灰 rect(30, 30, 50, 50); stroke(204); // 浅灰 rect(40, 40, 50, 50);

2-29

默认情况下所有图形的填充色和外框色都一样， 重新设定fill()函数和stroke()函数的数值可以改变这种情况。

fill(255); // 白色 rect(10, 10, 50, 50); rect(20, 20, 50, 50); rect(30, 30, 50, 50); fill(0); // 黑色 rect(40, 40, 50, 50);

2-30

fill()函数和stroke()函数的第二个参数用来设置透明度，参数值为255时图形完全不透明，设置为0时完全透明：

background(0); fill(255, 220); rect(15, 15, 50, 50); rect(35, 35, 50, 50); fill(0);

2-31

fill(0); rect(0, 40, 100, 20); fill(255, 51); // 高透明度 rect(0, 20, 33, 60); fill(255, 127); // 中透明度 rect(33, 20, 33, 60); fill(255, 204); // 低透明度 rect(66, 20, 33, 60);

2-32

P33
填充色和外框色可以被禁用，这时就要分别用到noFill()函数和noStroke()函数，如果同时使用这两个函数，视觉窗口中将会看不到任何图形。

rect(10, 10, 50, 50); noFill(); // 禁用填充 rect(20, 20, 50, 50); rect(30, 30, 50, 50);

2-33

rect(20, 15, 20, 70); noStroke(); // 禁用外框 rect(50, 15, 20, 70); rect(80, 15, 20, 70);

2-34

色彩填充和外框数值设定的详细讲解参看章节 Color1（p.85）

//continue…

来源：Processing: A Programming Handbook for Visual Designers and Artists
章节：3-”Shape 1 Coordinates,Primitives” Page22-35
进度：page22-30 (Part a)
作者：Casey Reas，Ben Fry
版权：MIT Press
翻译：鲸男(whaleforest).2007/11/05-11/22
发表：www.imlab.cn/forum与http://imlab.cn/whale/与http://www.douban.com/group/processing/
说明：翻译用于Processing中文用户的学习交流与推广，如有侵权请告知我将尽快删除（whaleforest@gmail.com），转载请包括此信息。期待大家指正错误及一起翻译。

P22

P23
3－Shape 1 座标，基础图形
本章节介绍Processing中视觉窗口坐标系统及各种平面图形元素。

语法介绍：

size(), point(), line(), triangle(), quad(), rect(), ellipse(), bezier()
background(), fill(), stroke(), noFill(), noStroke()
strokeWeight(), strokeCap(), strokeJoin()
smooth(), noSmooth(), ellipseMode(), rectMode()

图形每个节点都需要数字定位让使用代码绘制图形显得麻烦重重。用铅笔或者鼠标绘画时有足够的时间考虑起笔落笔的位置，转而使用代码虽然和在纸上绘制图形非常不同，也并不意味着代码绘图的思路有多么不好理解。

坐标系统
工欲善其事,必先利其器.
在纸上画画可以根据需要选择不同的工具和纸张，例如，画速写用报纸和炭条，画素描用光滑的纸张和适合的铅笔。与此相对应，在电脑上绘画首先就要考虑屏幕尺寸和背景颜色。

电脑屏幕是由无数微小的像素(pixel)组成的点阵集合,电脑屏幕有多种尺寸，在我们的研究室有三种不同尺寸的电脑显示器，它们由不同数量的像素构成。笔记本电脑1，764，000像素（宽1680 x 高1050），平板电脑1，310，720像素（宽1280 x 高1024），旧款显示器786，432像素（宽1024 x 高768）。百万像素的数量听起来很吓人，可与A4开本的纸比起来实在不算大。印刷时的精度可以高达每英寸1000点，而电脑通常设定为每英寸100点，但电脑绘图可以反复操作的好处纸张根本做不到。

Processing程序能够控制屏幕上的任一像素，当你点击运行按钮（ Run button）后，一个视觉窗口弹出并允许内存在窗口内绘制图形，当然这个视觉窗口可以设定的比屏幕还大，但通常情况下最好比屏幕小或刚好合适。

P24
使用size()函数设定视觉窗口的尺寸

size(width,height) size()函数有两个参数，第一个设置视觉窗口的宽度(width)，第二个设置高度(height)

//绘制一个宽度为120像素 //高度为200像素的视觉窗口 size(120,200);

2-01

//绘制一个宽度为320像素 //高度为240像素的视觉窗口 size(320,240);

2-02

//绘制一个宽度为200像素 //高度为200像素的视觉窗口 size(200,200);

2-03

定位屏幕上一个位置需要x坐标与y坐标。x轴坐标定位由原点起横方向的位置，y轴坐标定位由原点起竖方向的位置。在Processing中，坐标原点为视觉窗口的左上角，坐标值向右，向下时增大。左边图形演示坐标系统，右边图形中展示网格中不同位置的坐标。

原点的坐标是(0,0)。坐标(50,50)代表x轴坐标为50，y轴坐标也为50。坐标(20,60)代表x轴坐标为20，y轴坐标也为60。如果设定视觉窗口大小为100像素宽100像素高，坐标(0,0)位置在左上角顶端，坐标(99,0)位置在右上角顶端，坐标(0,99)位置在左下角底端，坐标(99,99)位置在右下角底端。

基础图形

我们可以使用point()函数来绘制点这个最基本的视觉元素

point(x,y);

本函数有两个参数：第一个定位x轴坐标，第二个定位y轴坐标。和其它元素不同的是，点是单个像素的度量。

//这些点的x,y轴数值相等 //线从左上角 //到右下角 point(20,20); point(30,30); point(40,40); point(50,50); point(60,60);

2-04

//这些点的y轴数值都一样 //从顶端到它们的距离 //也相同 point(50, 30); point(55, 30); point(60, 30); point(65, 30); point(70, 30);

2-05

//这些点的x轴数值都一样 //从左边到它们的距离 //也相同 point(70, 50); point(70, 55); point(70, 60); point(70, 65); point(70, 70);

2-06

// 一个点紧挨一个点 // 就组成了一条线段 point(50, 50); point(50, 51); point(50, 52); point(50, 53); point(50, 54); point(50, 55); point(50, 56); point(50, 57); point(50, 58); point(50, 59);

2-07

/// 当点的位置超过了视觉窗口显示范围 // 不会导致运行错误 // 但我们会看不到这些点 point(-500, 100); point(400, -600); point(140, 2500); point(2500, 100);

2-08

P27
除了画一排点来组成线段外，使用line()函数可以更轻松画出线段，它有四个参数，每两个参数定位一个点。

line(x1,y1,x2,y2)

前两个参数设定线段起点，后两个设置线段终点，它们共同构建了一条线段。

// y轴坐标相同的情况下 // 线段是条横线 line(10, 30, 90, 30); line(10, 40, 90, 40); line(10, 50, 90, 50);

2-09

// x轴坐标相同的情况下 // 线段是条竖线 line(40, 10, 40, 90); line(50, 10, 50, 90); line(60, 10, 60, 90);

2-10

// 当四个参数都不一样 // 就是乱七八糟的线 line(25, 90, 80, 60); line(50, 12, 42, 90); line(45, 30, 18, 36);

2-11

// 当两条线段中有一个点坐标相同时意味着它们相交 line(15, 20, 5, 80); line(90, 65, 5, 80); triangle()函数用来绘制三角形(triangle)。它有6个参数，每两个参数定位一个点：

2-12

triangle(x1,y1,x2,y2,x3,y3)

前两个参数定位第一个点，中间两个定位第二个点，最后两个定位第三个点。当连接三条线段时可以构成一个空心三角形，但用triangle()函数绘制的三角形中有颜色填充。改变triangle()函数中的参数可以得到不同大小和形状的三角形。

triangle(60, 10, 25, 60, 75, 65); // 填充三角形 line(60, 30, 25, 80); // 空心三角形的一边 line(25, 80, 75, 85); // 空心三角形的一边 line(75, 85, 60, 30); // 空心三角形的一边

2-13

P28

几何图形
Processing中用来绘制图形的函数有七种，以上图片展示了它们的初始形态，当然，代码2-04到2－22也演示了它们的使用方法。

P29

triangle(55, 9, 110, 100, 85, 100); triangle(55, 9, 85, 100, 75, 100); triangle(-1, 46, 16, 34, -7, 100); triangle(16, 34, -7, 100, 40, 100);

2-14

quad()函数用来绘制四边形，它有八个参数，每两个参数定位一个点。

quad(x1,y1,x2,y2,x3,y4,x4,y4)

适当改变这些参数可以得到长方形，正方形，平行四边形和不规则四边形。

quad(38, 31, 86, 20, 69, 63, 30, 76);

2-15

quad(20, 20, 20, 70, 60, 90, 60, 40); quad(20, 20, 70, -20, 110, 0, 60, 40);

2-16

绘制长方形和圆形的方法和之前介绍的有所不同，函数的四个参数不仅用来定位位置，还要设置图形尺寸。rect()函数用来绘制长方形：

rect(x,y,width,height)

前两个参数定位长方形左上角的位置，第三个参数设置宽度，第四个参数设置高度。下面绘制宽高相同的正方形。

rect(15, 15, 40, 40); // 大正方形 rect(55, 55, 25, 25); //小正方形

2-17

rect(0, 0, 90, 50); rect(5, 50, 75, 4); rect(24, 54, 6, 6); rect(64, 54, 6, 6); rect(20, 60, 75, 10); rect(10, 70, 80, 2);

2-18

P30
ellipse()函数用来绘制椭圆形：

ellipse(x,y,width,height)

前两个参数定位椭圆形的圆心位置，第三个参数设置宽度，第四个参数设置高度。下面绘制宽高相同的圆形。

ellipse(40, 40, 60, 60); // 大圆 ellipse(75, 75, 32, 32); // 小圆

2-19

ellipse(35, 0, 120, 120); ellipse(38, 62, 6, 6); ellipse(40, 100, 70, 70);

2-20

bezier()函数用来绘制曲线。绘制贝塞尔曲线需要设定锚点和操纵点，首先由锚点确定曲线的起始位置，再由操纵点决定曲线的形态。

bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2)

此函数使用八个参数位定四个点，第一个点和第四个点定位曲线的起始，第二，三个点决定曲线的形态，我们可以想像下在Adobe Illustrator中绘制贝塞尔曲线时的情形，有两个操纵杆从曲线两端伸出。

bezier(32, 20, 80, 5, 80, 75, 30, 75); // 绘制模拟操纵杆 line(32, 20, 80, 5); ellipse(80, 5, 4, 4); line(80, 75, 30, 75); ellipse(80, 75, 4, 4);

2-21

bezier(85, 20, 40, 10, 60, 90, 15, 80); // 绘制模拟操纵杆 line(85, 20, 40, 10); ellipse(40, 10, 4, 4); line(60, 90, 15, 80); ellipse(60, 90, 4, 4);

2-22

//Part a is over

来源：Processing: A Programming Handbook for Visual Designers and Artists章节：2-”Structure 1:Code Elements” Page17-21进度：page17-21作者：Casey Reas，Ben Fry版权：MIT Press翻译：鲸男(whaleforest).2007/11/02-11/03发表：www.imlab.cn/forum与http://imlab.cn/whale/与http://www.douban.com/group/processing/说明：翻译用于Processing中文用户的学习交流与推广，如有侵权请告知我将尽快删除（whaleforest@gmail.com），转载请包括此信息。期待大家指正错误及一起翻译。构造 1－代码元素本单元将通过对基础元素和语法的讲解引领大家进行程序编写的尝试： 语法：

// (comment), /* */ (multiline comment)“;” (statement terminator), “,” (comma)print(), println()

软件是写出来的（这句是废话吧）。开始写代码前我们需要特别注意，为电脑写程序和写电子邮件，小说非常不一样。因为作家们喜欢用的一语双关，含沙射影之类的写作手法对人类来说有作用，但电脑可不吃这套。所以动手之前我们先来了解怎么才能让电脑理解你的想法，介绍编写程序的语法，技巧正是本章节意义所在。接下来我们将要在processing编写一个又短又简单的程序，设定视觉窗口的大小和背景颜色。Comments（备注）Comments（备注）是什么呢？在阅读文章时我们偶尔会拿笔在某段精彩句子后写写感想，在程序中也可以如此，备注允许我们添加程序编写者信息，或对某段代码的工作流程做详细解释，好的备注可以帮助自己在日后修改程序时思路通畅，或让其它人快速有效理解你的编写思路。备注可以使用日常用语，所以它是只能被我们看见而被电脑忽略的。备注所用的字体颜色和其它代码不同，接下来的程序就是多备注工作原理的阐释：

1－01// 两道前斜线表明备注开始//同一行的所有文字都是备注的一部分//在斜线与斜线之间不能有空格，例如//代码“/ /”后面的文字不再会被当作备注从而导致运行错误//如果你写的备注有很多行//相信你会喜欢使用下面的方法//多重备注/*在前斜线和星号构成的区域之间不管你写多少行会被当作备注*///接下来的文字和元件将被电脑编译//因为它们不再是备注了//它们会开始运行并绘制一个200×200像素的视觉窗口size(200, 200);background(102);

函数函数允许你绘制图形，设置色彩，计算数据及其它各种功能。函数名字通常是小写后面加上一对括号，The comma-separated elements between the parentheses are calledparameters, and they affect the way the function works. Some functions have noparameters and others have many.以下程序将介绍size()函数和background()函数。

1－02//size函数有两个参数，第一个设置视觉视窗的宽度//第二个设置视觉视窗的高度size(200,200);//此版本的background函数有一个参数//它为视觉窗口设置色彩灰度//在0(黑色)到255(白色)的范围background(102);

表达式，声明表达式是符号与运算符的组合，一般包括＋，＊和/这些运算符并对左右的数值进行运算，表达式可以是一个单独数字也可以是多个元素的组合。An expression always has a value, determined by evaluating its contents.

Expression Value5 5122.3+3.1 125.4((3+2)*-10) + 1 -49

程序分解每个程序都由不同的代码构成，它们组合起来表达程序师的意图并由电脑编译出结果。在第176页将对更复杂的程序作出分解介绍。表达式还可以使用>(大于号)和<(小于号)比较两个数值，并得出true或false的结果。

Expression Value6 > 3 true54 < 50 false

当一段句子完结时需要加上结束符号，程序依然，在Processing语言中用分号来做结束符号。声明有各种不同的用法，可以定义变量，给变量赋值，运行函数，或者创建对象。这些将在稍候做详细探讨，但首先请看以下例子。

1－03size(200,200); //运行size()函数int x; //创建新的变量 xx=102; //把值102赋予变量 xbackground(x); //运行background()函数

忘记在声明的最后添加分号是一个很常见的错误，程序将因此无法运行，但会在纠错窗口提醒用户做出更改。p20语法规则英文写作中，有些字词需要开头大写而有些不需要。而在多数编程语言里也要注意大小写的交替，但Processing需要全部使用小写字母，例如，当你设定尺寸(size)时，一旦写成Size就会出现错误。请务必遵守Processing的命名规则。

size(200,200);Background(102); // 错误！B在”background”函数中不需要大写

空白字符包括Processing在内的很多程序语言，允许代码之间存在空白字符，不象之前对声明结束符的严格要求，空白字符的存在不会导致程序错误。接下来的两行代码是标准写法：

size(200,200);background(102);

当然，在程序代码间不管存在多少空白字符都不会影响程序的正常运行：

size( 200,200) ;background ( 102);

控制台软件的运行速度是如此之快以至于我们无法用眼睛观察到，但是了解程序在电脑里到底是怎么运行的对我们来说又非常重要，所以print()和printin()函数的功能就是使运行信息在视觉窗口中呈现出来。print()函数不等同于浏览器中具打印功能的快捷按钮，而是发送数据到控制台，用来呈现变量，确认事件，及外部信号的接收程度。目前来看其定义不好理解，但随着课程深入我们将越来越了解它的意义，就象注释一样，print()和printin()函数都会帮助我们更加有效测试，修改程序。

1-07// To print text to the screen, place the desired output in quotesprintln(“Processing…”); // Prints “Processing…” to the console// To print the value of a variable, rather than its name,// don’t put the name of the variable in quotesint x = 20;println(x); // Prints “20″ to the console// While println() moves to the next line after the text// is output, print() does notprint(“10″);println(“20″); // Prints “1020″ to the consoleprintln(“30″); // Prints “30″ to the console// The “+” operator can be used for combining multiple text// elements into one lineint x2 = 20;int y2 = 80;println(x2 + ” : ” + y2); // Prints “20 : 80″ to the message window

练习1，尝试为任意一句代码添加注释。2，写一段代码，创建黑色背景，大小为640 X 480像素的视觉窗口。3，使用print()和printin()函数发送任意信息到控制台。第2章 “Structure 1:Code Elements”翻译完毕2007/11/02-11/03www.imlab.cn/whale