Sequenced animation with state

p5.js Coding Questions
1

Hi, I’m trying to do a simple animation in sequence:

  1. at start of sketch : a square moves to the right 100px.
  2. after it finishes that step, it waits 2 seconds
  3. after it finishes that step it goes down for 100px.
  4. after that it stops and do nothing else.

Individually, these parts are very easy to implement. But trying to put them together into a sequence is a whole different matter…

I’ve read this post here that suggests the implementation of a “state”:

I do understand the concept of it, but what I don’t understand is how to change the “state” AFTER a step is finished.
I’ve tried to reply at the post but it’s in an old version of the processing forums and I can’t sign up… So I’m asking here…

Thank-you for helping me!!

2 Likes
2

Hello!

Yeah, like when the rectangle reached 100 px you just say state++;

if(rectX>=100) state ++;

So when the condition is met you increase the state to the next step

The state is just an int variable storing the information in which step of the animation you are. You evaluate this info in draw. In each step the condition to increase state is of course different.

Chrisir

1 Like
3

got it! super easy…
thx!

1 Like