Processing学习记录（3）：2D几何图形绘制

1. 类型及函数表

2. 点

2.1. 函数及代码

point(x,y);

• 点的位置用x坐标和y坐标表示，两者以一个逗号隔开。
• 圆点坐标是 (0,0)。
• 举例如下：

void setup() {
  size(200,200);      // 设置画布大小为200*200
  point(100,100);     // 在坐标100,100画一个点
}

2.2. 效果

• 点很小，仔细观察才能看见画布中心位置有一个点。

2.3. 调整点的大小

• Processing中的点具有大小，与数学中点的概念是不一样的。
• 默认点的大小是一个像素。
• 调整点的大小的函数是：strokeWeight();。
• 代码及效果如下

void setup() {
  size(200,200);      // 设置画布大小为200*200
  strokeWeight(10);   // 设置点大小为10
  point(100,100);     // 在坐标100,100画一个点
}

• 注意：strokeWeight()需要放在point()函数的上一行，否则不生效。
• 此时看，中心点的圆就很大很明显了。

2.4. 案例：模拟椒盐噪声

2.4.1. 代码

void setup() {
  size(400,200);        // 设置画布大小为400*200
  background(0,0,0);    // 设置背景颜色为纯黑色
  noLoop();             // 只画一次，即draw只执行一次
}
void draw() {
  stroke(255,255,255);  //设置点的颜色为白色
  for(int i=0; i<10000; ++i)
  {
    point(random(800), random(600));  // 循环10000次，每次随机在窗口内画一个点
  }
}

2.4.2. 效果

————————————以下2020年5月27日更新————————————

3. 线段

3.1. 函数及代码

line(x1,y1,x2,y2)

• 前两个参数x1,y1设置线段的起点，后两个参数x2,y2设置线段的终点，两点确定一条线段。
• 举例如下：

void setup() {
  size(200,200);        // 设置画布大小为200*200
  line(60,20,20,60);    // 把坐标为(60,20)、(20,60)的两个点连接为线段
}

3.2. 效果

4. 三角形

4.1. 函数及代码

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

• 6个参数，每两个参数定义一个顶点，连接三个顶点绘制三角形。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  triangle(50,50,150,100,100,150);    // 三个顶点分别为(50,50)、(150,100)、(100,150)的三角形
}

4.2. 效果

• 默认是黑色描边，白色填充。

4.3. 修改填充颜色

• 可以修改图形的填充颜色，使用的是fill()函数。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  triangle(50,50,150,100,100,150);    // 三个顶点分别为(50,50)、(150,100)、(100,150)的三角形
  fill(255,0,0);                      // 填充红色
}

• 效果如下：

4.4. 修改描边颜色

• 可以修改图形的描边颜色，使用的是stroke()函数。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  triangle(50,50,150,100,100,150);    // 三个顶点分别为(50,50)、(150,100)、(100,150)的三角形
  fill(255,0,0);                      // 填充红色
  stroke(255,255,255);                // 描边白色
}

————————————以下2020年5月28日更新————————————

5. 四边形

5.1. 函数及代码

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

• 8个参数，每两个参数定义一个顶点，适当改变这些参数可以得到正方形、不规则四边形。
• (x1,y1)左上,(x2,y2)右上,(x3,y3)左下,(x4,y4)右下，顺时针方向排布。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  quad(40,40,100,50,180,180,50,150);    // 四个顶点分别为(40,40)、(100,50)、(100,150)、(50,150)的四边形
}

5.2. 效果

6. 矩形

6.1. 函数及代码

rect(a,b,c,d);

• 有4个参数，前两个参数a,b定位矩形左上角的坐标，c设置矩形的宽度,d设置高度。

void setup() {
  size(200,200);          // 设置画布大小为200*200  
}
void draw() {
  rect(50,50,80,45);    // 左上顶点为(50,50)、宽80、高45的矩形
}

6.2. 效果

6.3. 绘制模式

• 使用rectMode()函数调整矩形的绘制模式，有4种绘制模式。

6.3.1. CENTER模式（中心）

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  rectMode(CENTER);     // CENTER模式
  rect(50,50,80,45);    // 中心点坐标(50,50)、宽80、高45的矩形
}

注：模式名称字母必须大写，否则不生效。

6.3.2. RADIUS模式（半径）

• 参数c表示半宽，绘出的宽为2c。参数d表示半高，绘出的高为2d。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  rectMode(RADIUS);     // RADIUS模式
  rect(50,50,40,50);    // 中心点坐标(50,50)、宽80、高100的矩形
}

6.3.3. CORNER模式（默认模式）（角）

6.3.4. CORNERS模式

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  rectMode(CORNERS);    // CORNERS模式
  rect(50,50,100,100);  // 左上顶点坐标(50,50)、右下顶点坐标(100,100)的矩形
}

7. 椭圆

7.1. 函数及代码

ellipse(a,b,c,d);

• 有4个参数。
• 前两个参数a,b定义中心点坐标，c定义椭圆宽度，d定义椭圆高度。

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  ellipse(100,100,110,60);  // 中心点坐标(100,100)、宽110、高60的椭圆
}

7.2. 效果

7.3. 绘制模式

• 使用ellipseMode()函数调整矩形的绘制模式，有4种绘制模式。

7.3.1. CENTER模式（默认模式）

7.3.2. RADIUS模式

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  ellipseMode(RADIUS);        // RADIUS模式
  ellipse(100,100,100,50);    // 中心点坐标(100,100)、宽200、高100的椭圆
}

7.3.3. CORNER模式

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  ellipseMode(CORNER);        // CORNER模式
  ellipse(100,100,100,50);    // 外接矩形左上角坐标(100,100)、宽100、高50的椭圆
}

7.3.4. CORNERS模式

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  ellipseMode(CORNERS);        // CORNERS模式
  ellipse(100,100,180,200);    // 外接矩形左上角坐标(100,100)、外接矩形左上角坐标(180,200)的椭圆
}