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

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

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?

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--){
}

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

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

Hello,

There are references to renderers here:

A related topic:

:)

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

1 Like