1

I have the following code which uses parts of the p5.js library to animate some text in a fade in - fade out manner (which keeps looping indefinetely), i also inserted an image to make things clearer.

The problem is that after the first loop is done (when the whole text appears and then starts to disappear) i have severe lag in the browser, although it still works fine and keeps looping. Im not sure if there is a mistake in my code that threw the calculations off or if it's simply too heavy for the browser to run.

All of my vars are self explanatory, but if you have any questions or require another part of my script by all means ask me.

Any ideas that could help my case? Thank you.

enter image description here

//FADE animation /w Loop
    if ((animType == "FADE") && (animeLoop == true)) {
        if (animDirection == true) {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] < 255) {
                        //console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] > 50) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        }
                        else if (charsOpacity[i][j-1] > 50) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                    }
                    else {animDirection = false;}
                }
            }
        }
        else {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] > 0) {
                        console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] < 200) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        }
                        else if (charsOpacity[i][j-1] < 200) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                    }
                    else {animDirection = true;}
                }
            }
        }
    }
mitseas
  • 45
  • 5
  • I was also planning to add a few extra statements to cap the values in the charsOpacity array between 0-255 although it works without it. – mitseas Dec 09 '17 at 19:17

1 Answers1

1

Okay, after a lot of trial and error i found the problem, i was missing a check in the sencond else if statement and the array was recieving values much bigger than the range of the 255 (which is the cap for the setAlpha() function) that must have create the severe lag since it had to keep adding all those values and propably recalculate the alpha inside its own function

mitseas
  • 45
  • 5