p5.js | curveTightness()函数

curveTightness()函数是p5.js中的一个函数，用于设置三次曲线的紧密度。三次曲线是由四个锚点定义的曲线。通过 curveTightness()函数，我们可以调整曲线在锚点之间如何着重弯曲，使曲线更加平滑或角度更锐利。

语法

curveTightness(amount);

参数

amount：用于设置曲线紧密度的数值，范围在 -10 到 10 之间。如果输入的参数为0，则曲线将变成简单的直线段。

示例

这是一个简单的示例，演示了如何使用 curveTightness() 函数来创建一个三次曲线，并通过调整紧密度来改变曲线形状。

let tightnessVal = -5; // 初始曲线紧密度

function setup() {
  createCanvas(400, 400);
  noFill();
}

function draw() {
  background(200);
  curveTightness(tightnessVal);
  beginShape();
  curveVertex(100, 200);
  curveVertex(100, 100);
  curveVertex(300, 50);
  curveVertex(300, 200);
  endShape();
}

function mouseDragged() {
  // 通过鼠标 x 坐标的变化来改变曲线紧密度
  tightnessVal = map(mouseX, 0, width, -10, 10);
}

示例解释

首先，我们定义了 tightnessVal 变量，初始值为-5。setup() 函数创建了一个400x400的画布，并使用 noFill() 函数来绘制无填充颜色的形状。

draw() 函数在每个帧上绘制曲线。在 beginShape() 和 endShape() 函数之间，我们使用 curveVertex() 函数来定义曲线的四个锚点。为了绘制三次曲线，我们需要至少四个锚点。当我们调用 curveTightness() 函数时，它会改变曲线在"控制点"之间弯曲的方式。

最后，当用户拖动鼠标时，我们更新 tightnessVal 变量以反映鼠标x位置的更改。（通过以范围 [-10, 10] 的方式映射鼠标x坐标）。这使得用户能够通过鼠标交互来更改曲线的形状。

结论

curveTightness()函数让我们能够通过调整曲线在锚点之间弯曲的方式来创建平滑的曲线形状。这可以为我们创造一些非常独特的可视化效果或插图提供便利的帮助。如果你想更深入地了解 p5.js 中三次曲线的绘制以及相应的函数，请查看这里。