Control P5 slowdown

philspitler · July 31, 2018, 10:44pm

I have a weird issue where my sketch gets slower and slower the more Control P5 buttons I have. This behavior only shows up in Android mode, it seems fine when running in Java on OSX.

If you look at my code you will see I draw a UI with a bunch of buttons… If I comment out that code my sketch returns a value of 10 seconds which is correct for 24fps. If I leave all the buttons in my sketch the time goes up to 22 seconds… If I leave half the buttons in it is somewhere in the middle… I only create the buttons in setup so it seems odd that I am getting such a drastic slow down…

Any ideas?

Thanks,
Phil


import controlP5.*;

Button myButton1;
Button myButton2;
Button myButton3;
Button myButton4;
Button myButton5;
Button myButton6;
Button myButton7;
Button myButton8;
Button myButton9;
Button myButton10;
Button myButton11;

ControlP5 cp5;
int buttonYpos = 0;
int currentFrame = 0;
int Yoffset = -55; 


void setup() {
  frameRate(24);

  size(1200, 1920);

  stroke(255);


  cp5 = new ControlP5(this); // 
  cp5.setFont(new ControlFont(createFont("Arial", 32), 32));
  cp5.setAutoDraw(false);

  // build UI
  myButton1 = cp5.addButton("alloff")

    .setCaptionLabel("All Off")
    .setValue(0)
    .setPosition(100, 250+Yoffset)
    .setSize(500, 60)

    ;

  myButton2 = cp5.addButton("grad")

    .setCaptionLabel("Color Grad")
    .setValue(0)
    .setPosition(100, 350+Yoffset)
    .setSize(500, 60)

    ;

  myButton3 = cp5.addButton("buddah")

    .setCaptionLabel("Pink Buddah")
    .setValue(0)
    .setPosition(100, 450+Yoffset)
    .setSize(500, 60)

    ;

  myButton4 = cp5.addButton("colorwipe")
    .setCaptionLabel("Color Wipe")
    .setValue(0)
    .setPosition(100, 550+Yoffset)
    .setSize(500, 60)

    ;

  myButton5 = cp5.addButton("orange")
    .setCaptionLabel("Orange Blossom")
    .setValue(0)
    .setPosition(100, 650+Yoffset)
    .setSize(500, 60)

    ;



  myButton6 = cp5.addButton("rustySwirl")
    .setCaptionLabel("Embers")
    .setValue(0)
    .setPosition(100, 750+Yoffset)
    .setSize(500, 60)

    ;

  myButton7 = cp5.addButton("psych")
    .setCaptionLabel("psychedelic blue")
    .setValue(0)
    .setPosition(100, 850+Yoffset)
    .setSize(500, 60)

    ;

  myButton8 = cp5.addButton("petals")
    .setCaptionLabel("rainbow petals")
    .setValue(0)
    .setPosition(100, 950+Yoffset)
    .setSize(500, 60)

    ;

  myButton9 = cp5.addButton("sunrise")
    .setCaptionLabel("Sunrise")
    .setValue(0)
    .setPosition(100, 1050+Yoffset)
    .setSize(500, 60)

    ;

  myButton10 = cp5.addButton("smoke")
    .setCaptionLabel("Ice Drops")
    .setValue(0)
    .setPosition(100, 1150+Yoffset)
    .setSize(500, 60)

    ;

  myButton11 = cp5.addButton("allSeq")
    .setCaptionLabel("All Sequences")
    .setValue(0)
    .setPosition(100, 1250+Yoffset)
    .setSize(500, 60)

    ;
} 




void draw() {

  cp5.draw();
  currentFrame = (currentFrame+1);


  if (currentFrame >= 240) { // 10 seconds @ 24fps
    println (millis()/1000); // how many seconds did it actually take?
    stop();
  };
}

kfrajer · August 1, 2018, 12:36am

Do you observe the same problem if you use P2D renderer?

size(1200, 1920,P2D); or fullScreen(P2D);

Kf

philspitler · August 1, 2018, 6:56pm

@kfrajer I have some interesting findings…

I would expect the result of looping 240 times at 24FPS to result in a 10 second runtime.

Below are my results.
size(1200, 1920,P2D) with no cp5.draw() 12 seconds
size(1200, 1920,P2D) with cp5.draw() 15 seconds

size(1200, 1920) with no cp5.draw() 10 seconds
size(1200, 1920) with cp5.draw() 23 seconds

So basically the sketch runs slower with P2D unless I am using CP5 in which case it runs faster… But still 50% slower than expected.

This is very perplexing… I would be interested for somebody else to run the code to see what results they get…

Cheers.

Phil

philspitler · August 2, 2018, 12:45am

I wonder if something like G4P might be easy to implement without modifying too much of my code…

Or if G4P would actually be any faster…

Thoughts?

Cheers

Phil

Kevin · August 2, 2018, 12:53am

It looks like you’re measuring startup time, not the frame rate.

What happens if you measure the actual frame rate instead of the startup time?

philspitler · August 2, 2018, 2:09am

@Kevin the numbers I show are the runtime. I modified my code from what is shown above to start once I get into the draw function.

I didn’t realize I could use the frameRate function to detect the framerate, I will try that when I’m next back with my Android device… Thanks

Phil

Kevin · August 2, 2018, 2:14am

Hmm I’m a little confused. The code that’s in your original post measures this:

[setup time] + [draw time] * [10 frames]

I would expect adding stuff to the setup() function to increase the result of this calculation.

Instead, can you measure the framerate itself? Processing provides some handy variables for this. I’d try something like this:

void draw(){
  cp5.draw();

  // print out frame rate once per second
  if(frameCount % 24 == 0){
    println(frameRate);
  }
}

