📜  p5.js | curveTightness()函数

📅  最后修改于: 2022-05-13 01:56:49.880000             🧑  作者: Mango

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


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


输出:

曲线紧曲线顶点Fn

示例 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);
}

输出:

曲线紧曲线Fn

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