p5.js |曲线（）函数

curve()函数用于在屏幕中间四个参数给定的两点之间绘制一条曲线。前两个和后两个参数用作控制点。

句法：

curve( x1, y1, x2, y2, x3, y3, x4, y4 )

或者

curve( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 )

参数：

Value	Description
x1	It is used to hold the x-coordinate of beginning control point.
y1	It is used to hold the y-coordinate of beginning control point.
z1	It is used to hold the z-coordinate of beginning control point.
x2	It is used to hold the x-coordinate of first point.
y2	It is used to hold the y-coordinate of first point.
z2	It is used to hold the z-coordinate of first point.
x3	It is used to hold the x-coordinate for second point.
y3	It is used to hold the y-coordinate for second point.
z3	It is used to hold the z-coordinate for second point.
x4	It is used to hold the x-coordinate of ending control point.
y4	It is used to hold the y-coordinate of ending control point.
z4	It is used to hold the z-coordinate of ending control point.

下面的例子说明了 CSS 中的 curve()函数：

示例 1：

function setup() { 
    
    // Create canvas of given size
    createCanvas(500, 300); 
    
    // Set the background of canvas
    background('green'); 
} 
  
function draw() { 
      
    // Use noFill() function to not fill the color
    noFill();
    
    // Set the stroke color
    stroke('white');
    
    // Use curve() function to create curve
    curve(50, 50, 400, 50, 50, 250, 50, 50);
  
    // Set the stroke color
    stroke('blue');
    
    // Use curve() function to create curve
    curve(400, 50, 50, 250, 50, 50, 50, 50); 
} 

输出：

示例 2：

function setup() { 
    
    // Create canvas of given size
    createCanvas(500, 300); 
    
    // Set the background of canvas
    background('green'); 
} 
  
function draw() { 
      
    // Use noFill() function to not fill the color
    noFill();
    
    // Set the stroke color
    stroke('white');
    
    // Use curve() function to create curve
    curve(50, 50, 50, 200, 50, 10, 50, 250, 150, 50, 50, 50);
  
    // Set the stroke color
    stroke('blue');
    
    // Use curve() function to create curve
    curve(50, 200, 450, 50, 250, 100, 350, 250, 250, 450, 450, 400); 
} 

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/