How to only play animation when deleting and creating new object

p5.js Coding Questions
1

Hi guys, I am creating a cherry blossom branch where you add a new flower object (via pressing z key) and delete flower object (via pressing m key). I want to make it before it display(), it plays a blooming animation when a new object is added, and a falling animation when an object is deleted.

How would I go about doing that? Thank you

Link to code: p5.js Web Editor

2

Hello @acorns,

Consider how you would animate this one flower at a time instead of in a loop.

setup() runs once
draw() loops at 60 frames per second

Try:

  • with and without background in draw()
  • something like this in draw():
flowers[counter].display();
counter++;
  • only hints and not complete

Not a direct answer to your question… it may still gives you some ideas.

Update…

This is a simple timer that can be added to the class:

bloom() 
    {
    if (this.bb == false)
      {
      //this.tstart = millis()
      this.tstart = frameCount
      this.bb = true
      }
    else
      {
      //if(millis() < this.tstart+1000)
      if(frameCount < this.tstart+60)
        this.size += 1    
      else
        this.bb = false
      }
    }

There is a frameCount version and a millis() version.

It is very rough code and did work in a simplified version of your code; I used circles in place of images.

:)