# Animation that transitions using frameCount

**URL:** <https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378>\
**Category:** Gallery\
**Created:** [November 10, 2019, 6:18pm UTC](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378 "2019-11-10T18:18:02Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 10, 2019, 6:18pm UTC](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378/1 "2019-11-10T18:18:02Z")

</div>

A very simple example that transitions through scenes over time:

```auto
// 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:

[![](https://img.youtube.com/vi/BZNEagMBy60/maxresdefault.jpg "Orbitals IV") ](https://www.youtube.com/watch?v=BZNEagMBy60)

🙂

---

_[View the full topic](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378)._