So, I ported a Java Processing sketch to p5.js. The sketches should be simple to run - just basic image rasterization. I tried my best to optimize the JS code but have been unsuccessful at getting any decent performance out of it (max framerate reached is under 10). In comparison, the Java code runs flawlessly even though it is unoptimized. Can someone tell me why?

I get bad performance as well on my MacBook Air (2018) running Safari. About 11 fps. I can’t tell you why, for sure, without profiling and doing an in-depth review of both versions. But, even with the fast and highly optimized JavaScript engines in today’s browsers, it’s not surprising to see a performance hit when going from Java to JavaScript. Implementation differences between Processing and p5.js could also be part of the explanation. Hard to tell without doing a deep dive…

That said, there’s some optimization to be done to the p5.js version of the sketch. draw is called 60 times per second, so you’ll want to do as little work as possible there.

Variables like x, y, and c for each sphere is calculated repeatedly, but the result will always be the same. Determining them once (in setup) got me from ~11 fps to ~20 fps.