# Simple animation question about framerate and stepmotion

**URL:** <https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275>\
**Category:** Coding Questions\
**Created:** [April 14, 2024, 6:07am UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275 "2024-04-14T06:07:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [April 14, 2024, 6:07am UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/1 "2024-04-14T06:07:22Z")

</div>

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!

```auto
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()};
  
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 14, 2024, 10:30am UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/2 "2024-04-14T10:30:37Z")

</div>

Hello @bcabc ,

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

[https://p5js.org/reference/#/p5/for](https://p5js.org/reference/#/p5/for)[reference | p5.js](https://p5js.org/reference/#/p5/for)

`:)`

---

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [April 14, 2024, 6:48pm UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/3 "2024-04-14T18:48:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![slacle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slacle/32/19522_2.png) [@slacle](https://discourse.processing.org/u/slacle)\
**Post date:** [April 15, 2024, 8:36pm UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/4 "2024-04-15T20:36:55Z")

</div>

You can set the frame rate manually:

> **[reference | p5.js](https://p5js.org/reference/#/p5/frameRate)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [April 18, 2024, 6:05am UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/5 "2024-04-18T06:05:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alptugan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alptugan/32/19406_2.png) [@alptugan](https://discourse.processing.org/u/alptugan)\
**Post date:** [April 21, 2024, 10:12am UTC](https://discourse.processing.org/t/simple-animation-question-about-framerate-and-stepmotion/44275/6 "2024-04-21T10:12:53Z")

</div>

@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](https://github.com/processing/p5.js/issues/2877#issuecomment-392294321) 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.