p5.js | curvePoint()函数
p5.js 中的curvePoint()函数用于计算曲线在给定点的坐标。它获取特定轴的曲线坐标,并找到曲线在点“t”处的坐标,可以将其指定为参数。
曲线中点的完整位置可以通过在曲线的 x 坐标和 y 坐标上使用函数找到一次,然后将它们一起使用来找到。
句法:
curvePoint( a, b, c, d, t )
参数:该函数接受上面提到的五个参数,如下所述:
- a:它是一个数字,指定曲线的第一个点。
- b:它是一个数字,指定曲线的第一个控制点。
- c:它是一个数字,指定曲线的第二个控制点。
- d:它是一个数字,指定曲线的第二个点。
- t: 0到1之间的一个数字,用作曲线坐标的起点和终点之间的位置。
返回值:它返回一个数字,指定给定位置的曲线值。
下面的例子说明了 p5.js 中的curvePoint()函数:
示例 1:
function setup() {
createCanvas(600, 300);
textSize(18);
curvePointLocationSlider = createSlider(0, 1, 0, 0.1);
curvePointLocationSlider.position(20, 40);
}
function draw() {
background("green");
fill("black");
text(
"Move the slider to change the location of the displayed curve point",
10, 20
);
// Get the required location of curve
curvePointLocationValue = curvePointLocationSlider.value();
let p1 = { x: 50, y: 250 };
let p2 = { x: 140, y: 150 };
let p3 = { x: 400, y: 150 };
let p4 = { x: 350, y: 250 };
// Draw curve using curveVertex()
beginShape();
curveVertex(p1.x, p1.y);
curveVertex(p2.x, p2.y);
curveVertex(p3.x, p3.y);
curveVertex(p4.x, p4.y);
endShape();
// Find the X and Y coordinate using the curvePoint() function
let pointX = curvePoint(p1.x, p2.x, p3.x, p4.x, curvePointLocationValue);
let pointY = curvePoint(p1.y, p2.y, p3.y, p4.y, curvePointLocationValue);
fill("orange");
// Display a circle at that point
circle(pointX, pointY, 10);
}
输出:
示例 2:
function setup() {
createCanvas(600, 300);
textSize(18);
maxPointsSlider = createSlider(2, 20, 10, 1);
maxPointsSlider.position(20, 40);
}
function draw() {
background("green");
fill("black");
text("Move the slider to change the number of intermediate points", 10, 20);
// Get the required location of curve
maxPoints = maxPointsSlider.value();
let p1 = { x: 50, y: 250 };
let p2 = { x: 100, y: 150 };
let p3 = { x: 500, y: 150 };
let p4 = { x: 350, y: 250 };
// Draw curve using curveVertex()
beginShape();
curveVertex(p1.x, p1.y);
curveVertex(p2.x, p2.y);
curveVertex(p3.x, p3.y);
curveVertex(p4.x, p4.y);
endShape();
for (let i = 0; i <= maxPoints; i++) {
// Calculate step using the maximum number of points
let step = i / maxPoints;
// Find the X and Y coordinate using the curvePoint() function
let pointX = curvePoint(p1.x, p2.x, p3.x, p4.x, step);
let pointY = curvePoint(p1.y, p2.y, p3.y, p4.y, step);
fill("orange");
// Display a circle at that point
circle(pointX, pointY, 10);
}
}
输出:
在线编辑器: https://editor.p5js.org/
环境设置: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考: https://p5js.org/reference/#/p5/curvePoint