|
|
本帖最后由 弘毅 于 2012-11-19 20:34 编辑
坐标系和形状
本教程适用于Processing1.1及以上版本。如果您发现有任何错误或者有什么建议,请联系我们。本教程源自《学习Processing》艺术,Daniel Shiffman著,Morgan Kaufmann 出版社出版,2008Elsevier Inc公司版权所有。版权所有。
坐标空间
在我们使用Processing编程之前,我们得回到自己八年级的时候,拿一张坐标纸,在上面画一条线。在有两个点的坐标纸上,两点之间最短的线已经很原始了,我们就是要从这儿开开始。
上图显示的是在点A(1,0)和B(4,5)之间的短线。如果你想吸引你的朋友来画一条同样的线,你应该说：“请画一条从(1,0)点到(4,5)点的线。”但是现在呢,想想你的朋友就是一台电脑,现在你想指导这位数字朋友在他的显示器上显示一条这样的线。使用同样的命令(这时你就需要跳过多余的话,只要求使用一个精确的格式)。指令看起来是这样：
[pre lang="processing" line="1"]line(1,0,4,5)；[/code]
即使没有去研究书写代码的语法,上述声明也需要使用很多原理。我们为跟在标题为“line”的机器后面提供命令(我们称之为“函数”)。此外,我们为怎么画这条从点A(1,0)到B(4,5)的线制定一些参数。如果你把这行代码看做一个句子,那么这个函数就是i动词,参数就是句子的对象。句子代码同样需要以分号结束,不是句号。
这儿的关键是认识到电脑屏幕并不比一张空白的坐标纸多什么。屏幕的每一个像素都是一个坐标——两个数,“x”(水平)和“y”(垂直)——决定了这个点在空间中的位置。我们的工作就是制定像素坐标应该使用的形状和颜色。
但是这儿有个陷阱。八年级的坐标纸(“笛卡尔坐标系”)将(0,0,)点放在中间,y轴向上、x轴向右(正数方向是这样,负数的话就是朝下、朝左)。电脑窗口中像素的坐标轴的y轴是反过来的。(0,0)点在左上角,正数方向水平向右、垂直向下。
简单形状
在你所看到的绝大多数Processing编程例子实际上都是视觉方面的。这些例子的核心包括形状绘制和像素设置。让我们先看看四种基本形状。
对每个形状我们首先问自己,这个形状的位置和大小(以及后面的颜色)的哪些信息需要详细说明,以及学会怎样使用Processing处理得到这些信息。在每个图形下面,我们假定一个宽10像素高10像素的窗口。这个并不特别现实,因为当你准备编写代码后,你一定会使用更大的窗口(10×10像素在屏幕中仅仅是几毫米)。不过出于演示的目的,为了将像素呈现在方格纸(现在的)上,使用较少数量能更好的说明每行代码的内部工作原理。
point()点是最简单的形状,也是一个很好的开始。为了画一个点我们只需要一个x坐标和一个y坐标。
line()画线并不困难,只需要两个点：(x1,y1)和(x2,y2):
一旦我们要画一个矩形,rect(),事情就变得有点复杂了。在Processing中,矩形是定义在坐标系左上角的,还有它的宽度和高度。rect(x,y,宽,高)。
第二种绘制矩形的方法包括指定其中心,还有宽度和高度。如果我们更喜欢这种方法的话,我们首先要在矩形指令之前表明我们想用“CENTER”中心模式。请注意,Processing要区分大小写。rectMode(CENTER )；rect(x1,y1,宽,高)。
最后,我们同样可以用两个点来绘制一个矩形(左上角和右下角)。这种模式就是“CORNERS”角点法。rectMode(CORNERS )；rect(x1,y1,x2,y2)。
一旦我们能顺利的画出举行了,椭圆ellipse()就快了。事实上,椭圆和矩形差不多相同,区别在于画一个椭圆的同时有一个边界框。默认的ellipse()模式是中心“CENTER”,而不是角“CORNER”。
必出认识到这些圆看起来并不是很圆。Processing有一个内置的方法来挑选那些应该被用来创建圆形的像素。
这样放大的话,我们看到的是一群围成一个圆形的小方块,但是在电脑屏幕上放大,我们就可以得到一个漂漂亮亮的大圆。Processing同样提供自行开发单像素着色算法(事实上我们可以想想自己将一个点反复使用)但是现在,我们很乐意让“ellipse”语句帮我们做这个艰辛的工作。(更多关于像素介绍,从这儿开始：像素介绍页面,尽管被警告是比这个更高级的教程。)
现在让我们看看一些在200×200窗口中的形状代码实际设置。注意,这儿使用size()函数制定窗口宽高。
[pre lang="processing" line="1"]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);[/code]
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？注册
x
|
发表于 2012-11-6 21:19:27
