p5.js 在 X 帧后更改对象颜色

Question

我想随时间改变对象的填充颜色。有没有办法在 X 帧后更改对象的填充颜色？我正在学习构造函数，我在想在代码的 updateParticle 函数中，在 this.age 计数到 'X' 之后，椭圆的填充颜色可能会发生变化。

'''

function Particle(x, y, xSpeed, ySpeed, size, colour) {
    this.x = x;
    this.y = y;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.size = size;
    this.colour = colour;
    this.age = 0;

    this.drawParticle = function() {
        fill(this.colour);
        noStroke();
        ellipse(this.x, this.y, this.size);
    }

    this.updateParticle = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
        this.age++;
    }
}


function Emitter(x, y, xSpeed, ySpeed, size, colour) {
    this.x = x;
    this.y = y;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.size = size;
    this.colour = colour;

    this.particles = [];

    this.startParticles = [];
    this.lifetime = 0;

    this.addParticle = function() {
        var p = new Particle(random(this.x - 10, this.x + 10),
            random(this.y - 10, this.y + 10),
            random(this.xSpeed - 0.4, this.xSpeed + 0.4),
            random(this.ySpeed - 5, this.ySpeed - 1),
            random(this.size - 4, this.size + 40),
            this.colour);
        return p;
    }

    this.startEmitter = function(startParticles, lifetime) {
        this.startParticles = startParticles;
        this.lifetime = lifetime;

        for (var i = 0; i < startParticles; i++) {
            this.particles.push(this.addParticle());
        }
    }

    this.updateParticles = function() {
        var deadParticles = 0
        for (var i = this.particles.length - 1; i >= 0; i--) {
            this.particles[i].drawParticle();
            this.particles[i].updateParticle();
            if (this.particles[i].age > random(0, this.lifetime)) {
                this.particles.splice(i, 1);
                deadParticles++;
            }
        }
        if (deadParticles > 0) {
            for (var i = 0; i < deadParticles; i++) {
                this.particles.push(this.addParticle());
            }
        }
    }

}

var emit;

function setup() {
    createCanvas(800, 600);
    emit = new Emitter(width / 2, height - 100, 0, -1, 10, color(200, 0, 200, 50));
    emit.startEmitter(600, 4000);
}

function draw() {
    background(200);
    emit.updateParticles();
}

'''

Answer 1

那么你可以：

if(frameCount % 30 == 0){ // % 30 is the remainder of num / 30, so 4 % 3 = 1, since 3 / 3 = 0 And 4 / 3 = 3.33   
   fill("lime")           // these are just preset colors in p5.js AND css lime == rgb(0,255,0)
} else {
   fill('darkred')
}

或者您也可以使用例如 switch 语句来做到这一点：无缘无故地使用背景

switch(MY_frameCount){
   case 1:
      background('blue')
      break
   case 2:
      background("darkgreen")
      break
   case 376:
      background(crimson)
   // break
}
MY_frameCount ++

或：

if(Math.random() < 0.1){
   fill(Math.random() * 255, Math.random() * 255, Math.random() * 255)
} // this should on average fill with random color every 10 frames

p5.js 在 X 帧后更改对象颜色

p5.js change object colour after X frames

p5.js