pgraphics.clear() and background() doesn't clear pgraphics

dehyde

Hi

I'm trying to create a map with some 130,000 points from a csv file, and have a tooltip pop up on mouse over with the data. Since there are so many points, redrawing background and the points will take too much time and performance drops. I'm trying to use pgraphics to create another "layer" just for overlays like tooltips and on mouse overs.

for some reason clear() and background(x, x, x, 0) don't clean the pgraphics object. I'm not 100% sure why.

here's the code (based on load save table example code and pgraphics reference):

PGraphics circle;
// An Array of Bubble objects
Bubble[] bubbles;
// A Table object
Table table;

void setup() {
  size(1200, 700);
  loadData();
  circle = createGraphics(100, 100);
}

void draw() {
      //background(255);
  // Display all bubbles


    for (Bubble b : bubbles) {
      b.display();
      b.rollover(mouseX, mouseY);
    }

  textAlign(LEFT);
  fill(0);
  text("Click to add bubbles.", 10, height-10);
}

void loadData() {
  // Load CSV file into a Table object
  // "header" option indicates the file has a header row
  table = loadTable("ged171.csv", "header");

  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
  bubbles = new Bubble[table.getRowCount()]; 

  // You can access iterate over all the rows in a table
  int rowCount = 0;
  for (TableRow row : table.rows()) {
    // You can access the fields via their column name (or index)
    float x = row.getFloat("longitude");
    float y = row.getFloat("latitude");
    float d = row.getFloat("where_prec");
    String n = row.getString("dyad_name");
    // Make a Bubble object out of the data read
    bubbles[rowCount] = new Bubble(x*6+300, height-y*6-350, d, n);
    rowCount++;
  }
}




// A Bubble class

class Bubble {
  float x,y;
  float diameter;
  String name;

  boolean over = false;

  // Create  the Bubble
  Bubble(float x_, float y_, float diameter_, String s) {
    x = x_;
    y = y_;
    diameter = diameter_;
    name = s;
  }

  // CHecking if mouse is over the Bubble
  void rollover(float px, float py) {
    float d = dist(px,py,x,y);
    if (d < diameter/2) {
      over = true; 
    } else {
      over = false;
    }
  }

  // Display the Bubble
  void display() {
    if(frameCount==1){
    noStroke();
    //strokeWeight(2);
    fill(255);
    ellipse(x,y,diameter,diameter);


    }
    if (over) {
      fill(0,0,0,255);
      textAlign(CENTER);
      text(name,x,y+diameter/2+20);
      circle.beginDraw();
      circle.clear();
      circle.endDraw();
      circle.beginDraw();
      circle.background(0,0,0,0);
      circle.ellipse(50, 50, 75, 75);
      circle.endDraw();
      image(circle, x, y);
    }
  }
}

koogs

Lines 96 and 97 look suspect.

dehyde

@koogs thank you tried removing them but end result is the same

dehyde

This is what it looks like

koogs

I'm trying to use pgraphics to create another "layer" just for overlays like tooltips and on mouse overs.

But you are calling image on line 101 which I think will stamp your pgraphics onto the background, almost the opposite of what you want.

Shouldn't the background and dots be drawn, once, to the pgraphics and then the draw loop is

Copy pgraphics to screen (background?)
Draw other tmp stuff over the top

?

koogs

In fact, given that the bubbles don't move write a small sketch that draws the dots on the map and save it. Use this new image as your background image for proper sketch.

jeremydouglass

You have background() commented out in draw()! So you can clear your PGraphics buffer, but if you never clear the canvas itself between frames then everything you drew on it before just... stays.

koogs

he said he doesn't redraw the screen every time because it takes too long, hence the pgraphics.