关于填充 p5.js 中的褪色问题

Question

几天以来我一直遇到一个问题。

我开始自我介绍，我是Quentin，法国学生，我也在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;

    }

}

Answer 1

您需要使用fill()设置填充颜色：noStroke();fill(colorTransition);triangle(x, 200, x1, 100, y, 200);let x = 0, x1 = 100, y = 200, speed = 0, amt = 0;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);    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;    }    noStroke();    fill(colorTransition);    triangle(x, 200, x1, 100, y, 200);}      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>