p5.js | curveTightness()函数

p5.js 中的curveTightness()函数用于修改使用curve() 和curveVertex() 函数创建的曲线的质量。紧密度参数用于定义曲线如何拟合其顶点。曲线的默认紧密度值为 0.0，而 1.0 的值将所有点用直线连接起来。
紧密度值的范围可以从 -5.0 到 5.0，值越高，曲线变形越大，同时仍然可以识别。
句法：

curveTightness( amount )

参数：此函数接受一个如上所述和如下所述的参数：

• 量：它是一个数字，指定曲线从其原始顶点变形的量。该值的范围从 -5.0 到 5.0。

下面的示例说明了 p5.js 中的curvePoint()函数：

示例 1：

javascript

function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  tightnessSlider = createSlider(-5, 5, 0, 0.1);
  tightnessSlider.position(20, 40);
}
  
function draw() {
  background("green");
  text("Move the sliders to change the tightness of the curve", 10, 20);
  
  // Get the tightness value
  tightnessValue = tightnessSlider.value();
  
  // Set the tightness value
  curveTightness(tightnessValue);
  
  // Draw curve using curveVertex()
  beginShape();
  curveVertex(20, 50);
  curveVertex(50, 75);
  curveVertex(250, 150);
  curveVertex(50, 250);
  curveVertex(20, 250);
  endShape();
  
  text("Current Tightness: " + tightnessValue, 10, 280);
}

输出：

示例 2：

javascript

function setup() {
  createCanvas(600, 300);
  textSize(20);
  
  tightnessSlider = createSlider(-5, 5, 0, 0.1);
  tightnessSlider.position(20, 40);
}
  
function draw() {
  background("green");
  text("Move the sliders to change the tightness of the curve", 10, 20);
  
  // Get the tightness value
  tightnessValue = tightnessSlider.value();
  
  // Set the tightness value
  curveTightness(tightnessValue);
  
  // Draw curve using curve()
  curve(60, 200, 140, 120, 500, 250, 450, 250);
  
  text("Current Tightness: " + tightnessValue, 10, 280);
}

输出：

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