关于填充颜色淡入淡出的问题 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>

关于填充颜色淡入淡出的问题 p5.js

Issues about fade color in fill p5.js

javascript

processing

p5.js