打印图书打印图书

形状

站点: 聚观点-创意编程
课程: 必修1. 互联网创意编程基础
图书: 形状
打印: 访客用户
日期: 2024年04月24日 Wednesday 05:37

目录

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.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.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.1. 开始记录形状


beginShape()

示例：

▶️运行代码
 

4.2. 结束记录形状


📖endShape()

示例：

▶️运行示例代码



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作为形状描述的数据。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"/></svg>


all-distinct

all

basic-array

basic-svg

medley

multiple-distinct

multiple

rects

vanilla-canvas


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.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.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();
}

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





8. 3D模型

3D模型