This simple sketch runs much faster on p5.js (60fps) than Processing/Java (5fps)

Processing
1

Hello all,
I’m a total beginner in Processing and casual developper, so sorry if this obvious…
I’m working on a simple sketch that I initially coded on p5.js and I want now to play it in processing.
I expected to have a better performance on processing but was surprised it’s not the case.

The code in p5.js is:

function setup() {
  maxlines=2000;  
  createCanvas(800, 800);
  frameRate(60);
  stroke('rgba(100%,100%,100%,0.1)');
  fill(250)
}

function draw() {
  background(0);
  text(frameRate(), 10, 10);
  for (let i = 0; i < maxlines; i++) {
    line(random(width),random(height),random(width),random(height));
  };
}

And in Processing (Java Mode)

int maxlines=2000;

void setup(){
  size(800,800);
  stroke(250,250,250,50);
  frameRate(60);
}

void draw(){
  background(0);
  text(frameRate, 10, 10);
  for (int i=0;i<maxlines;i=i+1){
    line(random(width), random(height), random(width),random(height));
  }
  
}

p5.js printed frame rate keeps close to 60fps whereas in processing, it starts at 60 and goes down quickly to ~5fps

What I’m I missing here? Is it normal behavior?
Is the problem because of the way I coded it in Java? Or maybe an installation issue?
Thanks for helping

1 Like
2

Hi there,
I’m also pretty new to this but I thought I’d check to see if its an installation issue or not.

Your processing code also runs slowly for me, it is after all drawing 2000 lines and making 4*2000 random() calls per frame!

frameRate starts high then reduces, I think because it is taking an average over time.

I’m not sure why this behavior would be different in p5, I know very little about javascript…

I don’t think there’s any errors in your processing code, you are just asking it to do a lot!
Perhaps reduce the number of lines you are drawing or consider ways to reduce the number of function calls you are making to increase framerate?

Hope that helps?

3

Also, to increment your loop index you can type ++ or – to decrement by 1.
eg:

for (int i=0; i<someNumber; i++){
}

for (int i=10; i>someNumber; i--){
}
4

Thanks TomD for looking at my issue,
I figured it out! :slight_smile:
If you go in the examples folder>Demos>Performance, you’ll find a “LineRendering” example,
They use P2D renderer when defining the scree size,
It solves the issue :slight_smile: and give a lil explanation,

Thanks again for checking!

Oh and to answer your advices:
-I need ~2K lines for my project (I didn’t post the actual project, just a sample code to illustrate)
-My project involves re computation at each steps,
-Thanks for all the hints

2 Likes
5

You’re welcome!

Glad you got it figured out, tbh I hadn’t realised that the hardware accelerated renderer could improve performance so significantly, good to know.

The benefits of having a working GPU I guess! haha

6

Hello,

There are references to renderers here:

A related topic:

:)

7

Try out: size(800, 800, FX2D);
Processing.org/reference/size_.html

1 Like