Javascript 关于fill p5.js中褪色颜色的问题

几天以来，我一直被一个问题困扰着

我开始自我介绍，我是昆汀，法国学生，我也为onepoint工作

我的问题是，我正在进行一个个人项目，稍后学习处理和WebGL，我想在我的三角形中使用淡入淡出，一种带有两种特定颜色的动态淡入淡出（第一种是开始颜色，第二种是结束颜色）。我使用lerpColor，但我的代码不起作用，我想得到一些帮助，请！：）（对不起，我说话的时候英语更好）

这就是我的全部代码：

let x = 50;
let x1 = 100;
let y = 150;
let speed = 5;
let startColor;
let endColor;
let amt;


function setup() {
    createCanvas(windowWidth, 800);
    
}

function draw() {
    colorMode(RGB);
    background(252, 238, 10);
    shape(); // Appel de la function shape
    bounce();// appel de la fonction bounce

}

function bounce() {
    x = x + speed;
    x1 = x1 + speed;
    y = y + speed;
    if (y > windowWidth || x < 0) {
        speed = speed * -1;
    }
}

function shape() {
    colorMode(HSB, 360, 100 , 100);
    triangle(x, 200, x1, 100, y, 200);
    noStroke();
    let startColor = color(288 , 71 , 60 );
    let endColor = color( 352 , 90 , 16);
    amt += 0.01;
    let colorTransition = (lerpColor(startColor,endColor,amt));
    if (amt >= 1){
        amt = 0.0;
    }
}

设x=50；
设x1=100；
设y=150；
速度=5；
让我们开始着色；
让我们结束颜色；
让amt；
函数设置（）{
createCanvas（窗口宽度，800）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
shape（）；//Appel de la函数形状
bounce（）；//appel de la fonction bounce
}
函数bounce（）{
x=x+速度；
x1=x1+速度；
y=y+速度；
如果（y>窗宽| | x<0）{
速度=速度*-1；
}
}
函数形状（）{
彩色模式（HSB，360，100，100）；
三角形（x，200，x1，100，y，200）；
仰泳（）；
让startColor=color（288,71,60）；
让endColor=color（352,90,16）；
amt+=0.01；
let colorTransition=（lerpColor（startColor，endColor，amt））；
如果（金额>=1）{
amt=0.0；
}
}

您需要使用设置填充颜色：

noStroke（）；
填充（颜色转换）；
三角形（x，200，x1，100，y，200）；

设x=0，x1=100，y=200，速度=0，金额=0；
函数设置（）{
createCanvas（窗口宽度，800）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
shape（）；//Appel de la函数形状
bounce（）；//appel de la fonction bounce
}
函数bounce（）{
x=x+速度；
x1=x1+速度；
y=y+速度；
如果（y>窗宽| | x<0）{
速度=速度*-1；
}
}
函数形状（）{
彩色模式（HSB，360，100，100）；
让startColor=color（288,71,60）；
让endColor=color（352,90,16）；
amt+=0.01；
let colorTransition=（lerpColor（startColor，endColor，amt））；
如果（金额>=1）{
amt=0.0；
}
仰泳（）；
填充（颜色转换）；
三角形（x，200，x1，100，y，200）；
}

您需要使用设置填充颜色：

noStroke（）；
填充（颜色转换）；
三角形（x，200，x1，100，y，200）；

设x=0，x1=100，y=200，速度=0，金额=0；
函数设置（）{
createCanvas（窗口宽度，800）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
shape（）；//Appel de la函数形状
bounce（）；//appel de la fonction bounce
}
函数bounce（）{
x=x+速度；
x1=x1+速度；
y=y+速度；
如果（y>窗宽| | x<0）{
速度=速度*-1；
}
}
函数形状（）{
彩色模式（HSB，360，100，100）；
让startColor=color（288,71,60）；
让endColor=color（352,90,16）；
amt+=0.01；
let colorTransition=（lerpColor（startColor，endColor，amt））；
如果（金额>=1）{
amt=0.0；
}
仰泳（）；
填充（颜色转换）；
三角形（x，200，x1，100，y，200）；
}

---

谢谢您的帮助！祝你今天愉快！：）谢谢你的帮助！祝你今天愉快！：）@Rabbid76是的，你的帮助是宝贵的，我发现了如何用颜色产生我想要的效果，现在我在想一种方法，在画布上随机移动我的三角形并复制这个三角形：）@Rabbid76是的，你的帮助是宝贵的，我发现了如何用颜色产生我想要的效果，现在我在想一种方法，随机移动我的三角形绘制画布并复制此三角形：）