Shape1CoordinatesPrimitivesPrimitiveShapes < Processing

r2 - 23 Dec 2007 - 18:25:53 - WhaleForestYou are here: TWiki >

Processing Web > ProcessingHandbookChinese > Shape1CoordinatesPrimitivesPrimitiveShapes

Primitive Shapes 基础图形

我们可以使用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

(page 27)

除了画一排点来组成线段外，使用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);  </blockquote>
triangle()函数用来绘制三角形(triangle)。它有6个参数，每两个参数定位一个点：

2-12

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

2-08

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

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

2-13

(page 28)

p28

几何图形

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

(page 29)

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

(page 30) 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

-- WhaleForest - 07 Nov 2007

Processing

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback