# Alpha animation start with delay

**URL:** <https://discourse.processing.org/t/alpha-animation-start-with-delay/15427>\
**Category:** Coding Questions\
**Created:** [November 12, 2019, 7:02pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427 "2019-11-12T19:02:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 12, 2019, 7:02pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/1 "2019-11-12T19:02:28Z")

</div>

Hey there,

Here´s a alpha animation I work on as a beginner, starting immediately to fade out the shape containing a character array. That is okay.

```auto
var f = 255; //alpha variable
var speed = 0.1; // decreasing alpha multiplier

let shape1 = [
['','','1a','','',''],
['','1b','','1h','',''],
['1c','','','','1g',''],
['','1d','','1f','',''],
['','','1e','','',''],
['','','','','',''],
];

function setup() {

    createCanvas(400,400);
}

function draw() {
background(220);
  
  let w = width /5;
  let h = height / 6;
  
 

  //shape1
  for (let j = 0; j < 6; j++) {
  
  for (let i = 0; i < 5; i++){
    let x = w * i ;
      let y = h * j ;
      let spot = shape1[j][i];
    //textAlign(CENTER);
    textSize(32);
    // Before fade animation starts: How to keep the shape visible for 10 secs?
    f -= speed;
    fill(255,0,0, f);
    text(spot, x + w,y);
    }
  }
}
     
 

```

BUT;  
How to let it be visible for 10 seconds before the animation starts?

A cool future update may also be: How to make it visible again after 10 seconds of invisibility, too?

THX  
BX

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 12, 2019, 7:49pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/2 "2019-11-12T19:49:05Z")

</div>

Have you played around with `deltaTime` yet? It’s intended for creating time sensitive animations.

A possible solution for your desired 10 second swap could be by tracking how much seconds have passed since the sketch has started. Whenever ten seconds have passed, you could initiate an event which causes the transparency to switch.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 12, 2019, 8:02pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/3 "2019-11-12T20:02:55Z")

</div>

> [@Tiemen](#):
>
> Have you played around with `deltaTime` yet?

Great, will go for it, is it a function?

also found this page in between:  
[https://creative-coding.decontextualize.com/changes-over-time/](https://creative-coding.decontextualize.com/changes-over-time/)

Another idea is to sync the alpha animation with multiple adjacent shown character-array shapes to a music piece of 120 bpm.

It seems to gravitate to a direction having to build a bar/beat counter…;-))  
With that thing then changing animation values on particular bars/beats. Anybody did that yet?

THX  
BX

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 12, 2019, 9:01pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/4 "2019-11-12T21:01:53Z")

</div>

Good, glad to hear you have some directions to explore.

> [@byxx](#):
>
> With that thing then changing animation values on particular bars/beats. Anybody did that yet?

You mean stuff like [Sound Visualization](https://www.youtube.com/watch?v=2O3nm0Nvbi4)?

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 12, 2019, 9:07pm UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/5 "2019-11-12T21:07:13Z")

</div>

its a chance, sure. Dan is great of course! He presents some sound measuring concepts in his tuts…

It´s more about letting the animation wait for some secs here at the moment.  
counting frames might be the way, but not sure. Help is welcome.

THX

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 13, 2019, 11:03am UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/6 "2019-11-13T11:03:41Z")

</div>

I track the time in seconds with:

```auto
seconds += 1/frameRate;

```

then, if seconds == 10 you can start your animation, or pause it, or what you want 😛, you can also restart the count to start a new one seconds = 0;

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 13, 2019, 11:11am UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427/7 "2019-11-13T11:11:08Z")

</div>

Oooh, this is great. Thank you very much!! (Cool picture)

the type of seconds is NaN. Looks like to be converted to a number somehow…  
best regards  
BX