Processing自学第三课：坐标空间和形状Coordinate System and Shapes
【概述】这一页主要有两个内容，首先是解释一下坐标空间的概念，电脑中的坐标轴有些特别。第二，教你怎么用坐标的方法在Processing上画基础图形：点、线、长方形还有圆。其中，长方形跟圆形会教三种画法。
【重点】point、line、rectangular、ellispe的画法
原文地址：http://processing.org/learning/drawing/ ，文章作者是Daniel Shiffman。
【坐标轴空间】Coordinate Space
在开始学Processing之前，我们先画一个方格图（channel our eighth grade selves？），然后画一条线。OK~你看，两点之间直线最短。这是一句老话，然后我们要今天要搞的...咳咳研究的就是这两点。
就是上图这个样子的直线。假设如果你想要你朋友画一个同样的图形怎么办呢？是不是对着他吼一声“给我一个点（1,0）到点（4,5）的直线。”恩，蓝后，你这个朋友现在是台电脑，那你要命令它画这条线就更省事了（都不用客套话有没有），只要客观科学地写下：
line(1,0,4,5)
上面这个命令（在这里，指令被叫做Function）应该不难理解。笔者觉得就算没有学过编程也能明白大概吧~其实它就是一句被缩减过的句子。原意如下图：
有一个要点解释一下，电脑屏幕就相当于一个很大（a fancier piece)的方格图，每个像素都有相对应的坐标——由横轴数字X和纵轴数字Y来决定坐标的位置。我们就通过确定这些像素来决定图像形状和颜色。
然而还有一个需要注意的点：传统的直角坐标图把点(0,0)放在正中央，不过在电脑里，这个点跑到最上方了，而且Y轴倒过来，数值逐渐增长（没有负数的概念）。
【简单的图形】Simple Shapes
学画画的就明白有几个图形是最最基础的图形，大千世界万变不离其中。来，先认识（记住单词，这是日后要用的指令）：
接下来我们要做的就是学习用Processing怎么确定图形的位置和大小（以后还有颜色）。而为了学习方便，假设了口的长宽只有10像素。其实这是不合常理的（那个窗口只有几毫米），如果在实际工作中，你肯定会要一个大好几倍的窗口。 不过呢，现在是为了好理解嘛。
首先是，point()，画个点。
点是最简单的图形了，只要确定一个X轴位置和Y轴位置就行了。
第二个，画line()也不难，标清楚两个点的位置就可以啦。
好了，来到方形rect()之后呢，稍微复杂了点。在Processing中内，我们通过左角顶点来定位这个方形，还有接下来的长宽。指令的写法就是：
rect(x,y,宽width,长height)
第二种画方形的方式是确定中心点，随后在确定长度和宽度。如果要用这种方法的话，那就需要在代码中写明“CENTER"。这里还要注意大小写（case-sensitive）：
rectMode(CENTER);
rect(x,y,宽width,长height)
最后一种方法，是确定两个重要的点（最左边和最右边，两个成对角关系的点）这个在代码中要写上“CORNERS”：
rectMode(CORNERS)
rect(x1,y1,x2,y2)
等你掌握了画方形，圆形ellipse()也就没什么难度了。这两个图形画法差不多。（B is a snap）唯一要注意的是，方形中指为"CORNERS",但在原型中是“CORNER”.这里没有s，具体原因三文我就没看懂了..........
“老板，这三张图看起来不圆啊”
嗯...因为现在是在像素作图，而且这个图框很小。解释起来不容易，如果想深入学习的，可以看 the pixels reference page。这个文章是有点专业的， 适合部分有专研精神的同学先读起。其他同学，不要着急，可以先来体验一下今天的学习成果，输入这些代码：
size(200,200);
rectMode(CENTER);
rect(100,100,20,100);
ellipse(100,70,60,60);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
line(90,150,80,160);
line(110,150,120,160);
你会得到...........
这个图的图框大小是200*200.关于图框大小的设定，点着→ →size() （其实自习第一课的时候也提过了）
【重点】point、line、rectangular、ellispe的画法
原文地址：http://processing.org/learning/drawing/ ，文章作者是Daniel Shiffman。
【坐标轴空间】Coordinate Space
在开始学Processing之前，我们先画一个方格图（channel our eighth grade selves？），然后画一条线。OK~你看，两点之间直线最短。这是一句老话，然后我们要今天要搞的...咳咳研究的就是这两点。
 |
