Performance of p5.js vs. Processing 3

omerpekin

Hi!

I am trying to switch to p5.js as much as I can, however I am fairly new at it.

The main problem I have is, when I do stuff with get() and double for loop, p5.js is incredibly slow.

When I run the following code with Processing (java mode) this runs pretty easy. When I do the same thing with p5.js, it is really really really slow.

        var img;


        function setup() {
          createCanvas(480, 640);
          img = loadImage("assets/Image2.jpg");
        }

        function draw() {
          image(img, 0, 0);


          var stepSize = 10;

          for (var y = 0; y < width; y+=stepSize) {
            for (var x = 0; x < height; x+=stepSize) {
              var c = get(y, x);
              fill(c);
              noStroke();
              rect(y, x, 5, 5);
            }
          }
        }

So what is the problem here? What am I doing wrong with p5.js?? If I use the get() command outside of the for loops, it is fairly ok... If I change the stepSize from 10 to 1 then again, p5.js just freezes... Is this normal? Do I have to change something?

GoToLoop

• Even in Java, pixels[] is preferred over get() for max performance.
• And p5.js' get() reference warns us about that: http://p5js.org/reference/#/p5/get
• And a very important general programming rule: before any loop, cache anything that won't change inside it!
• For example: Why do you need to state you want noStroke(); zillion times over? :-\"
• Can't you just state that before the loop? Or possibly once only inside setup() if no drawing is gonna need an outline? :-@
• Also, given stepSize is forever 10, you can make it a global constant at the top of your sketch:
  const STEP_SIZE = 10;

omerpekin

well, many of those mistakes are small things that I kept the same in both Processing and P5.js.

I understand the deal with get(). It is the same deal in both programs.

I was just wondering about all that performance issue because with get() method and setting up double for loops p5.js is significantly slower that processing. And mostly with get() it just crashes...

Is it a deal with javascript that makes everything so slower?

Does it make any difference in running the code with different browsers?

Thanks for the help :)

GoToLoop

• Besides Java being indeed faster than JS in most cases, there are other factors too.
• In Processing, class PImage is mostly pixels[] + width + height + parent.
• In p5.js, class p5.Image is more than that. It's also a whole big HTMLCanvasElement:
  https://developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
• In Processing, each index of pixels[] is a 32bit signed integer aRGB value:
  https://Processing.org/reference/color_datatype.html
• In p5.js, each of its RGBa value occupies 4 indices.
• And I believe current pixelDensity() can multiply its pixels[]'s length even more:
  http://p5js.org/reference/#/p5/pixelDensity
• In Processing, while the result of get() w/ 2 arguments is merely an int.
• In p5.js, it's an array w/ at least 4 elements. Maybe pixelDensity() can increase that! :-SS
• I think there can be more reasons for the whole slowness, but it's gonna need a deeper study on the whole implementation. I-)