Animation that transitions using frameCount

Gallery
1

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:

:slight_smile:

3 Likes
2

Was thinking about this too

When you make a class OneScene and then it knows its start number frame and end number frame and it has a command ID that it can pass to a global execute function.

Then an array of this. As soon as one scene (one animation sequence) has reached its end, the global index ++.

Also, there might be animation sequences that don’t end with a frameCount but eg when a ball has reached its target. Then index++.

It could also be entirely based on millis instead of frame count

Chrisir

1 Like
3

Another very simple scene-maker that I’ve used is this loop template by Golan Levin.

2 Likes