# 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:** 3
**Page:** 1
### Author:  [@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")
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://www.youtube.com/watch?v=BZNEagMBy60)
🙂
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 10, 2019, 6:33pm UTC](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378/2 "2019-11-10T18:33:19Z")
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
---
### Author:  [@swmarks](https://discourse.processing.org/u/swmarks)
#### Post date: [November 11, 2019, 2:51am UTC](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378/3 "2019-11-11T02:51:21Z")
Another very simple scene-maker that I’ve used is this [loop template](https://editor.p5js.org/codingtrain/sketches/WfEih8mL7) by Golan Levin.