How to trigger animations in correct order in p5.js?

Member

by jasen , in category: Javascript , 3 months ago

How to trigger animations in correct order in p5.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by dalton_moen , 3 months ago

@jasen 

To trigger animations in the correct order in p5.js, you can use the draw() function to control the sequence of animations. Here is an example of how you can trigger animations in the correct order:

  1. Create a variable to keep track of the current state of the animation sequence.
1
let currentAnimation = 1;


  1. In the draw() function, use a switch statement to check the current state and trigger the corresponding animation.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
function draw() {
  switch (currentAnimation) {
    case 1:
      // Trigger the first animation
      // Increment currentAnimation when the animation is completed
      if (firstAnimationIsComplete) {
        currentAnimation++;
      }
      break;
    case 2:
      // Trigger the second animation
      // Increment currentAnimation when the animation is completed
      if (secondAnimationIsComplete) {
        currentAnimation++;
      }
      break;
    // Add more cases for additional animations
  }
}


  1. Update the currentAnimation variable based on user interactions or other events to trigger the next animation in the sequence.
1
2
3
4
5
function mouseClicked() {
  if (currentAnimation === 1) {
    currentAnimation++;
  }
}


By using this approach, you can control the sequence of animations in p5.js and ensure that they are triggered in the correct order.