How can I create a cross-fade between two quads?

Question

I have two quads, and I would like to have each one of them on the screen for 5 seconds, then fade to the next one. How could this be done?

My code:

package net.makerimages.Unacrawl.stateSys;

import net.makerimages.Unacrawl.graphics.TextureManager;

import static org.lwjgl.opengl.GL11.*;
/**
 * Created by Makerimages on 12.01.14.
 */
public class LogoState extends GameState
{
@Override
public void render() {
    TextureManager.bigLogo.bind();

    glBegin(GL_QUADS);
    glTexCoord2f(0, 0);
    glVertex2f(0, 0);
    glTexCoord2f(1, 0);
    glVertex2f(0 + TextureManager.bigLogo.getTextureWidth(), 0);
    glTexCoord2f(1, 1);
    glVertex2f(0 + TextureManager.bigLogo.getTextureWidth(), 0 + TextureManager.bigLogo.getTextureHeight());
    glTexCoord2f(0, 1);
    glVertex2f(0, 0 + TextureManager.bigLogo.getTextureHeight());
    glEnd();


    TextureManager.makerLogo.bind();

    glBegin(GL_QUADS);
    glTexCoord2f(0, 0);
    glVertex2f(0, 0);
    glTexCoord2f(1, 0);
    glVertex2f(0 + TextureManager.makerLogo.getTextureWidth(), 0);
    glTexCoord2f(1, 1);
    glVertex2f(0 + TextureManager.makerLogo.getTextureWidth(), 0 + TextureManager.makerLogo.getTextureHeight());
    glTexCoord2f(0, 1);
    glVertex2f(0, 0 + TextureManager.makerLogo.getTextureHeight());
    glEnd();
}
}

Answer 1

You need to set the alpha of the texture to have it fade. You also need a method of timing in order for it to be able to fade (use delta, or the amount of milliseconds since the last update happend, http://lwjgl.org/wiki/index.php?title=LWJGL_Basics_4_%28Timing%29).

I re-wrote the class with it implemented:

package net.makerimages.Unacrawl.stateSys;

import net.makerimages.Unacrawl.graphics.TextureManager;

import static org.lwjgl.opengl.GL11.*;
/**
 * Created by Makerimages on 12.01.14.
  */
public class LogoState extends GameState
{
    @Override
    public void render(int delta) {
    int time = 0;
    time += delta;

    //Enable transparency, glDisable(GL_BLEND) will disable it, which is recommened if you're not going to be using it. You also should draw all transparent objects after all opaque objects.
    glEnable(GL_BLEND);
    glBlendFun(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    if (time < 5000) // The first 5 seconds
    {
        float alpha = 1 - ((1 / 5000) * time); //Gets a number between 0.0 and 1.0 depending on how close it is to 5000 and inverts it from 1 to 0, to 0 to 1(0 being completely white).
        glColor4f(1, 1, 1, alpha); //Set the color to white (default) and adjust the alpha.

        TextureManager.bigLogo.bind();

        glBegin(GL_QUADS);
        glTexCoord2f(0, 0);
        glVertex2f(0, 0);
        glTexCoord2f(1, 0);
        glVertex2f(0 + TextureManager.bigLogo.getTextureWidth(), 0);
        glTexCoord2f(1, 1);
        glVertex2f(0 + TextureManager.bigLogo.getTextureWidth(), 0 + TextureManager.bigLogo.getTextureHeight());
        glTexCoord2f(0, 1);
        glVertex2f(0, 0 + TextureManager.bigLogo.getTextureHeight());
        glEnd();
    }
    else if (time < 10000 && time > 5000) //Between the 5 second mark to the 10 second mark
    {
        float alpha = 1 - ((1 / 5000) * (time - 5000)); //Same as last time but it subtracts 5000 from the time (since 5 seconds have passed) so the algorithm works the same.
        glColor4f(1, 1, 1, alpha); //Set the color to white (default) and adjust the alpha.

        TextureManager.makerLogo.bind();

        glBegin(GL_QUADS);
        glTexCoord2f(0, 0);
        glVertex2f(0, 0);
        glTexCoord2f(1, 0);
        glVertex2f(0 + TextureManager.makerLogo.getTextureWidth(), 0);
        glTexCoord2f(1, 1);
        glVertex2f(0 + TextureManager.makerLogo.getTextureWidth(), 0 + TextureManager.makerLogo.getTextureHeight());
        glTexCoord2f(0, 1);
        glVertex2f(0, 0 + TextureManager.makerLogo.getTextureHeight());
        glEnd();
  }
  else // It's past 10 seconds at this point.
    doSomething();
}
}