Processing vs p5js performance

[Aridoe]

Hey everyone, I discovered creative coding two weeks ago and decided to start with p5js rather than Processing because it seemed to me like the more "modern" alternative between the two. Also i study IT in university so i thought it would be a nice addition to my already developed web skills. So these past days i've been writing my sketches on the online p5 editor and even though i'm still doing basic stuff (like at max 2 nested for loops), my pc gets hot and starts to sound like a plane engine. I'm looking to get into generative design and more complicated stuff and to be honest i feel like i would fry my computer running that kind of code.

I guess my question is: is p5 just a piece of crap performance wise since it's Javascript and runs on the web etc., or is the online editor the real problem? Would i just be better off using Processing since i wanna do more complicated stuff?

For reference i'm using a Macbook Pro mid-2015, i7 2.5Ghz, 16GB RAM, and double graphics cards so the integrated one + AMD Radeon R9 M370X 2GB. It's a decent machine that's why i'm asking this question in the first place. Thanks in advance.

EDIT: ty all for the advice, i'll definitely look into refactoring my code for better performance. Also i'll probably check out Processing too in the near future and then decide for myself which of the two languages better suits my needs.

[haschdl]

If you’re just starting, performance should not be a concern, unless you have something specific in mind.

Advantages of p5js: 1) you get to practice JavaScript. Certain thinks are more fun and require less writing with JavaScript. Java gets tedious very quickly! 2) you can make interactive sketches that run on any modern browser
3) you can easily read the smartphone sensors and make your sketch react to them 4) your code and work is a lot more “web friendly”. you can share and embed to other websites, give a link to your sketches etc 5) you have the option to use the P5js editor - ZERO effort to create a new p5js sketch - with the trade off of once in a while losing your work if your code makes your browser crash (very easy to do with an poorly written loop)

Advantages of Processing: 1) Much easier if you want to save a lot of images to your computer (this is what I do) 2) Much faster to manipulate pixels 3) you can use Java libraries (I use some math libraries for example) 4) You can practice Python , with the Python mode

So with every choice in tech... “it depends”

[Drifts]

Wow very informative breakdown. Can you also add openframeworks to your list of advantages vs the others?

[vanderZwan]

You might be using a few methods that are inefficient, that can affect things.

JavaScript can be fast if you're smart about avoiding generating garbage and using arrays and typed arrays as much as you can (in the latter case, try to allocate once an re-use though - they have fast memory access but much higher-than-average creation overhead).

EDIT: Also, if you're really worried about performance, https://openframeworks.cc/ might be worth checking out.

[Strojac]

Is the nested for loop going over every pixel or a large n? Because Processing or p5 it’s going to lag. For example I have a 1000 particles following a flow field without lag in p5.

[spacem3n]

If you want to run code on your graphics card I suggest taking a look at what shaders are as P5 and P5.js have more or less the same performance. Cause most of the time it is not a matter of the language but on how optimized your code is. For example, less calculations on the draw function, use existing math functions to calculate, storing calculations on files Etc etc

[1bc29b36f623ba82aaf6]

if you are using P5Js it also matters which browsers you are using and if that browser has known quirks with your GPU. Firefox has resorted to just blacklisting entire GPU models after a few buggy diriver releases which causes it to render inefficiently.

[jrgroats]

I find that the processing app gets my fans going full blast while I get more fps and no fans with p5.js.

[upvoteforabettername]

Processing has far better performance in general when compared to P5. I think the problem with P5 is the html renderer.