Alpha animation start with delay

p5.js Coding Questions
1

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.

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

1 Like
2

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.

2 Likes
3

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

also found this page in between:
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

4

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

You mean stuff like Sound Visualization?

2 Likes
5

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

6

I track the time in seconds with:

seconds += 1/frameRate;

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

2 Likes
7

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