How to clear a Graphics object?

CosmicChild

I'm using an object created with createGraphics to draw my sketch, separate from the canvas.

The problem is that I need to clear this object for every loop, reseting all values to 0 including alpha. I cannot seem to find a way to do this.

Background() will reset colors to 0, but not alpha.

loadPixels() updatePixels() get() set() work with image objects but not with graphic objects.

clear() works only with canvas.

I've tried copy/pasting a transparent image or graphics but this doesn't work either.

Any ideas?

Thanks!

Lord_of_the_Galaxy

Why won't background work? You can always mention an extra alpha argument to background when using a PGraphics object.

GoToLoop

clear() works only with canvas.

Canvas is also a p5.Renderer object! And clear() should work on it: :-@

1. http://p5js.org/reference/#/p5.Renderer
2. http://p5js.org/reference/#/p5.Graphics
3. http://p5js.org/reference/#/p5/clear

var pg;

function setup() {
  createCanvas(100, 100);
  pg = createGraphics(width, height);
}

function draw() {
  background(255);
  pg.ellipse(mouseX, mouseY, 20, 20);
  image(pg, 0, 0);
}

function mousePressed() {
  pg.clear();
}

Lord_of_the_Galaxy

Ouch. I didn't know that the discussion was about p5

CosmicChild

Thanks for your answers!

The background doesn't work this way, if I set an alpha value of 0 it actually makes the background I'm applying transparent, hence, nothing really happens. What I need to do is to erase all pixels and set their alpha value to 0.

I've tryied the pg.clear() inside of my draw() and it didn't really work. But I will try again, maybe I missed something

jeremydouglass

@CosmicChild -- You cannot accomplish this with background() because alpha automatically blends with the existing pixel values (as you have already discovered).

Have you tried resetting the pixel values directly by looping through the pixels and setting each one to (0,0,0,0)? You can do this with pixels[] or with set() -- both are fast operations but pixels[] is faster (at least, it is in Processing Java mode).

• https://p5js.org/reference/#/p5/pixels[]
• https://p5js.org/reference/#/p5/set

Lord_of_the_Galaxy

So you're saying background with alpha won't really set all the pixels to that value, but rather act as though you called fill and drew a rectangle to cover the whole object? Interesting.

jeremydouglass

background with alpha won't really set all the pixels to that value

Exactly -- and that is expected behavior. Setting the PGraphics.background() with an alpha channel always applies a percentage of the color values on top of whatever is underneath -- that's what the alpha channel is. So, for example, repeatedly setting a PGraphics background to red at 16 alpha will slowly redden the image over time:

Edit: Note that this is a Processing (Java) example, not p5.js
Edit: simplified

PGraphics pg;
void setup(){
  size(200,200);
  pg = createGraphics(width,height);
  frameRate(2);
}
void draw(){
  pg.beginDraw();
  pg.background(255,0,0,16);
  pg.endDraw();
  image(pg,0,0);
}

That is why repeatedly using background to add color at alpha 0 will do nothing -- at alpha 0 what you are adding is perfectly transparent, so nothing changes whatever is already there. Instead, to specify pixels at alpha 0 you should set pixels directly using pixels[] or set().

CosmicChild

Yes, I thought of that, but I cannot load the pixels[] array of a PGraphics object in P5. When I call pg.loadPixels() if get this error: 20090: Uncaught TypeError: undefined is not a function

Now that I've retested it, this error only occurs when I'm using a PG in the WEBGL mode (3D). When I use the P2D renderer I can call the loadPixels() without a problem. I think I may post it as a bug at gitHub.

Lord_of_the_Galaxy

@jeremydouglass Im sure you noticed this yourself, but for the sake of others, the code you gave is a bit redundant. You're effectively setting pg = pg. What you're doing in the function is taking and input PGraphics object, editing it, and returning it. Then inside your code, you (line 8) are pointlessly setting the pointer pg to point at the returned value - p - which itself points at the same PGraphics object as pg.

jeremydouglass

Yes, this is true -- there is no need to return a global variable that was modified in-place -- nor to pass an argument to a simple custom function acting on a global variable -- nor even to have a function at all outside draw. I sometimes share examples of argument passing for people who are working on larger projects, but I'll simplify the example here to avoid confusion.

Lord_of_the_Galaxy

Better now.