philspitler · August 2, 2018, 2:15am

@Kevin your method is much better than I had and I will test it tomorrow for sure.

Cheers

Phil

Kevin · August 2, 2018, 2:22am

Cool sounds good. Also note that startup time with programs is especially hard to accurately measure, since so much is going on. It’s much better to measure the framerate or performance after the program is up and running.

That being said, it does seem suspicious that a few buttons would increase your startup time by 10 seconds!

kfrajer · August 2, 2018, 4:09am

I suggest you run examples provided by the library. Are they responsive?

I am not sure if printing to the console is helping here. Could you elaborate about your profiling? Are you synchronizing some event in the background or are you just testing the performance. If I were you, I would put an actual example together and test it. For instance, I ran your code without your printing and without altering the run cycle of cp5 and it is responsive.

I am using fullScreen(), I did not disable the autodraw and I am not calling stop within draw(). So yes, I am not calling cp5.draw() in draw with the above changes.

Kf

philspitler · August 2, 2018, 5:08am

@kfrajer The slowness was not the responsiveness of the UI, the UI is snappy as expected.

The code listed is just sample code to illustrate the issue. My actual code loops through a folder of tiny PNG files and plays them as an animation. I did my animation at 24fps but noticed on playback it looked really slow.

That’s when I striped down my code to the minimum and still had the issue.

I’ll test the frame Rate tomorrow and report back…

Thanks for all the help.

Phil

kfrajer · August 2, 2018, 5:43am

I see now. Thxs for clarifying. Your best bet is to follow @Kevin’s advice then. Stick to java2d as it seems to be faster than P2D. Not sure why that is though… as I have seen cases of frame rate improvement switching to P2D.

Kf

Kevin · August 2, 2018, 4:22pm

This I could see slowing things down at startup. Is it possible to create a small example that does this?

philspitler · August 2, 2018, 9:05pm

@Kevin I thought it was the image sequence that was slowing things down but even with all that code stripped out cp5.draw() is slowing everything down…

I added the snippet you provided and it gave a very interesting result.

I switched to 48FPS and without cp5.draw() I get 48 FPS and with cp5.draw I get 23fps…


import controlP5.*;
Button myButton1;
Button myButton2;
Button myButton3;
Button myButton4;
Button myButton5;

ControlP5 cp5;
int buttonYpos = 0;
int currentFrame = 0;
int Yoffset = -55; 


void setup() {
  frameRate(48);

 size(1200, 1920);
 stroke(255);


  cp5 = new ControlP5(this); // 
  cp5.setFont(new ControlFont(createFont("Arial", 32), 32));
  cp5.setAutoDraw(false);

  // build UI
  myButton1 = cp5.addButton("alloff")

    .setCaptionLabel("All Off")
    .setValue(0)
    .setPosition(100, 250+Yoffset)
    .setSize(500, 60)

    ;

  myButton2 = cp5.addButton("grad")

    .setCaptionLabel("Color Grad")
    .setValue(0)
    .setPosition(100, 350+Yoffset)
    .setSize(500, 60)

    ;

  myButton3 = cp5.addButton("buddah")

    .setCaptionLabel("Pink Buddah")
    .setValue(0)
    .setPosition(100, 450+Yoffset)
    .setSize(500, 60)

    ;

  myButton4 = cp5.addButton("colorwipe")
    .setCaptionLabel("Color Wipe")
    .setValue(0)
    .setPosition(100, 550+Yoffset)
    .setSize(500, 60)

    ;

  myButton5 = cp5.addButton("orange")
    .setCaptionLabel("Orange Blossom")
    .setValue(0)
    .setPosition(100, 650+Yoffset)
    .setSize(500, 60)

    ;


} 




void draw() {

  cp5.draw();
   
    
 if(frameCount % 24 == 0){
    println(frameRate);
  }
 
}```

kfrajer · August 3, 2018, 1:00am

Samsung Galaxy S8 here…

Running your code as in your previous post, I am getting between 27-31fps. However, if I touch the screen I notice the frameRate jumps to 47fps.
Removing cp5.draw and autodraw(false) reflects about the same values for frame rate.
Using fullscreen() aka. 1080x2220, frame rate falls back to 28-26fps and it changes up to the upper limit when the screen is touched.
Removing all the buttons… yes, the rate is consistent at 48fps.
Now, using fullScreen(P2D) and removing autoDraw(flase) and removing cp5.draw()… I get 48fps consistent.

So use P2D and do not disable the autodraw. I suggest you continue your project and ignore this for now, unless that it interfere with your project.

Kf

philspitler · August 3, 2018, 2:26am

Great, I can’t check this until Tuesday but will certainly give that ago.

Thanks

Phil

philspitler · August 7, 2018, 5:55pm

Thanks so much @kfrajer and @Kevin for all your help.

Using fullScreen(P2D) and removing autoDraw(false) and removing cp5.draw() worked perfectly.

Phil;

philspitler · August 7, 2018, 7:25pm

As an FYI… the Processing sketch is used to control the lighting on our artcar at Burning Man

Much, much appreciated.

Phil

Kevin · August 7, 2018, 7:32pm

Wow that’s pretty cool. You should make a post about this in the gallery.

Topic		Replies	Views
ControlP5 buttons issue Android Processing for Android	1	447	June 18, 2021
This simple sketch runs much faster on p5.js (60fps) than Processing/Java (5fps) Processing	6	449	July 17, 2021
controlP5 button double tap problem Processing for Android	1	826	April 8, 2019
Why is my p5js code is too slow after I upload it Beginners homework	5	264	December 1, 2022
ControlP5 Buttons Performace issue Libraries	4	262	June 7, 2019

Control P5 slowdown

Related topics