就是上图这个样子的直线。假设如果你想要你朋友画一个同样的图形怎么办呢？是不是对着他吼一声“给我一个点（1,0）到点（4,5）的直线。”恩，蓝后，你这个朋友现在是台电脑，那你要命令它画这条线就更省事了（都不用客套话有没有），只要客观科学地写下：
line(1,0,4,5)
上面这个命令（在这里，指令被叫做Function）应该不难理解。笔者觉得就算没有学过编程也能明白大概吧~其实它就是一句被缩减过的句子。原意如下图：
 |
有一个要点解释一下，电脑屏幕就相当于一个很大（a fancier piece)的方格图，每个像素都有相对应的坐标——由横轴数字X和纵轴数字Y来决定坐标的位置。我们就通过确定这些像素来决定图像形状和颜色。
然而还有一个需要注意的点：传统的直角坐标图把点(0,0)放在正中央，不过在电脑里，这个点跑到最上方了，而且Y轴倒过来，数值逐渐增长（没有负数的概念）。
 |
【简单的图形】Simple Shapes
学画画的就明白有几个图形是最最基础的图形，大千世界万变不离其中。来，先认识（记住单词，这是日后要用的指令）：
 |
接下来我们要做的就是学习用Processing怎么确定图形的位置和大小（以后还有颜色）。而为了学习方便，假设了口的长宽只有10像素。其实这是不合常理的（那个窗口只有几毫米），如果在实际工作中，你肯定会要一个大好几倍的窗口。 不过呢，现在是为了好理解嘛。
首先是，point()，画个点。
点是最简单的图形了，只要确定一个X轴位置和Y轴位置就行了。
 |
第二个，画line()也不难，标清楚两个点的位置就可以啦。
 |
好了，来到方形rect()之后呢，稍微复杂了点。在Processing中内，我们通过左角顶点来定位这个方形，还有接下来的长宽。指令的写法就是：
rect(x,y,宽width,长height)
 |
第二种画方形的方式是确定中心点，随后在确定长度和宽度。如果要用这种方法的话，那就需要在代码中写明“CENTER"。这里还要注意大小写（case-sensitive）：
rectMode(CENTER);
rect(x,y,宽width,长height)
 |
最后一种方法，是确定两个重要的点（最左边和最右边，两个成对角关系的点）这个在代码中要写上“CORNERS”：
rectMode(CORNERS)
rect(x1,y1,x2,y2)
 |
等你掌握了画方形，圆形ellipse()也就没什么难度了。这两个图形画法差不多。（B is a snap）唯一要注意的是，方形中指为"CORNERS",但在原型中是“CORNER”.这里没有s，具体原因三文我就没看懂了..........
 |
 |
 |
“老板，这三张图看起来不圆啊”
嗯...因为现在是在像素作图，而且这个图框很小。解释起来不容易，如果想深入学习的，可以看 the pixels reference page。这个文章是有点专业的， 适合部分有专研精神的同学先读起。其他同学，不要着急，可以先来体验一下今天的学习成果，输入这些代码：
size(200,200);
rectMode(CENTER);
rect(100,100,20,100);
ellipse(100,70,60,60);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
line(90,150,80,160);
line(110,150,120,160);
你会得到...........
 |
这个图的图框大小是200*200.关于图框大小的设定，点着→ →size() （其实自习第一课的时候也提过了）
