p5 running slow - Githubissues

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

http://p5js.org/

GNU Lesser General Public License v2.1

21.73k stars 3.34k forks source link

p5 running slow #2822

Closed alessandroCharbonnier closed 6 years ago

alessandroCharbonnier commented 6 years ago

Hi everyone, I used p5 0.5.6 for a long time and had a good frame rate but when I recently updated to 0.6 I've seen a massive drop in frame rate on my sketches. For some little sketches it's ok but on some huge ones I cannot even load the page and make my pc crash. It will be great to have that performance back.

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)

limzykenneth commented 6 years ago

Hi @alessandroCharbonnier, have you tried using the p5.min.js file instead of the regular p5.js file (or set p5.disableFriendlyErrors = true at the beginning of your sketch)? The friendly error system is expected to cause a slow down and disabling it can help performance.

If that doesn't help, it could be helpful if you can share with us some working sample code that shows significant slowdown in 0.6.0. Thanks!

alessandroCharbonnier commented 6 years ago

Hi @limzykenneth, I have tried what you said but still the same problem here is a link to my sketch so you can take a look https://github.com/alessandroCharbonnier/p5-Issue

lmccart commented 6 years ago

hi @alessandroCharbonnier we're not able to find the problem with such a large codebase to review. please isolate the issue to a snippet of code 20 lines or less, or post in the forum for general programming assistance. thanks!

Spongman commented 6 years ago

I'm not seeing any noticable frameRate difference between 0.5.16 and 0.6.0.

the reason this sketch is so slow is that it's calling img.get() repeatedly on a large image. you might want to look into calling the img.loadPixels() method once and reading the img.pixels array directly.

there's definitely room for improvement here in the library. the get method calls loadPIxels, but loadPixels doesn't actually need to do anything if the image/canvas hasn't changed. the webgl texture code already does some similar optimization with texture uploading, maybe something like that can be re-purposed to help optimize get/loadPixels ?

alessandroCharbonnier commented 6 years ago

@Spongman thanks for your help I found that the problem was in the get method and I haven't thought of loadPixels() I'll try to implement that on my sketch :)