Allow frame rate to go past monitor refresh rate

[clay53]

Nature of issue?

• Found a bug
• [ x ] Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• [ x ] Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• [ x ] Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: https://github.com/processing/p5.js/releases/download/0.6.1/p5.min.js
• Web browser and version: All - latest
• Operating System: Windows 10
• Steps to reproduce this: use frameRate(); in setup, then console.log(frameRate()); in draw

Feature enhancement details: Allow frame rates to go higher than the monitor's refresh rate. I think this is the problem because it is stated in issue #2372. In the old issue, it is said that you don't need to do this so it doesn't matter, but otherwise, my sketch would have an exceptionally large loop and the browser stops responding until it is finished. Also, it looks cool. Video of the problem: https://drive.google.com/file/d/1IXIWO-zYlG4n9B1v2Ufj2G1nJiOL4_iw/view?usp=sharing

[limzykenneth]

The Google Drive link you shared is not shared publicly so I cannot see it. Can you briefly describe your use case?

[clay53]

@limzykenneth Sorry, accidentally used my org acc - didn't know it was viewable to people in the org only - I'll upload it once I get back on my PC. I was developing a program to make a program to make an image out of other images - without just overlaying the images with a different color - however, looping through all the pixels on an image and drawing a image for each pixel (depending on settings) will cause the browser to be unresponsive for a long time, until it completes.
Edit: video: https://drive.google.com/file/d/1Cv1IQlfQgkSz49D7ITYo0HO_orzh-8Nj/view?usp=sharing

[meiamsome]

Yeah, with the underlying requestAnimationFrame you are locked into whatever the browser gives you (not this is usually no higher than the monitor refresh rate, but it can be higher).

You can take control of the loop yourself with something along the lines of:

function setup() {
  // rest of setup
  noLoop();
}

function draw() {
  setTimeout(redraw, 10); // where 10 is the minimum time between frames in ms
  // rest of draw
}

or:

function setup() {
  // rest of setup
  noLoop();
  setInterval(redraw, 10); // where 10 is the minimum time between frames in ms
}

But you are not likely to have a stable FPS with this and you might see some browsers capping you harder. There are other performance issues with this, but yes - it is possible to go faster (I was able to achieve ~250 fps on my pc/browser with this by setting the minimum interval to 0ms, but with more complex draws this will inevitably slow down)

[clay53]

@meiamsome Thank You! This solution works for me. However, do you know if this would be possible to enable/disable during runtime? If not then that's fine it doesn't make that huge of a difference.

[meiamsome]

@clay53 you could try something like:

var customLoop = false;
function enableCustomLoop() {
  noLoop();
  customLoop = true;
}
function disableCustomLoop() {
  loop();
  customLoop = false;
}

function draw() {
  if(customLoop) {
    setTimeout(redraw, 10); // where 10 is the minimum time between frames in ms
  }
  // rest of draw
}

[Spongman]

does the browser ever present the page any quicker than the requestAnimationFrame frequency? if not, it might just be easier to put a for loop inside the draw function.

function draw() {
  for (var i = 200 / frameRate(); i --> 0 ;) {
    myDraw();
  }
}

[clay53]

@meiamsome Thanks! I'll try to implement this concept.

[clay53]

@Spongman You actually anger me.

[meiamsome]

@Spongman I think that's browser dependant... I would be very surprised if they did allow you to render faster than that, but you can definitely simulate more frames, if, for example, you are trying to record the canvas