How do I create a class which would contain a PGraphics property

codeav3

I would like every drawn shape to be an object which I can interact with later to change the fill, stroke etc. I would also create an ArrayList so I can sort the layers by sorting the arrayList.

I've been told to create a class for the drawn objects which would contain a PGraphics property, and also a draw method. While dragging the mouse, I can clear the latest Shape's PGraphic and draw it again.

I just have no idea how!

PS: I will implement other shapes the user can draw but they too need to be objects so I can manipulate them

Here is my code:

ArrayList<PGraphics> layer = new ArrayList();
float startX, startY;

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  background(255);
  for(PGraphics pg : layer) {
    image(pg, 0, 0);
  }
}
void mousePressed() {
  startX = mouseX;
  startY = mouseY;
  PGraphics pg = createGraphics(width, height);
  layer.add(pg);
}

void mouseDragged() {
  // get most recent layer
  PGraphics pg = layer.get(layer.size() - 1);
  shapeLayer.beginDraw();
  shapeLayer.clear();
  shapeLayer.rectMode(CORNERS);
  shapeLayer.rect(startX, startY, mouseX, mouseY);
  shapeLayer.endDraw();
}

kfrajer

I can interact with later to change the fill

For this, it is better to work with the custom class object. If you use a PGraphics, you will not have access to the properties of any shapes drawn on it. Think a PGraphics as parallel canvas where you can draw on and then you can draw it on top of the main canvas of your sketch. However, based on your requirement, the alternative solution is better. There is a bit more work as you need to keep track of all the drawing details yourself. But that is exactly what you want and what you need.

Check these posts for usage of PGraphics. This is to complement this discussion and show their usage:

https://processing.org/reference/PGraphics.html
https://forum.processing.org/two/discussion/20761/set-part-of-pgraphics-transparent#latest
https://forum.processing.org/two/discussion/20797/overlay-transparent-pgraphics#latest

Also it is useful to cross reference your previous post: https://forum.processing.org/two/discussion/21411/for-loop-drawing-pgraphics-in-an-array-processing#latest

Kf

codeav3

@kfrajer what is the "alternative solution". I decided to use PGraphics so I can move the layers around in the ArrayList however, I wasn't aware I wouldn't be able to access the properties of the objects drawn on them.

What would be a better way of approaching the problem?

kfrajer

Your initial suggestion of having a class I think. I will be a good idea to build a quick prototype so you can explore the concept further.

I can see your application being useful. Are you doing this as a side project or part of an assignment for school or university? Just curious....

Kf

codeav3

ahhh man - I feel now I need to start again and I have no idea where to begin :(

its an assignment for university :)

kfrajer

Just start by building a simple example. You need ArrayList, defined your own class, keep track of adding new shapes and their attributes and to continuously draw them in your draw.

Kf

Lord_of_the_Galaxy

Have you thought about using PShape? It may make your work easier, and the sketch will be a fair bit faster.