Simple animation question about framerate and stepmotion

p5.js Coding Questions
1

hi there -
i am attempting to make an ellipse that grows from a small size to a large size, over and over again. i like the effect it makes when it leaves an imprint of its stroke at each step, similar to how a tree shows its age.

my understanding is that the draw process is dictated by the frameRate and that the frameRate is limited by many web browsers that one would use to view p5.js code. i’m wondering if there is anyway to accelerate this particular effect or this code.

thanks!

let step = 10;
function setup() {
  createCanvas(400, 400);
  background(100);

}


function draw() {
  
  step = (step+1)%100;
  fill(0, 0, 0, 0);
  stroke(random(200), 0, 0);
  ellipse(200, 200, step, step);
  ellipse(300, 300, (millis()*0.1)%100, (millis()*0.1)%100);
  if ((frameCount%52) > 50) {clear()};
  
}
2

Hello @bcabc ,

Consider using a for() loop to draw more than one ellipse per frame:

https://p5js.org/reference/#/p5/forreference | p5.js

:)

1 Like
3

That would be slightly different that making it go faster, though, right?
Are there other ways around the issue of speed, in particular?

4

You can set the frame rate manually:

5

Thanks, @slacle - but I believe web browsers tap out at about 60 FPS - and I’m not sure if there’s another way to get there.

6

@bcabc you are right. p5JS is limited to 60 frames per second. Rather than using frameRate you can try millis() and %operator to adjust the speed of your animation.

But if you need to adjust FPS more than 60, you can have a look more advanced tools/frameworks like openFrameworks. Depending on your hardware and program, you can get higher FPS rates like 200-300 or more.

Another option is to disable the loop with noLoop() and use the setInterval method of Javascript by overwriting the redraw method of p5js. There is an old thread on Github related to the FPS adjustment.

As of my knowledge the framerate depends on your browser, hardware and the monitor refresh rate in the end.

2 Likes