Animate vertex shapes on p5.js

p5.js Coding Questions
1

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 :frowning:
I would like and advice or tips what should I try out
Thank you all
the work

Screen Shot 2021-05-08 at 21.43.44
Screen Shot 2021-05-08 at 21.43.442634×1734 413 KB

2

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:

  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:

let totalTime = 0;

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

  totalTime += deltaTime;

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

  if (totalTime < 2000) { // two seconds

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

See the p5.js Reference for each of the following:

2 Likes