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