When is processing faster than p5?

p5.js
1

Heya,
I originally did a Processing course, and now discovered p5 which I prefer to use.
Today I tried to follow this Processing tutorial in p5: https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/

It creates a PGraphics object (so I made p5.Graphics), and copies 16 squares from it onto the screen.
I noticed that in my browser this runs incredibly slow, about 2 fps, see my sketch here: https://editor.p5js.org/hapiel/full/kn8TmcJ1S

I’ve recreated it in Processing, and there it runs nearly 60fps.

I want to keep on using p5, but for some projects I’m clearly better off with Processing. Are there some guides on how I can predict if a browser can handle my project, or if I should stick to Processing? And are there ways to speed up my browser sketch?

Thanks!

2

Processing runs on you PC as an application layer on top of java, java is a compiled language. P5 is written in JavaScript which is an interpreted language. Compiled languages are always gonna faster than interpreted language.

https://web.stanford.edu/class/cs98si/slides/overview.html

2 Likes
3

I understand those differences, and generally speaking that is correct. However, I am sure there are certain operations which are particularly heavy on p5, such as the one I found in my example from the first post.

Would you perhaps know of a list/guideline on which kinds of functions/computations to do in processing, rather than p5?

4

I don’t know about general guidelines that cover when to pick Processing over p5.js. But there’s an article that covers optimizing p5.js code for performance. I used the Automated Profiling approach described there to find the culprit in your sketch: it’s the copy() call that causes the slowdown.

You could use the canvas API directly instead and probably get a performance increase.

Set pixel density to 1 inside setup():

pixelDensity(1);

Replace copy() call inside draw():

//copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);
drawingContext.drawImage(pg.elt, sx, sy, sw, sh, dx, dy, dw, dh);

You could get even more performance out of p5.js by learning about WebGL and shaders.

4 Likes
5

Thank you, that is very useful info!