形状 | 聚观点

1. 平面

1.1. 点

point()

▶️运行代码

Fulia Set（朱丽叶集）

▶️运行代码

▶️运行代码（使用数学公式）

1.2. 直线

line()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

1.3. 矩形（顶点位置）

rect()

示例：

▶️运行示例代码

function setup(){
  createCanvas(200,200);
  background('#c0c0c0');
  rectMode(CENTER);
};

function draw(){
  fill('#ff6600');
  stroke('#000000');
  strokeWeight(6);
  rect(100,100,100, 100, 20, 15, 10, 5);
};

舞台区显示的画布内容如下：

Description

Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list.

Syntax

rect(x, y, w, [h], [tl], [tr], [br], [bl])

rect(x, y, w, h, [detailX], [detailY])

Parameters

x

Number:
x-coordinate of the rectangle.
y

Number:
y-coordinate of the rectangle.
w

Number:
width of the rectangle.
h

Number:
height of the rectangle.
(Optional)
tl

Number:
optional radius of top-left corner.
(Optional)
tr

Number:
optional radius of top-right corner.
(Optional)
br

Number:
optional radius of bottom-right corner.
(Optional)
bl

Number:
optional radius of bottom-left corner.
(Optional)
detailX

Integer:
number of segments in the x-direction (for WebGL mode)
(Optional)
detailY

Integer:
number of segments in the y-direction (for WebGL mode)
(Optional)

1.4. 矩形（段数）

rect()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

1.5. 四角形

quad()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

1.6. 椭圆形

菜单位置：形状-平面

🎞️ellipse()

在画布上绘制一个椭圆。默认情况下，前两个参数为椭圆的中心点坐标，即椭圆的起点（origin）。第3和4个参数为椭圆形的宽度和高度，即椭圆的大小（size）。如果没有指定第4个参数（高度），那么高度值等同于宽度值，即第3个参数即是宽度也是高度。如果宽度和高度相同，则为圆形。

调用🎞️椭圆绘制模式函数，可改变起点和大小的数值意义，例如起点改为左上角或者大小改为半径。

▶️运行示例

1.7. 弧形

arc()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

1.8. 正方形

square()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

1.9. 三角形

triangle()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

2. 属性

2.1. 矩形绘制模式

rectMode()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

2.2. 椭圆绘制模式

菜单位置：形状-属性

🎞️ellipseMode()

椭圆绘制模式有四种：

中心点，宽度、高度
中心点，半径宽度、半径高度
左上角，宽度、高度
两个对角落位置

示例：

▶️运行示例

2.3. 线条顶点风格

strokeCap()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

2.4. 线条连接风格

strokeJoin()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

2.5. 线条宽度

strokeWeight()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

2.6. 禁用/启用平滑形状

noSmooth()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

3. 弧形

3.1. 贝塞尔曲线

bezier()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

3.2. 曲线

curve()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4. 顶点

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4.3. 顶点（xy）

vertex()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4.4. 顶点（xyz）

vertex()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4.5. 顶点（xyzuv）

vertex()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4.6. 定义曲线顶点

curveVertex()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

4.7. Superformula曲线

▶️示例

▶️示例2

📖算法

m（顶点数）、n1、n2、n3的值如下所示：

[ [1, 3, 4.5, 10, 10],

[1, 4, 12, 15, 15],

[1, 7, 10, 6, 6],

[1, 5, 4, 4, 4],

[1, 5, 2, 7, 7],

[0.3, 5, 2, 13, 13],

[1, 4, 1, 1, 1],

[0.4, 4, 1, 7, 8],

[0.3, 6, 1, 7, 8],

[1, 2, 2, 2, 2],

[2, 1, 0.5, 0.5, 0.5],

[2, 2, 0.5, 0.5, 0.5],

[2, 3, 0.5, 0.5, 0.5],

[1, 5, 1, 1, 1],

[1, 2, 1, 1, 1],

[1, 7, 3, 4, 17],

[0.5, 2, 1, 4, 8],

[1.5, 6, 4, 4, 8],

[1, 7, 2, 8, 4],

[1, 4, 0.5, 0.5, 4],

[1, 8, 0.5, 0.5, 8],

[1, 16, 0.5, 0.5, 16],

[1, 3, 30, 15, 15],

[1, 4, 30, 15, 15]]

▶️运行示例代码（致密填充）

5. 转型

使用flubber实现任意多边形到任意多边形的平滑变化。

5.1. 多边形插值

flubber

▶️运行示例代码

采用一组点[x,y]坐标作为形状描述的数据。

▶️运行示例代码2

采用SVG图形的path作为形状描述的数据。

6.1. 平移

translate()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.2. 缩放

scale()

🔗p5参考链接

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

缩放负值则会实现翻转（Flip）效果
▶️运行示例代码

6.3. 旋转

rotate()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.4. 绕着x轴旋转

rotateX()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.5. 绕着y轴旋转

rotateY()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.6. 绕着z轴旋转

rotateZ()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.7. 形状x轴切变量

shearX()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.8. 形状y轴切变量

shearY()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.9. 矩阵相乘2*3

applyMatrix()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.10. 矩阵相乘4*4

applyMatrix()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

6.11. 将现有的矩阵替换成单位矩阵

resetMatrix()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7. 3D形状

7.1. 平面

plane()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7.2. 立方体

box()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7.3. 球体

sphere()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7.4. 圆柱形

▶️运行示例代码

🔗cylinder()

7.5. 锥形

cone()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7.6. 椭球形

ellipsoid()

示例：

▶️运行示例代码

let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：

7.7. 圆环形

torus()

▶️运行代码

8. 3D模型

3D模型

站点:	聚观点-创意编程
课程:	必修1. 互联网创意编程基础
图书:	形状

打印:	访客用户
日期:	2024年12月22日星期日 16:06

形状

目录

1. 平面

1.1. 点

1.2. 直线

示例：

1.3. 矩形（顶点位置）

示例：

Description

Syntax

Parameters

1.4. 矩形（段数）

示例：

1.5. 四角形

示例：

1.6. 椭圆形

1.7. 弧形

示例：

1.8. 正方形

示例：

1.9. 三角形

示例：

2. 属性

2.1. 矩形绘制模式

示例：

2.2. 椭圆绘制模式

示例：

2.3. 线条顶点风格

示例：

2.4. 线条连接风格

示例：

2.5. 线条宽度

示例：

2.6. 禁用/启用平滑形状

示例：

3. 弧形

3.1. 贝塞尔曲线

示例：

3.2. 曲线

示例：

4. 顶点

4.1. 开始记录形状

示例：

4.2. 结束记录形状

示例：

4.3. 顶点（xy）

示例：