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

**URL:** <https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999>\
**Category:** p5.js\
**Created:** [June 15, 2018, 8:21pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999 "2018-06-15T20:21:06Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 15, 2018, 8:21pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/1 "2018-06-15T20:21:06Z")

</div>

Hi there. I’ve been working with p5.js for about 6 months now, and have had an ongoing performance issue even for simple sketches. I’ve been testing it on and off to see how to get to the bottom of it. I have a test sketch that simply paints a 500x500 canvas once per frame, and at 60 fps in chrome or firefox I’m seeing 130-140% cpu usage with pixelDensity(1) set. I’ve been working around the problem with more restrictive frame rates and limiting my sketches, but I’m hoping there may be some real solution.

Computer: late 2013 macbook pro retina, El Capitan 10.11.6, 2.4 Ghz intel i5, 4gb ram

Of course I don’t expect great performance out of this computer, but this is a bit silly.

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 16, 2018, 1:47am UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/2 "2018-06-16T01:47:45Z")

</div>

hi @matthewjohnjamieson can you give us some example sketches please? 🙂

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [June 16, 2018, 1:50am UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/3 "2018-06-16T01:50:00Z")

</div>

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 Chrome tools](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) in case you need it—please disregard otherwise) 🙂

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 16, 2018, 3:38am UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/4 "2018-06-16T03:38:02Z")

</div>

Okay so I’m using min, p5.js v0.6.0 January 19, 2018. I get steady usage of 90+% with the following sketch:

```auto
function setup(){
  createCanvas(500, 500);
  frameRate(60);
  pixelDensity(1);
}

function draw(){
  background(127);
}

```

Which I’m sure you’ll agree probably shouldn’t be so taxing 😁

I ran the Chrome profiler for the sketch above. It says the sketch is spending the majority of it’s time painting—to which I say sure, I mean, what else would it be doing? So far I haven’t been able to find anything more insightful. It seemingly takes 0.5ms to repaint that background every frame.

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [June 16, 2018, 6:16am UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/5 "2018-06-16T06:16:40Z")

</div>

Thanks for following up! Hmm, was “painting” the most detail you could get? In the Call Tree tab of Chrome’s Performance Profiler, I can usually dig into Animation Frame Fired to see specific p5 functions that might be taking up the most time.

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 16, 2018, 6:00pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/6 "2018-06-16T18:00:42Z")

</div>

![39%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/db35f3ebd451628fd1f8c9eb2150b82f661dd060.png)

This is a typical Animation Frame Fired from the profile I ran. requestAnimationFrame seems like it’s the bulkiest part? Some of these requestAnimationFrame’s are calling d.color instead of fillRect. The percentages are similar though. I’ll keep trying to get more detail and see if I can find any red flags.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 16, 2018, 10:19pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/7 "2018-06-16T22:19:03Z")

</div>

> [@matthewjohnjamieson](#):
>
> … are calling d.color instead of fillRect.

If we don’t pass an instance of class p5.Color argument to the following p5 methods **background()**, **fill()** and **stroke()**, they’ll have to instantiate a temporary 1 by themselves. 😬

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [June 17, 2018, 4:16pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/8 "2018-06-17T16:16:26Z")

</div>

Thanks for looking into this further! At a glance this looked like what I’d expect, but running the same code on my machine (a late 2015 MBP w/ macOS Sierra) yields much lower overhead for requestAnimationFrame. I wonder if you tried a simple canvas (without p5) with your own update loop provided to requestAnimationFrame, would you get similar results? How do the examples on this page work for you? [https://developer.mozilla.org/en-US/docs/Web/API/Canvas\_API/Tutorial/Basic\_animations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations)

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 17, 2018, 11:30pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/9 "2018-06-17T23:30:24Z")

</div>

Thanks for helping me out with this! Running the solar system and clock examples gives me ~55-60% CPU usage. Less than the p5 sketch, but still seems like a lot. Could my OS version be a factor? Using El Cap makes me 2 generations behind at this point.

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [June 18, 2018, 7:24pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/10 "2018-06-18T19:24:46Z")

</div>

I’m afraid it could be, but I’d still hope that it wouldn’t be that bad. I don’t know enough about canvas implementations at the OS-level to really have an informed opinion. I wish I had something helpful to suggest as a next step—I’ll keep thinking about this!

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 18, 2018, 8:00pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/11 "2018-06-18T20:00:58Z")

</div>

I think the only way to eliminate the possibility is for me to upgrade the OS and see what happens. If that doesn’t fix it then at least now we know that’s not the issue.

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 19, 2018, 12:01am UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/12 "2018-06-19T00:01:01Z")

</div>

Well okay, looks like good news so far. The upgrade to High Sierra made all the difference. The empty sketch example now runs with trivial overhead. I made a little “move the particles around randomly” sketch, and I’m getting acceptable performance even with several thousand particles. Thanks again for all your help!

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [June 19, 2018, 9:25pm UTC](https://discourse.processing.org/t/performance-issue-p5-js-crushing-my-cpu-possible-retina-issue/999/13 "2018-06-19T21:25:44Z")

</div>

Wow, amazing! So glad to hear that the upgrade did the trick—thanks for sharing the results with us.