how to have a button switch between LED animations?

I want to have a button switch the animation that is running. The button works but it doesn't update value of the button when the animation is running. How can I have the button value constantly update while the animation is running? here is my code:

#include <FastLED.h>

#include "Plasma.cpp"
#include "TestPattern.cpp"
#include "Snake.cpp"
#include "Twinkle.cpp"
#include "DeadChannel.cpp"
#include "Bouncy.cpp"
#include "HiRez.cpp"
#include "Boxes.cpp"
#include "Life.cpp"
#include "Sprite.cpp"

#define WIDTH 14
#define HEIGHT 14
#define NUM_LEDS WIDTH * HEIGHT

#define DATA_PIN 3

CRGB leds[NUM_LEDS];
const int  buttonPin = 5;    

// Variables will change:
int buttonPushCounter = 0;   
int buttonState = 0; 
int lastButtonState=0;        
 

void setup() {
  // put your setup code here, to run once:
pinMode(buttonPin, INPUT);
pinMode(9, OUTPUT);
pinMode(10, OUTPUT);
pinMode(8, OUTPUT);


    FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
    Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
//    TestPattern testPattern(leds, WIDTH, HEIGHT);
//    testPatt.start();

 buttonState = digitalRead(buttonPin);

  // compare the buttonState to its previous state
  if (buttonState != lastButtonState) {
    // if the state has changed, increment the counter
    if (buttonState == HIGH) {
      // if the current state is HIGH then the button
      // wend from off to on:
      buttonPushCounter++;
     
    } 
    
  }
 
  lastButtonState = buttonState;

  if (buttonPushCounter  == 1) {


digitalWrite(8,HIGH);
doTwinkle();

   
   
  } else if (buttonPushCounter  == 2){
    

digitalWrite(9,HIGH);
doSnake();

      
  } else if (buttonPushCounter  == 3){


digitalWrite(10,HIGH);

doPlasma();
    
    buttonPushCounter = 1;
  } 
    
   
    
    
}

void doDeadChannel() {
    DeadChannel deadChannel(leds, WIDTH, HEIGHT);
    deadChannel.start();
}

void doPlasma() {
    Plasma plasma(leds, WIDTH, HEIGHT);
    plasma.start();
}

void doTwinkle() {
    Twinkle twinkle(leds, WIDTH, HEIGHT, true, true);
    twinkle.start();
}

void doSnake() {
    Snake snake(leds, WIDTH, HEIGHT);
    snake.start();
}

void doLife() {
    Life life(leds, WIDTH, HEIGHT, 56);
    life.start();
}

void doSprite() {
    Sprite sprite(leds, WIDTH, HEIGHT);
    sprite.start();
}

Thats the main part here is the parts that it refers to

Twinkle:

/*
 * Effect implementation for the GauntletII project.
 */

#include "Effect.h"


#define MAX_TWINKS 25
#define OFFSET 0xB000

typedef struct Twink {
    short x;
    short y;
} Twink;

class Twinkle : public Effect {
    
private:
    short numTwinks;
    bool colour;
    bool cycleSaturation;
    
public:
    Twinkle(CRGB *leds, int width, int height, bool colour, bool cycleSaturation) :
        Effect(leds, width, height),
        colour(colour),
        cycleSaturation(cycleSaturation),
        numTwinks(0) {
    }
    
    void start() {
        for (uint16_t frame = 0x0000, iterations = 0; iterations < 2250; frame += 0x20, iterations++) {
            for (int i = 0; i < width * height; i++) {
              
                if (leds[i]) {
                    leds[i].fadeToBlackBy(50);
                    if (!leds[i]) {
                        numTwinks--;
                    }
                } else {
                    if (random(56) == 0) {
                        numTwinks++;
                        if (colour) {
                            if (cycleSaturation) {
                                uint8_t saturation = (sin16(frame + OFFSET) >> 8) + 128;
                                leds[i] = CHSV(random(255), saturation, 255);
                            } else {
                                leds[i] = CHSV(random(255), random(128, 255), 255);
                            }
                        } else {
                            leds[i] = CRGB::White;
                        }
                    }
                }
            }
            LEDS.show();
        }
    }
};

Snake:

/*
 * Effect implementation for the GauntletII project.
 */

#include "Effect.h"

class Snake : public Effect {
private:
    
    static const byte SNAKE_LENGTH = 16;
    
    enum Direction {
        UP, DOWN, LEFT, RIGHT
    };
    
    struct Pixel {
        uint8_t x;
        uint8_t y;
    };
    
    CRGB colours[SNAKE_LENGTH];
    uint8_t initialHue;
    
    Pixel pixels[SNAKE_LENGTH];
    
    Direction direction;
    
    void newDirection() {
        switch (direction) {
            case UP:
            case DOWN:
                direction = random(0, 2) == 1 ? RIGHT : LEFT;
                break;
                
            case LEFT:
            case RIGHT:
                direction = random(0, 2) == 1 ? DOWN : UP;
                
            default:
                break;
        }
    }
    
    void shuffleDown() {
        for (byte i = SNAKE_LENGTH - 1; i > 0; i--) {
            pixels[i] = pixels[i - 1];
        }
    }
    
public:
    Snake(CRGB *leds, int width, int height) : Effect(leds, width, height), initialHue(0) {
        direction = UP;
        for (int i = 0; i < SNAKE_LENGTH; i++) {
            pixels[i].x = 0;
            pixels[i].y = 0;
        }
    }
    
