A very simple example that transitions through scenes over time:
// Author: GLV
// Date: 2019-11-10
// Description:
// Animate over time using frameCount
// A very simple example that:
// Uses frameCount to keep track of time
// Fades in and out by modifying alpha component of HSB color
// Cycles through HSB colors
int scene = 0;
int sec = 60;
float alpha = 0;
void setup()
{
size(500, 500);
textSize(36);
textAlign(CENTER, CENTER);
colorMode(HSB, 360, 100, 100, 100);
}
void draw()
{
background(0);
println("frameCount: " + frameCount, "Time Elapsed: " + frameCount/60 + " sec");
// Fade in
if(frameCount < 6*sec)
{
alpha++;
if (alpha >= 300) alpha = 300;
fill(60, 100, 100, alpha);
text("In the beginning...", width/2, height/2);
}
// Fade out
if(frameCount > 5*6*sec + 1*sec/4)
{
alpha--;
if (alpha <= 0) alpha = 0;
}
if(frameCount > 5*6*sec)
{
fill(60, 100, 100, alpha);
text("The end", width/2, height/2);
}
// Scene progress counter
if(frameCount%(6*sec) == 0) scene++;
if (scene > 4) scene = 5;
// Cycle through hue
if (frameCount > 6*sec && frameCount < 6*6*sec)
{
fill(frameCount%(6*sec), 100, 100);
println(frameCount%(6*sec));
}
// Stop looping
if (frameCount > 6*6*sec)
{
noLoop();
}
//Scenes
switch (scene)
{
case 0:
text("In the beginning...", width/2, height/2);
break;
case 1:
//text("Scene 1", width/4, height/4);
text("Earth", width/4, height/4);
break;
case 2:
//text("Scene 2", 3*width/4, height/4);
text("Water", 3*width/4, height/4);
break;
case 3:
//text("Scene 3", width/4, 3*height/4);
text("Fire", width/4, 3*height/4);
break;
case 4:
//text("Scene 4", 3*width/4, 3*height/4);
text("Air", 3*width/4, 3*height/4);
break;
default:
//text("Intermission", width/2, height/2);
break;
}
}
This is just an example of one “simple” approach to this for beginners.
I already have a framework I wrote for this for personal use; it is much more complex, uses millis() and I managed to package it into a class.
An example I wrote a few years back: