# When is processing faster than p5?

**URL:** <https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216>\
**Category:** p5.js\
**Created:** [August 12, 2020, 10:23pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216 "2020-08-12T22:23:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 12, 2020, 10:23pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216/1 "2020-08-12T22:23:57Z")

</div>

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/](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](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!

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 12, 2020, 11:05pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216/2 "2020-08-12T23:05:53Z")

</div>

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](https://web.stanford.edu/class/cs98si/slides/overview.html)

---

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 12, 2020, 11:40pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216/3 "2020-08-12T23:40:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [August 15, 2020, 10:29pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216/4 "2020-08-15T22:29:37Z")

</div>

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](https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#automated-profiling) 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()`:

```auto
pixelDensity(1);

```

Replace `copy()` call inside `draw()`:

```auto
//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](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5) and shaders.

---

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 16, 2020, 6:23pm UTC](https://discourse.processing.org/t/when-is-processing-faster-than-p5/23216/5 "2020-08-16T18:23:16Z")

</div>

Thank you, that is very useful info!