Performance improvement/overloading Processing sketch

DanielJay

Greetings!

I've developed a simple drawing app that creates layers of lines from user input. I'm using a P2D render/60FPS, but I notice a progressively sluggish performance as the window accumulates pixels from line. I know this is all relative to my machine, but I was wondering on just a Processing functionality standpoint if this "layering" of pixels is going to be an issue. I don't want to add an algorithm that will clear out the pixels upon reaching a certain threshold and delete the users progress .

Are their any concerns I should be aware of? Tips for optimization ?

codeanticode

Hello, are you drawing an increasingly larger number of stroke lines in each frame? If so, one reason for the slowdown could be that the strokes' caps and bevels trigger the tessellator (which is the part of the renderer turning stroked shapes into triangles that can be rendered by OpenGL). Right now, the tessellator is not super fast and could bring the framerate down if the geometry is large.

DanielJay

The strokes are consistent size ; but the they continuously overlay each other which I'd assume be the same effect after some time with thicker strokes. Truthfully I hardly understood your explanation; do you have a suggestion for improvement ?

REAS

I think we don't understand what your code is doing. Please post the part of the code or a simplified version of the code that exhibits the unexpected behavior.

DanielJay

My sketch was adapted from this script linked on the openProcessing page:

http://www.openprocessing.org/sketch/3260

The functions state that right mouse will "reset" (i.e. overlay background color) , but the left mouse will continuously draw. My sketch is the latter, where the entire sketch will be drawing/updating new strokes/lines.

codeanticode

ok I see, thanks for the link.

What happens is that you keep adding more and more ellipses to the scene. Each ellipse needs to "tessellated" into smaller triangles so it can be rendered through OpenGL (in case you use P2D). This operation doesn't take too much time, but if the number of ellipses is very large, then it will slow down the sketch since it is done in every frame

One solution could be to use a PShape to draw the ellipse, in this way, the tessellation happens only once. What you need to do is add the following changes to the setup function:

PShape circle;

// --- setup procedure ---
void setup() {
  size(1024, 768, P2D);

  circle = createShape(ELLIPSE, 0, 0, 1, 1, CENTER);
  circle.setStroke(false);

and to the ColorDrop class:

  void drawDrop() {
    noStroke();
    pushMatrix();
    translate(initPosX, initPosY + posY);
    scale(diameterDrop, diameterDrop * 2);
    circle.setFill(color(colorDrop, 255 - int(posY / lengthDrop * 250)));
    shape(circle);    
    popMatrix();
  }

Another option would be to use an image of a small circle instead of the ellipse, something like this:

PImage circle;

// --- setup procedure ---
void setup() {
  size(1024, 768, P2D);

  circle = loadImage("circle.png");

and

  void drawDrop() {
    noStroke();
    tint(colorDrop, 255 - int(posY / lengthDrop * 250));
    image(circle, initPosX, initPosY + posY, diameterDrop, diameterDrop * 2);    
  }

DanielJay

Great! Thanks a bunch for the suggestions