CODEWITHSUNDEEP
p5.js
cloudAIMLvs
cloudAIMLvs

Reputation: 59

p5.js change object colour after X frames

I would like to change the fill colour of an object over time. Is there a way to change the fill colour of an object after X frames? I am learning about constructors, and I am thinking that in the code's updateParticle function, after this.age counts to 'X', the fill colour of the ellipse could change.

'''

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();
}

'''

Upvotes: 0

Views: 880

Answers (1)

Ulti
Ulti

Reputation: 543

Well you could just:

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')
}

or you could also do it with for example a switch statement: using background for no reason

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

or:

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

Upvotes: 1

Related Questions