Drawing tool, mouse cursor problem

Processing Coding Questions
1

Hi! I am creating a simple drawing tool.

I hope the user can intuitively know the size of the drawing tool through the cursor. However, the way I use is obscured by the picture in which the cursor is drawn. Is not there a good way?

///////////////////////////////////////////////

PGraphics cursor;
PGraphics draw;

int i = 20;

void setup() {

  size(900, 600);

  cursor = createGraphics(900, 600);
  draw = createGraphics(900, 600);
}

void draw() {

  if (mousePressed==true) {

    draw.noSmooth();
    draw.beginDraw();
    draw.ellipse(mouseX, mouseY, i, i);
    draw.endDraw();
  }

  cursor.noSmooth();
  cursor.beginDraw();
  cursor.background(0);
  cursor.ellipse(mouseX, mouseY, i, i);
  cursor.endDraw();


  image(cursor, 0, 0);
  image(draw, 0, 0);
}


void mouseDragged() {

  cursor(HAND);
}

void mouseReleased() {

  cursor(ARROW);
}

void keyPressed()

{ 
  if (keyCode == 107) {
    i ++;
  }

  if (keyCode == 109) {
    i --;
  }
}
2

I‘m not sure if this is what you mean, But you c an use the noCurser(); method to Hide the curser. (Not your PGraphics, But the actual one).

Or change the Order in draw. You should draw the Curser last, Else your Image might Overlay your Image. But i Would suggest you to look at :
https://processing.org/reference/cursor_.html

BTW, you are creating an ellipse at different positions in your PGraphics, But you should create it at 0 and just change it’s Position afterwards, or actually just use ellipse(mouseX, mouseY, 10, 10);

3

I am sorry that my English is immature.

I would like to have the drawing tool (here ellipse) follow the mouse, keeping the cursor. However, if you place the PG cursor over the PG draw, the background of the PG cursor will cover the PG draw. or the ellipse of the PG cursor will contaminate the PG draw.

4

Now i don‘t know what you mean by contaminate, But just don‘t use PGraphics for your ellipse. There is a Special method (ellipse(0,0,0,0):wink: to draw an ellipse. It‘s much easier and doesn‘t have a background to it.

BTW, what is your draw PGraphics for? It‘s the Same as curser, But without background? Are you sure it‘s curser that Makes the background and not draw?

5

If the ellipse is 30 or 30 red, I want a 30 or 30 red ellipse attached to the mouse cursor. I want it to be variable.

If the position of the ellipse is mouseX, mouseY, then ellipse is drawn continuously. If you delete it with Backgroud, the layers below are hidden, and if you remove Backgroud, the ellipse continues to draw.

The closest correct answer is to raise PG.draw above PG.cursor,
However, in this case, the pixel in PG.draw goes up above PG.cursor and becomes awkward.

6

Ok the answer to your Problem is pretty Long, and since you said you don‘t understand english good, i‘ll Try to make it as easy as possible, But that means i‘ll Have to explain everything from you code, so it will take a while.

First of all, you Need to save your changes in a new PGraphics, lets just call it Canvas.

Then Comes Setup, which is good how it is, just remove the curser PGraphics.

Then in your draw() method, you will want to add background(0); at the beginning.

After Resetting the background, you Need to replace the Canvas image.

After which you want to draw you Curser using the curser(); function and setting it to the Image you want. If you want it to be an ellipse, just do this : curser(ellipse(10,10)).

Then you Need to Color your Canvas.

That‘s basically all for the draw().
Now you can basically remove the keyReleased() method, since it doesn‘t change much.

Edit: if curser(ellipse(10,10)) isn‘t what you want, or isn‘t enough, you can just create another PGraphics like you did calling it curserGraphic and similar to how you did, do

curserGraphics = createGraphics(sizeX, sizeY);
curserGraphics.beginDraw();
curserGraphics.fill(Color);
curserGraphics.ellipse(0,0,sizeX, sizeY);
curserGraphics.endDraw();

And other things you want to add.