# Animate vertex shapes on p5.js

**URL:** https://discourse.processing.org/t/animate-vertex-shapes-on-p5-js/29966
**Category:** Coding Questions
**Tags:** homework
**Created:** [May 8, 2021, 6:44pm UTC](https://discourse.processing.org/t/animate-vertex-shapes-on-p5-js/29966 "2021-05-08T18:44:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![yaelmogyoros](https://avatars.discourse-cdn.com/v4/letter/y/dfb087/32.png) [@yaelmogyoros](https://discourse.processing.org/u/yaelmogyoros)
#### Post date: [May 8, 2021, 6:44pm UTC](https://discourse.processing.org/t/animate-vertex-shapes-on-p5-js/29966/1 "2021-05-08T18:44:54Z")

</div>

hello everybody  
I have difficulty doing my homework.  
I need to make the tears I created using the curveVertex disappear one after the other like a timer and I tried everything everything i learned and I can’t figure out how to do it ☹  
I would like and advice or tips what should I try out  
Thank you all  
[the work](https://editor.p5js.org/yaelgeller97/sketches/jPZTe2ahD)

 ![Screen Shot 2021-05-08 at 21.43.44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b187a5a952e74bac0aa991bc09aa01f781e46680.png)

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [May 8, 2021, 7:54pm UTC](https://discourse.processing.org/t/animate-vertex-shapes-on-p5-js/29966/2 "2021-05-08T19:54:24Z")

</div>

Hello @yaelmogyoros, and welcome to the Processing Forum!

For an example of something that might help, try the following as part of your code, which will make the first tear display only during the first two seconds of the animation:

```auto
  if (frameCount < 120) {
    fill(142,224,237) // tear 1
    noStroke();
    beginShape();
      curveVertex(113,197);
      curveVertex(125,222);
      curveVertex(133,249);
      curveVertex(121,270);
      curveVertex(100,262);
      curveVertex(101,231);
      curveVertex(107,213);
    endShape(CLOSE);
  }

```

_EDIT (2x on May 8, 2021):_

The above relies on the rate of 60 frames per second that applies to most computer displays.

Another strategy would be to actually measure the time, in milliseconds, that has passed since the start of the animation. For that technique, one option would be to place this at the very beginning of your code, above the `setup()` function:

```auto
let totalTime = 0;

```

Then place this as the first statement inside the `draw()` function:

```auto
  totalTime += deltaTime;

```

The block header for the code that controls each tear would then be something like this:

```auto
  if (totalTime < 2000) { // two seconds

```

Another option is to use the `millis()` function for the timing.

See the [p5.js Reference](https://p5js.org/reference/) for each of the following:

- [`frameRate()`](https://p5js.org/reference/#/p5/frameRate)
- [`deltaTime`](https://p5js.org/reference/#/p5/deltaTime)
- [`frameCount`](https://p5js.org/reference/#/p5/frameCount)
- [`millis()`](https://p5js.org/reference/#/p5/millis)