CODEWITHSUNDEEP
javascriptprocessingp5.js
zoltana
zoltana

Reputation: 71

How to create animation class library for p5js

I am working on an application where I'd like to provide overlays of different animations onto a range of videos using p5js. I'm looking to organize my classes of animation types so that each animation has a similar structure to update and destroy objects during each loop. My plan is to have an array of animations that are currently "active" update them each iteration of the loop and then destroy them when they are completed. I built a class to fade text in this manner but I'm getting some weird flashy behavior that seems to occur every time a new animation is triggered in the middle of another animation. I've been trying to debug it but have been unsuccessful. Do you have any suggestions as to: (1) if this is due to my code structure? (and maybe you have a suggestion of a better way), or (2) I'm doing something else incorrectly?

Here is the code: 

// create an array of currently executing animations to update 
// each animation class needs to have one function and one attribute: 
//      (1) update() -- function to move the objects where ever they need to be moved
//      (2) done -- attribute to determine if they should be spliced out of the array 
var animations = []; 

//////////////////////////////////////////
// Global Variables for Animations      //
//////////////////////////////////////////


let start = false; 
let count = 0; 

function setup(){
    let canv = createCanvas(1920, 1080); 
    canv.id = "myP5canvas"; 
    background(0);  
}

function draw(){

    background(0); 
    // Check things to see if we should be adding any animations to the picture 
    var drawText = random(100); 
    if (drawText > 98) { 
    //if (start == false) {
        let r = 255; 
        let g = 204; 
        let b = 0; 
        let x = random(width-10); 
        let y = random(height-10); 
        animations.push(new TextFader("Wowwwzers!", 100, 'Georgia', r, g, b, x, y, count)); 
        start = true; 
        count += 1; 
    }



    // Update animations that exist! 
    for (var i=0; i < animations.length; i++) { 
        // update the position/attributes of the animation
        animations[i].update(); 
        // check if the animation is done and should be removed from the array 
        if (animations[i].done) { 
            console.log("SPLICE: " + animations[i].id); 
            animations.splice(i, 1); 
        } 

    }
}


// EXAMPLE ANIMATION 
// TEXT FADE 
let TextFader = function(words, size, font, red, green, blue, xloc, yloc, id) {
    this.id = id; 
    console.log("create fader: " + this.id); 
    // translating inputs to variables 
    this.text = words; 
    this.size = size; 
    this.font = font; 
    // To Do: separating out each of the values until I figure out how to fade separately from the color constructor
    this.red = red; 
    this.green = green; 
    this.blue = blue; 

    this.xloc = xloc; 
    this.yloc = yloc; 

    // Maybe add customization in the future for fading... 
    this.fade = 255; 
    this.fadeTime = 3; // in seconds 
    this.fadeIncrement = 5; 
    // Variables to use for destruction
    this.createTime = millis(); 
    this.done = false; 
}

TextFader.prototype.update = function() { 
    // Update the fade 
    // If the fade is below zero don't update and set to be destroyed 
    this.fade -= this.fadeIncrement; 
    if (this.fade <= 0) { 
        this.done = true; 
    } else { 
        this.show(); 
    }
}

TextFader.prototype.show = function() { 
    textFont(this.font); 
    textSize(this.size); 
    fill(this.red, this.green, this.blue, this.fade); 
    text(this.text, this.xloc, this.yloc);
    console.log("Drawing: " + this.id + " fade: " + this.fade + " done: " + this.done); 
}

Upvotes: 0

Views: 159

Answers (1)

Ethan Hermsey
Ethan Hermsey

Reputation: 940

Yay, I've got you an answer! It works like expected when you reverse the for loop that loops over the animations.

Because you splice elements of the same array inside the loop, some elements are skipped. For example; animations[0].done = true and gets removed. That means that animations[1] is now in the spot of animations[0] and animations[2] is now in the spot of animations[1].
The i variable is incremented to 1, so on the next loop, you update animations[1] (and skip the animation that is now in animation[0]).

When you reverse the loop, everything before the element you splice stays the same and nothing is skipped.
For example; animations[2].done = true and gets removed. That means that animations[1] is still in the spot of animations[1].
The i variable is decremented to 1, so on the next loop, you update animations[1] and don't skip any elements.

// Update animations that exist! 
for (var i = animations.length - 1; i >= 0; i--) { 
    // update the position/attributes of the animation
    animations[i].update(); 
    // check if the animation is done and should be removed from the array 
    if (animations[i].done) { 
        //console.log("SPLICE: " + animations[i].id); 
        animations.splice(i, 1); 
    } 

}

Upvotes: 1

Related Questions