how to delete elements from canvas graphics in p5.js

Adeeba

how to delete elements from canvas graphics in p5.js

function setup(){   
            canvas=createCanvas(1000,1000);
            canvsGraphics = createGraphics(1000,1000);
        }

GoToLoop

1. https://p5js.org/reference/#/p5.Element/remove
2. https://p5js.org/reference/#/p5/noCanvas
3. https://p5js.org/reference/#/p5/remove

Adeeba

remove() method removes items from canvas but i want that item removed from canvas graphics

GoToLoop

... I want that item removed from canvas graphics.

• I guess you're referring to variable canvsGraphics, right?
• Function createGraphics() creates & returns a p5.Graphics object:
  https://p5js.org/reference/#/p5/createGraphics
  https://p5js.org/reference/#/p5.Graphics
• And in turn, p5.Graphics is a subclass of p5.Element class: https://p5js.org/reference/#/p5.Element
  https://GitHub.com/processing/p5.js/blob/master/src/core/p5.Graphics.js#L63
• Therefore, all properties & methods of class p5.Element are also available for p5.Graphics, including the method remove(): https://p5js.org/reference/#/p5.Element/remove

Adeeba

my code in mouseDragged()

    noStroke();
   fill(R,G,B);
   ellipse(mouseX,mouseY,10,10);

   //CREATES BUFFER
   canvsGraphics.noStroke();
   canvsGraphics.fill(R,G,B);
   canvsGraphics.ellipse(mouseX,mouseY,10,10);  

how can delete above drawn ellipse from canvsGraphics(i.e. creating Undo function ). please suggest

GoToLoop

That's not about creating a buffer, but rather drawing on it. #-o
Call clear() or background() methods in order to erase everything there: *-:)

1. https://p5js.org/reference/#/p5/clear
2. https://p5js.org/reference/#/p5/background

Adeeba

Thanks for your reply, I'm new in P5.JS so could you please give me any reference or example to add objects to data structure,

GoToLoop

... any reference or example to add objects to data structure.

Data structure? Do you mean arrays, objects, XML, etc.? :-/
Dunno if that's related to createGraphics()? :-??

TfGuy44

Stepping in here...

You're asking a simple question using a lot of specific keywords that is getting everyone else confused. You do need to "delete", what you are working with is not an "element", nor does this have anything to do with a "canvas" or the "canvas graphics".

You real question is this: How can I make something that I've already drawn disappear?

And the answer is this: You need to understand how draw() works.

Imagine that I am a robotic painter. Because I am a robot, I can paint very fast. I follow a set list of instructions, and because those instructions tell me what to paint, when I am done following them, I have produced a picture. I then show you this picture, but only for a fraction of a second, because I'm going to follow those instructions again and produce a new image for you to see a fraction of a second later (and I do that since I only have one purpose in life and it's not passing butter).

Here are some instructions I can follow:

void setup(){
  size(400,400);
}

void draw(){
  background(0);
}

The first instruction tells me that all the paintings I produce will be 400 by 400 pixel big. The second instruction tells me to paint everything in the painting black, every single time I paint it. Granted, this is not a very interesting painting, but you get to see it painted about 60 times a second.

We can make it a bit more interesting by drawing things in different places as time goes on:

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  fill(255,0,0);
  ellipse(
    200+100*cos(map(millis()%5000,0,5000,0,TWO_PI)),
    200+100*sin(map(millis()%5000,0,5000,0,TWO_PI)),
    20,20
  );
}

Here, a red ellipse is redrawn at a different position every time I paint a new painting. This tricks your eyes into thinking that it is the same ellipse moving in a circle - in fact it is 60 different ellipses every second! What trickery!

It's important that you understand what the background() instruction tells me to do. This instruction says that each painting should start with a solid color background. If this instruction is missing, the background for my painting will just be the same painting that I finished painting from last time. There might be some times when this is useful - perhaps you want me to keep adding things to a painting at random:

void setup(){
  size(400,400);
}

void draw(){
  fill(random(255),random(255),random(255));
  ellipse(random(width), random(height),20,20);
}

It's important that you realize that no one is saving the positions of any of those ellipses - they are just left over from what was painted before. Here's that same set of instructions, but with a background() call in there:

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  fill(random(255),random(255),random(255));
  ellipse(random(width), random(height),20,20
  );
}

Notice that now the random ellipses seem to disappear. And, in fact, that is what is happening - because they are getting painted over with the black background immediately on the next painting, you only see them for a fraction of a second.

I am not, of course, a robotic painter. But the draw() function is. So if you want something that was there to stop being there, you need to make drawing it depend on some condition that determines if it should be drawn or not. You do not always draw it and then later determine you want to remove it. You simply NEVER DRAW IT IN THE FIRST PLACE.

"But wait!", I hear you cry, "I am not using background(), so it is there from what I drew before!" To which I reply, "Then you are doing it wrong! You should call background() and then REDRAW EVERYTHING, EVERY FRAME."

"But wait!", I hear you cry, "I am not keeping track of everything that was already drawn!" To which I reply, "Then you are doing it wrong! You should keep track of everything you want draw so that you can redraw it, because you should REDRAW EVERYTHING, EVERY FRAME."

With all that sorted out, here is one final example:

ArrayList<PVector> positions = new ArrayList();

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  for( PVector p : positions ){
    fill(random(255),random(255),random(255));
    ellipse(p.x,p.y,20,20);
  }
}

void mousePressed(){
  positions.add( new PVector( mouseX, mouseY));
  if( positions.size() > 6 ){
    positions.remove(0);
  }
}

Here we see a dynamic ArrayList of positions, chosen by mouse clicks (so be sure to click in the sketch!) and at each position a circle is displayed. You can tell that each circle is being constantly redrawn because the color flickers. But the data structure is limited to 6 positions total, so when you click to add a seventh circle (of hell! ... or not), the earliest one that was added is removed, and thus disappears.

Adeeba

Thanks for the help.

Adeeba

i have tried your above code . first line gives the following error: Uncaught ReferenceError: Invalid left-hand side in assignment.

please help it out

TfGuy44

These examples are written in Java Mode, not P5.js Mode.

The concept of "redrawing everything (except the things that you don't want drawn), every frame" still applies.

See https://p5js.org/examples/objects-array-of-objects.html for P5.js array of things syntax.