Coordinates 座标系统

本章节介绍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）后，一个视觉窗口弹出并允许内存在窗口内绘制图形，当然这个视觉窗口可以设定的比屏幕还大，但通常情况下最好比屏幕小或刚好合适。

使用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)位置在右下角底端。

-- WhaleForest - 07 Nov 2007