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

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上得到了解决(更具描述性)。

您正在寻找两个t值之间的贝塞尔曲线的分段。重复这样做,您可以将一条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