Fade background with animation at the same time

LoCamillo

I've been trying to do a project that fade in/out a series of backgrounds. These backgrounds are made of images and they fade/in and out in a sequence showing a text in between. But at the same time, there's an animation of stars playing in the background. The problem is that when the fade of the backgrounds are happening, the stars get slower. I want to fade the backgrounds and keep the stars with the same speed. This is what I have:

     var particles = [];
        var fundos = [];
        var glifos = [];
        var img;
        var logotri;
        var teste;
        var m = 0;
        var loop;
        var alphafade = 255;
        var idlogo= 255;
        var idglifo = 0;


        function setup() {
          cvn = createCanvas(windowWidth, windowHeight);
          logotri = loadImage("logofinal.png");
          teste = loadImage("primeira-tela-1.png");
          loop = 0;

          for (var i = 0; i < 8; i++){
            fundos[i] = loadImage("primeira-tela-" + (i+1) + ".png");
          }

          for (var i = 0; i < 7; i++){
            glifos[i] = loadImage("Glifo" + (i+1) + ".png");
          }

          for (var i = 0; i < 256; i++) {
            p = new Estrelas();
            particles.push(p); // Criação do vetor das estrelas do fundo
          }
        }

        function draw() {
          background(fundos[0]);

          if (m == 0) { //Página inicial estática
            estrelas();
            image(logotri, windowWidth / 3, windowHeight / 3);
          }

          else if (m == 1){ //Fadeout do logo
            tint(255, alphafade);
            image(logotri, windowWidth / 3, windowHeight / 3);
            estrelas();
            fadeout(2, 2);
            noTint();
            }

          else if (m == 2){ //Fadein do glifo 1 + mudança de fundo
            tint(255, alphafade);
            image(fundos[1], 0,0);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadein(3, 3);
            estrelas();
            noTint();

          }

          else if (m == 3){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadeout(4, 2);
            estrelas();
            noTint();


          }
            else if (m == 4){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadein(5, 1);

          }
          else if (m == 5){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadeout(6, 2);
          }

          else if (m == 6){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(fundos[2], 0,0);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadein(7, 1);
            noTint();
          }

          else if (m == 7){
            image(fundos[2], 0,0);
            tint(255, alphafade);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadeout(8, 1);
            noTint();
          }


          else if (m == 8){
            image(fundos[2], 0,0);
            estrelas();
            }
          }

        //Função que controla o movimento das estrelas do fundo
        function estrelas() {
          for (var i = 0; i < particles.length - 1; i++) {
            if (particles[i].getalfa() < 5) {
              particles[i].reset(); //Quando o alfa das particulas está quase apagando, ele reseta a particula
              break;
            }
          }

          for (i = 0; i <= particles.length - 1; i++) {
            particles[i].update();
            particles[i].show(); //Mostra as particulas se movendo
          }
        }

        //Função que controla o fadeout das imagens e passa pro proximo nivel de animação
        function fadeout(proximonivel, speed){
          alphafade = alphafade - speed;
          if (alphafade < 0)
            {
                alphafade = 0;
                m = proximonivel;
              }
        }

        //Função que controla o fadein das imagens e passa pro proximo nivel de animação
        function fadein(proximonivel, speed){
          alphafade = alphafade + speed;
          if (alphafade > 255)
            {
                alphafade = 255;
                m = proximonivel;
              }
        }

        //Função que controla no início se houve movimento na roda do mouse
        function mouseWheel(event) {
          if (event.delta != 0 && loop == 0) {
            m = 1;
            loop = 1;
          }
        }

        //Função que controla no inicio se houve clique do mouse
        function mouseClicked(){
          if ( loop == 0){
            m = 1;
            loop = 1;
          }
        }

        //Função que mostra texto e controla as propriedades
        function texto(string){
          tint(255, alphafade);
          fill(255, alphafade);
          textSize(20);
          textAlign(CENTER, CENTER);
          text(string, windowWidth / 2, windowHeight / 2);
          noTint();
        }

        class Estrelas {

          constructor() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = random(0, 100);
          }

          getalfa() {
            return this.alfa;
          }

          reset() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = 100;


          }

          update() {
            this.x += this.vx;
            this.y += this.vy;
            this.alfa--;

          }

          show() {
            fill(255, 255, 255, this.alfa);
            noStroke();
            ellipse(this.x, this.y, 5, 5);
          }

        }

I have tried a lot of things but i can't make it work.

Chrisir

Does it work with 3 stars as a test?

LoCamillo

I got what I needed after testing. What I did was increase the speed of the stars the moment the background starts changing. It did the trick. Thanks!!

jeremydouglass

@LoCamillo -- glad you found a solution that works for you!

As a general solution to this kind of problem, look at the "framerate independent movement" approach. There is an example sketch here:

https://forum.processing.org/two/discussion/comment/35806/#Comment_35806

This way, when your framerate slows down under heavy load (like loading many images) -- or even if it speeds up -- your stars will always travel at the same speed.