P5.js sketches with terrible framerate on chrome

[colin]

Hi, I developed several games using P5.js and I managed to make them work around 60fps. Sadly, I discovered that they’re working around 10fps on a lot of browsers including recent versions of chrome and safari.

Here is a very short sketch that display framerate.

http://pleaseletme.help/framerate/

Any idea of how to solve this issue ? I’m a bit lost.

here is the P5.js sketch

Thanks for our help !

I also posted this question here

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  textAlign(CENTER, CENTER);
  text(frameRate(), width / 2, height / 2);
}

body {
  padding: 0;
  margin: 0;
}

canvas {
  vertical-align: top;
}

[WakeMeAtThree]

The sketch that you linked to gives me a rate of 60fps on both chrome and firefox. Maybe that’s oversimplifying your games sketch? Do you have nested for loops in your game where you’re making a lot of comparisons for collision detection perhaps? That could slow down your sketch by a lot.

[Kevin]

When you post to multiple sites, please link between those posts so we can see what help you’ve already received.

This has also been posted here:

P5.js sketch has terrible framerate on chrome

[colin]

Hi, thanks for your answer !
The browsers that give me a low frame rate can’t run this sketch either at more than 9fps in full page (latest builds of chrome and safari for me), almost the same as for my games.
Which version of chrome are you using ? Mine is 66.0.3359.181.
Just in case, here is an example of a full game I did : https://martiansparlor.itch.io/191

[colin]

Hi,
You’re right, I’ll do it now. Thanks !

[bmoren]

I’m also getting 60fps in FF & Chrome. I cant imagine with the above code why you’d be getting 9fps.

Perhaps a more detailed sketch more related to one of your games could offer some insight?

[colin]

Hi @bmoren. I’m glad to see that most people here can run the sketch correctly. Which version of chrome are you using ?
I noticed that the issue doesn’t seems to be related to the sketch itself since the browsers who can run this one can also run my games with almost the same framerate. You can try this game made in p5 for example, the frame rate is not displayed in it but you can see if the game run well (it is supposed to be really quick).
What I understood so far is that the newest version of chrome and safari can’t run any of my sketches at more than 9fps when the window is large, it can go up to 60fps if the window is really small. Firefox and waterfox doesn’t seem to be concerned so far.

[jeremydouglass]

191 runs very fast and fluid for me on 66.0.3359.181 (Official Build) (64-bit).

This sounds like you could possibly be experiencing a general browser issue that isn’t Processing-specific. For example, you might have a ram-hogging plugin installed? Have you tried other non-Processing-specific resource intensive JavaScript games in that browser?

[colin]

Hi @jeremydouglass. Thanks for testing 191°
Now the framerate is ok on my chrome browser. Since I didn’t make any change, I suspect some browsers to have a different way to work with memory. Maybe the activity on the computer behind could be involve ?

[jeremydouglass]

@colin

Maybe the activity on the computer behind could be involve ?

Yes – your computer has limited RAM, and you have a lot of browser tabs open or are running a lot of different applications in the background then your application may slow down.

[Birb]

On the framerate app it hovers around 11 or so fps but it is highly eratic going from 30 to 7 back to 20 rapidly. On the game the frame rate is between 1-9, often freezing or dipping below 1fps.

[colin]

@Birb

On the framerate app it hovers around 11 or so fps but it is highly eratic going from 30 to 7 back to 20 rapidly. On the game the frame rate is between 1-9, often freezing or dipping below 1fps.

That’s what I’m looking for ! Which browser and which OS are you using ?

[colin]

@jeremydouglass

Yes – your computer has limited RAM, and you have a lot of browser tabs open or are running a lot of different applications in the background then your application may slow down.

But if so, why is it depending of the browser ? I’m talking about a gap from 60fps to 8fps depending of the browser. And why a simple sketch as the one I posted can give 8fps in full page and 60 in a very small window ? Thanks for your answer btw

[Birb]

That’s what I’m looking for ! Which browser and which OS are you using ?

I’m running Firefox ESR 52.8.0 on Windows 10 with 8gb RAM.

[elginskye]

Just noting that I get the same issue on chrome with the framerate sketch.

It works at ~60 fps on firefox, but only around ~15 fps on full screen chrome. If I reduce the size of the Chrome window, it seems to speed up to around ~45 fps.

Your 191 game works on Chrome, but is clearly lagging for me. Runs perfect in Firefox.

Running Chrome v 67.0.3396.99 on El Capitan mac.

[matthewjohnjamieson]

I was having performance problems with p5.js sketches on my El Capitan Macbook Pro, but resolved them by upgrading to High Sierra. Here is a link to the thread:

Performance issue: p5.js crushing my CPU (possible retina issue?)

Hi @matthewjohnjamieson, can you let us know which version of p5.js you’re using? (this should be in a comment at the top of your p5.js or p5.min.js file) If you’re not doing this already, you might get a performance boost by using p5.min.js which will turn off some of the parameter validation for the friendly error system. If that’s not applicable, can you run the performance profiling tools in Chrome or Firefox and let us know where the slowdown seems to be? (here’s a nice tutorial on the Ch…

[elginskye]

thanks @matthewjohnjamieson - I suspected this would be the case. I upgraded to High Sierra overnight and my fps in chrome is working perfectly now.

[colin]

Thanks @elginskye for your reply and for trying the game

[helloDolly]

On my mobile phone I’m getting 8-11 fps with that simple framerate sketch. The phone is a LG G5 using Android 8.0.0 with both Chrome 70.0 and Opera Mini v37.1

Was there any progress made on why this is running so slow?

I was wondering why my own sketch was running so slow, but if my phone can barely get the framerate sketch at 10fps there’s no reason to expect my sketch to run any faster.

[kll]

with a acer tablet B1-723 Android 5.1
and chrome 69.0.3497.100
get a rate of 40 with this sketch

var rate;
var posX=0;

function setup() {
	createCanvas(windowWidth, windowHeight);
	textAlign(LEFT);
	textSize(30);
	rectMode(LEFT);
  background(255);
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

function draw() {
	posX++;
	if ( posX > width ) { posX = 0; } //print("reset "+pX); }
	rate = frameRate();
	noStroke();
  fill(255);
	rect(width / 2-35, height / 2-35,100,40);     // clean old number
	fill(255-rate*3,rate*3,0);
	text(nf(rate, 1, 1), width / 2, height / 2);
	stroke(255-rate*3,rate*3,0);
  line(posX,height/2+200,posX,height/2+200-2*rate+1);
	stroke(255);                                  // clear old longer lines
  line(posX,height/2+200-2*rate,posX,height/2-200);
  line(posX+1,height/2+200,posX+1,height/2-200);    // and show a leading empty line

}

https://editor.p5js.org/kll/sketches/rkIQz9LhQ

on huawei y7-pro-2018 Android 8 see a rate of 50

( both only called from editor, NOT IN FULLSCREEN )