Processing 如何在现有曲线p5.js上的两个bezier点之间绘制重叠曲线_Processing_P5.js

Processing 如何在现有曲线p5.js上的两个bezier点之间绘制重叠曲线

processing

Processing 如何在现有曲线p5.js上的两个bezier点之间绘制重叠曲线,processing,p5.js,Processing,P5.js,我正在使用p5.js绘制贝塞尔曲线。我想用另一种颜色画一条较短、部分重叠的曲线。基本上，我想在某些地方改变曲线的颜色。我能够绘制第一条曲线，并从曲线中获得两个贝塞尔点，但我无法确定新（较小）曲线要使用哪些控制点您希望在两个t值之间提取一段Bézier曲线。重复这样做，您可以将一条Bézier曲线细分为N条曲线，每条曲线都可以单独绘制和着色这看起来适合（可以找到文档）满足这一需要相关的方法有.split（t1，t2）和.getLUT（steps），它们返回原始贝塞尔曲线分段的点坐标在t1和

我正在使用p5.js绘制贝塞尔曲线。我想用另一种颜色画一条较短、部分重叠的曲线。基本上，我想在某些地方改变曲线的颜色。我能够绘制第一条曲线，并从曲线中获得两个贝塞尔点，但我无法确定新（较小）曲线要使用哪些控制点

您希望在两个t值之间提取一段Bézier曲线。重复这样做，您可以将一条Bézier曲线细分为N条曲线，每条曲线都可以单独绘制和着色

这看起来适合（可以找到文档）满足这一需要

相关的方法有

.split（t1，t2）

和

.getLUT（steps）

，它们返回原始贝塞尔曲线分段的点坐标在t1和t2之间的查找表

现在，使用Processing，在坐标表上迭代，并在点之间调用Processing的

line（）

方法来绘制相关的曲线部分（原始Bézier曲线的一些细分）

否则，使用Processing的

bezierPoint（）

方法生成点列表（注意，必须分别为X和Y坐标调用该方法），将t增加一个足够小的值，以充分采样较大的Bézier曲线。同样，使用

line（）

在这些点上迭代以呈现子部分

您的问题也在math.stackexchange上得到了解决（更具描述性）。

下面是使用第7节中de Casteljau算法的示例。通过根据t的值更改笔划中的颜色值，可以更改曲线的颜色。在这里，当t<0.25时，我绘制红色曲线

var setup=function（）{
createCanvas（250250）；
noLoop（）；
}
var draw=function（）{
var点=[]；
点[点长度]=新点（90110）；
点[点长度]=新点（25,40）；
点[点长度]=新点（230,40）；
点数[点数长度]=新点数（150240）；
var t=1；
而（t>=0）{
绘制曲线（点，t）；
t-=.001；
如果（t<.25）{
冲程（250,0,0）；
}
}
}
函数绘制曲线（点，t）{
如果（点长度==1）{
提取点（点[0]）
}
否则{
var newpoints=[]；
对于（i=0；i


以下是使用第7节中的de Casteljau算法的示例。
通过根据t的值更改笔划中的颜色值，可以更改曲线的颜色。在这里，当t<0.25时，我绘制红色曲线

var setup=function（）{
createCanvas（250250）；
noLoop（）；
}
var draw=function（）{
var点=[]；
点[点长度]=新点（90110）；
点[点长度]=新点（25,40）；
点[点长度]=新点（230,40）；
点数[点数长度]=新点数（150240）；
var t=1；
而（t>=0）{
绘制曲线（点，t）；
t-=.001；
如果（t<.25）{
冲程（250,0,0）；
}
}
}
函数绘制曲线（点，t）{
如果（点长度==1）{
提取点（点[0]）
}
否则{
var newpoints=[]；
对于（i=0；i

您只需要P5.bezier（）、P5.bezierPoint（）和一些绘图函数（点、椭圆）（单击画布绘制颜色）

设x1=500，
y1=250，
x2=0，
y2=125，
x3=0，
y3=125，
x4=500，
y4=0；
设steps=1000，//颜色更改所需的变量
cStep=250/步，
c=cStep；
let=false；
函数设置（）{
var canvas=createCanvas（500250）；
noLoop（）；
}
函数绘图（）{
背景（50,50,100）；
noFill（）；
中风（255）；
贝塞尔（x1，y1，x2，y2，x3，y3，x4，y4）；
中风（100）；
文本（'点击'，x1/2，y2）；
}
mouseClicked=函数（）{
如果（鼠标按钮===左）{
如果（单击）{
清除（）；
draw（）；
}否则{
对于（让i=0；i0.2&&t您只需要P5.bezier（）、P5.bezierPoint（）和一些绘图函数（点、椭圆）（单击画布绘制颜色）

设x1=500，
y1=250，
x2=0，
y2=125，
x3=0，
y3=125，
x4=500，
y4=0；
设steps=1000，//颜色更改所需的变量
cStep=250/步，
c=cStep；
let=false；
函数设置（）{
var canvas=createCanvas（500250）；
bezier(x1,y1,cpx1,cpy1,cpx2,cpy2,x2,y2)
AX = x1
BX = cpx1
CX = cpx2
DX = x2

AY = y1
BY = cpy1
CY = cpy2
DY = y2

let t = 0.68;
let ncX = bezierPoint(AX, BX, CX, DX, t);
let ncY = bezierPoint(AY, BY, CY, DY, t);

let t1 = 0.93;
let ncX1 = bezierPoint(AX, BX, CX, DX, t1);
let ncY1 = bezierPoint(AY, BY, CY, DY, t1);

bezier(ncX,ncY,BX,BY,CX,CY,ncX1,ncY1)
//I tried using the original curve control points, but that didn't work