How to clear the contents of a layer created with PGraphics

edited July 2014 in How To...

Hello,

I'm currently working on an Android application in which I'm creating layers with PGraphics. So far that seems to work nicely. However, I need to be able to clear the contents of a layer in order to display something else, not covering the previous contents.

I've quickly sketched up the following to demonstrate my problem - tested in Android as well as a desktop-applet - neither worked properly. The example was inspired by a post that I found on the old Processing forum: http://forum.processing.org/one/topic/pgraphics-clear-is-undefined.html

PGraphics textLayer;
String[] text = { "this is text 1", "this is text 2" };
int sel = 0;

void setup() {
  orientation(LANDSCAPE);
//  size(900, 500);
  textLayer = createGraphics(width, height);
}

void draw() {
  println(sel);
  drawText();
}

void drawText() {
//  textLayer.clear(); // fails
//  textLayer.background(0, 0, 0, 0); // fails too
  // fails as well
  textLayer.loadPixels(); 
  for(int i=0; i<textLayer.pixels.length; i++) {
    textLayer.pixels[i] = 0;
  }
  textLayer.updatePixels();

  textLayer.beginDraw();
  textLayer.textSize(100);
  textLayer.fill(0);
  textLayer.text(text[sel], 50, 100);
  textLayer.endDraw();
  image(textLayer, 0, 0);
}

void mousePressed() {
  println("mouse pressed");
  sel++;
  sel%=2;
}

Can anyone tell me what I'm doing wrong. Any hints much appreciated...

Thanks!

Tagged:

Answers

  • edited July 2014

    Ok, after digging a bit deeper I've understood that clear() (respectively call regarding the textLayer except the final call to image()) should happen between beginDraw() and endDraw(). However, that didn't make any difference in the result...

  • edited July 2014 Answer ✓

    You mean as to why the text is overlapping?

    Simple. Imagine that your PGraphics image is another canvas like the sketch window. You drew something on that image, then the image to the sketch window. Then you realize you want to change something in the image.

    So you apply that change. You erase the image, and draw it again. But then, you draw that image to the window yet again. Without erasing the screen.

    Not to sound critical, but do you really expect that when you erase something on the image, the sketch window will magically erase itself as well? Does paper that you traced an image onto erase itself when you erase the original?

    What I'm getting at is that you have to erase the screen manually. Just as the PGraphics class has a clear() function, the sketch has a function for the whole window, which is background(), which you have to put at the beginning of draw() in order for it to clear the screen after every frame.

  • Answer ✓

    Actually, the canvas itself is a PImage, whose reference is stored in a field called g.
    Any drawing command, when it's not explicitly used on a particular PGraphics, goes to the main canvas.
    When a draw() round is finished, the content referenced by g is visibly rendered on the JFrame's screen window.

  • Thanks for the comments. After giving it a second thought I've come to the conclusion that it's better to do it without any PGraphics stuff - works like a charm now. As I've already written a method that, when called in draw(), renders my texts to screen it's no problem to put the call to that method just after everything related to creating the graphics that I want to overlay with my text.
    @GoToLoop: I'm rather new to Java. Is a field accessible? Can it be used to manipulate the object that it is referencing? (just out of curiosity - not of any relevance here). @MenteCode: Simple, yes? Well, simple, indeed. Just forget about PGraphics. Never mind.

  • edited July 2014

    :P

    Simple for me, at least. I'm usually very inconsiderate.

  • edited July 2014

    I'm rather new to Java. Is a field accessible?

    It depends on the access level a field was declared with: public, protected, private.
    But fear not, most Processing API's fields & methods are public! ;)

    We can, rather than issue line(10, 10, 190, 190);, use g.line(10, 10, 190, 190);.
    Although the result would be the same! O:-)

  • @GoToLoop: ah! so simple :P I'll keep that in mind...

Sign In or Register to comment.