1

This is a follow-up of my question: Make the cursor a self-drawn image.

I have a paint a picture application. The latest working version can be found here: https://knowledgeablekangaroo.github.io/paint-a-picture-backup/, where the code can be found in F12 > Sources > paint-a-picture.js.

The user can choose a color, set the background, set the thickness, shape, and opacity. There is also an eraser functionality. I want there to be a better user experience, so I am trying to draw the eraser below as the cursor. If the cursor doesn't work, I need something that doesn't smear.

The way I have programmed it, anywhere inside the "paint area" (above control center and below pallete) will smear - the background() is outside the draw.

var pg = createGraphics(pgDimensions.w, pgDimensions.h, JAVA2D);
pg.beginDraw();
pg.fill(255, 200, 255);
pg.strokeWeight(2);
pg.rect(0, 0, pgDimensions.w, pgDimensions.h);
pg.fill(0);
pg.textAlign(CENTER, CENTER);
pg.text("ERASER", pgDimensions.w / 2, pgDimensions.h / 2);
pg.endDraw();

I used the createGraphics() function to create a PGraphics Object. The point is to show the eraser while This shows the eraser I have drawn in the pGraphic above.

In the drawBrush() function, I make this an image. Eraser

    var drawBrush = function() {
    fill(currentColor);
    noStroke();
    shapes.forEach(function (element, index) {
        if (pshape == index) {
          element.brush();
        }
    });
    if (C === bgColor) {
        image(pg, mouseX - pgDimensions.w / 2, mouseY - pgDimensions.h / 2);
    }
};

Research

This best describes my problem

Community
  • 1
  • 1
Marvin
  • 853
  • 2
  • 14
  • 38

1 Answers1

0

After you have a graphics stored in your pg variable, you can draw that using the image() function:

image(pg, mouseX, mouseY);

Here's a small example that demonstrates what I'm talking about:

var pg;

function setup() {
  createCanvas(400, 400);

  pg = createGraphics(100, 100);
  pg.ellipse(50, 50, 100, 100);
}

function draw() {
  background(220);

  image(pg, mouseX, mouseY);
}
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • I have edited my post. I had already had this code, but it smears like in the picture – Marvin Sep 16 '18 at 15:48
  • @Marvin You need to call `background()` to clear out the old frames. – Kevin Workman Sep 16 '18 at 17:10
  • It still needs to actually erase. Doing that would eraser everything already in the background instead of actually erasing – Marvin Sep 16 '18 at 19:10
  • @Marvin You need to [split this up into smaller steps](https://happycoding.io/tutorials/how-to/program). One step is drawing the eraser. Another step is actually erasing. You might do that by drawing a white rectangle underneath the eraser. – Kevin Workman Sep 16 '18 at 19:16
  • thanks for all the help. I have figured it out. The solution was to make the actual _erasing_ the pgraphic object, and the actual eraser/marker that I am incorporating right now to be a regular command. I got this from the link under the research heading in my question (edited it again), and in the PGgraphic solution in one of the bottom comments in the forum – Marvin Sep 16 '18 at 20:02