    void start() {
        clearLeds();
        for (int frameNo = 0; frameNo < 1000; frameNo++) {
            shuffleDown();
            if (random(10) > 6) {
                newDirection();
            }
            switch (direction) {
                case UP:
                    pixels[0].y = (pixels[0].y + 1) % height;
                    break;
                case LEFT:
                    pixels[0].x = (pixels[0].x + 1) % width;
                    break;
                case DOWN:
                    pixels[0].y = pixels[0].y == 0 ? height - 1 : pixels[0].y - 1;
                    break;
                case RIGHT:
                    pixels[0].x = pixels[0].x == 0 ? width - 1 : pixels[0].x - 1;
                    break;
            }
            fill_rainbow(colours, SNAKE_LENGTH, initialHue++);
            for (byte i = 0; i < SNAKE_LENGTH; i++) {
                pixel(pixels[i].x, pixels[i].y) = colours[i] %= (255 - i * (255 / SNAKE_LENGTH));
            }
            LEDS.show();
            delay(30);
            clearLeds();
        }
    }
};

You will have to insert code in each of the animations to read the state of the switch during the animation. Or write the animations so that they do not block and update the switch state every time through loop().

the animation part of the code is in another tab so when I put in the variables they arent declared in that tab so it doesnt work

What variables? Declare the variables in global scope and the tabs should see them. That is the beat advice that I have without knowing what variables to which you refer.

im talking about buttonPin, buttonState, lastButtonState, and buttonPushCounter. I think they are global variables. The problem is that the animation codes are in different tabs so the tab doesn't have a declaration of the variables.

Bugflip:
The problem is that the animation codes are in different tabs so the tab doesn't have a declaration of the variables.

That they are in a different tab is not the issue, but that they are not part of the class that contains the animations is.
What you need to do is 2 things !
first of all the animations need to change in such a way that they just fill up a global array, and the FastLED.show() can be called from the main loop() so rather than running a loop and let the animation go through it's step and do a delay() and then show, you could either use millis() and wait for steps to pass, or (and i advocate this !) save the millis() when the animation starts and calculate where (which step) in the animation you are (or should be)
If that all sounds a little complex then there is a way of creating a library that handles buttonpresses and create that object in the animation class, and instead of doing a delay() do a check on them for the time that you are waiting there instead.
Are the animation classes your code ? because to do it like this is very limiting.
Which reminds me of one more option, you could just move the animation functions out of the library and into your main code.

not sure what you mean Ive tried to put the animation part into the main code but Im not sure how to transfer it from a class to a normal code. https://www.instructables.com/id/Make-Your-Own-10x10-LED-Matrix/ here is where I downloaded the code I am trying to modify and I will try to attach the files to this reply. If you could explain what I need to do that would be great. The sinziana panel is the main code.and you you need to put it in a folder called sinziana panel.

Bouncy.cpp (547 Bytes)

Boxes.cpp (1.8 KB)

DeadChannel.cpp (795 Bytes)

Effect.cpp (567 Bytes)

Effect.h (447 Bytes)

HiRez.cpp (1.43 KB)

Life.cpp (3.35 KB)

Plasma.cpp (1.23 KB)

SinzianaPanel.ino (1.18 KB)

Snake.cpp (2.24 KB)

Sprite.cpp (2.56 KB)

TestPattern.cpp (1.34 KB)

Twinkle.cpp (1.56 KB)

Pff you are aware that these kind of projects teach you how to build something but do not explain any of the coding. anyway, looking at it i think the easiest would be to add the button reference to every individual animation. In your example the button is active-HIGH, is that really how it is ? the more common way is to use a pullup and let the button be active-LOW, but that is a slightly different issue, i will assume that it is and show you how to to it adding it to an animation class, let's say snake.cpp modify the start() function by adding a few lines

    void start() {    // this is the function that is called from the main program, and this is what i'll alter
        const int  buttonPin = 5;  
        int buttonstate, oldbuttonstate=HIGH; 
        uint32_t buttonreleased;
        clearLeds();
        for (int frameNo = 0; frameNo < 1000; frameNo++) {
            shuffleDown();
            if (random(10) > 6) {
                newDirection();
            }
            switch (direction) {
                case UP:
                    pixels[0].y = (pixels[0].y + 1) % height;
                    break;
                case LEFT:
                    pixels[0].x = (pixels[0].x + 1) % width;
                    break;
                case DOWN:
                    pixels[0].y = pixels[0].y == 0 ? height - 1 : pixels[0].y - 1;
                    break;
                case RIGHT:
                    pixels[0].x = pixels[0].x == 0 ? width - 1 : pixels[0].x - 1;
                    break;
            }
            fill_rainbow(colours, SNAKE_LENGTH, initialHue++);
            for (byte i = 0; i < SNAKE_LENGTH; i++) {
                pixel(pixels[i].x, pixels[i].y) = colours[i] %= (255 - i * (255 / SNAKE_LENGTH));
            }
            
            LEDS.show();
            uint32_t moment=millis();
            while (millis()-moment<30) {  // hold up the execution of the loop for 30ms
              buttonstate=digitalRead(buttonPin);             
              if(buttonstate!=oldbuttonstate) {
                if (buttonstate==LOW) {
                  buttonreleased=millis();  // setting the debounce offset
                  oldbuttonstate=buttonstate;  // setting the old state to LOW 
                }
                else {
                  if (millis()-buttonreleased>200) return; // if the debounce time has passed just exit the function
                }
              }
            }
            // delay(30); //  no need for the delay anymore
            clearLeds();
        }
    }
};

like this, this compiles, with all the warnings about the deprecated '#import' as it was, and of course i have no means of testing it. It should now run until either the FrameNo goes above the 1000 as set in the for loop or until you press the button.You could of course let that loop run forever.