Making a "fat" eraser

Programming Questions

JeffThomp..

in Programming Questions • 1 year ago

Hi all, I'm building a drawing sketch that uses motion tracking to generate drawings. Because I want the video to appear onscreen behind the drawing and because I don't want the video image saved with the drawing, I'm building a separate PGraphics context with the lines and a transparent background. Here's a screenshot:

The problem I'm running into is with erasing: without the video image, I would just draw shapes with the background color... easy. But since I want to clear areas of the PGraphics array, I'm using the following code from another forum post:

drawing.loadPixels();
for (int x=0; x<drawing.width; x++) {
for (int y=0; y<drawing.height; y++) {
float distance = dist(x, y, tipX, tipY);
if (distance <= eraserSize/2) {
drawing.pixels[x+y*drawing.width] = color(0, 0);
}
}
}
drawing.updatePixels();

Via: http://forum.processing.org/topic/eraser

This is great, and works very fast. However, if the cursor moves quickly the erased marks appear as isolated dots, not smooth washes.

I've been trying various methods to clear larger areas, but simple methods like drawing a rectangle with a fill of (0,0) doesn't work, as it is just clear and the lines below show through. Another version, which works ok but is VERY laggy, is this:

drawing.loadPixels();
// get distance between start/end, map to a reasonable value
// (ie: less steps for shorter distances)
int stepSize = int(dist(tipX, prevX, tipY, prevY));
stepSize = int(map(stepSize, 0, width, 1, 10));
// iterate through all steps, erasing a circle at each one
for (int p = 0; p<stepSize; p++) {
float tempX = lerp(tipX, prevX, p);
float tempY = lerp(tipY, prevY, p);
for (int x=0; x<drawing.width; x++) {
for (int y=0; y<drawing.height; y++) {
float distance = dist(x, y, tempX, tempY);
if (distance <= eraserSize/2) {
drawing.pixels[x+y*drawing.width] = color(0, 0);
}
}
}
}
drawing.updatePixels();

This interpolates a bunch of clear circles, but is a total processor hog (and it erases many pixels more than once), especially when also doing blob tracking, etc.

So, my question is two-part:

Any thoughts on an algorithm to write a rectangle of pixels, but at an angle? Doing it horiz/vert is rather easy, but figuring out how to do this at an angle has me stumped (push/popMatrix don't seem to work properly, at least in my code)
Any other ideas of a method for erasing that would be faster?

Thanks!

Replies(4)

quarks

Re: Making a "fat" eraser

1 year ago

In the offscreen context rather than using color(0,0) for the background try using color(255,0) white is transparent white. I have used this to create transparent off-screen buffers (JAVA2D). My page turner sketch used this technique.

The rotated rectangle problem. Assume that the rectangle is centred about position cx,cy and has a rotation of ang radians.

int cx = 140, cy = 100;
int w = 60, h = 20;
float ang = 0.2;
void setup() {
size(400, 400);
}
void draw() {
background(128);
pushMatrix();
translate(cx, cy);
rotate(ang);
rectMode(CENTER);
rect(0, 0, w, h);
popMatrix();
}

benja

Re: Making a "fat" eraser

1 year ago

Hey,

here i another way to make an eraser. Just draw fat lines onto a PGraphics and use it as mask for another PGraphics.
I don't know if this is faster han your current solution, but you could try.

PGraphics canvas, alphaMask;
int lastX, lastY;

void setup() {
size(500, 500);

// create layer for alpha-mask
alphaMask = createGraphics(width, height, JAVA2D);
alphaMask.beginDraw();
alphaMask.strokeWeight(12.0);
alphaMask.strokeCap(ROUND);
alphaMask.background(255);
alphaMask.endDraw();

// create layer wich will be masked
canvas = createGraphics(width, height, P2D);
canvas.beginDraw();
canvas.background(150);
canvas.endDraw();
}

void draw() {
background(255, 0, 0);

// if mouse has moved, draw line to the mask
if (dist(mouseX, mouseY, lastX, lastY)>2) {
    alphaMask.beginDraw();
    alphaMask.line(mouseX, mouseY, lastX, lastY);
    alphaMask.endDraw();

    lastX = mouseX;
    lastY = mouseY;
    // apply mask
    canvas.mask(alphaMask);
}

image(canvas, 0, 0);
}

JeffThomp..

Re: Making a "fat" eraser

1 year ago

@quarks:
I'll have to try the (255,0), but (0,0) doesn't work it just draws a blank/clear rectangle, not set the pixels at that spot to (0,0). I've used the push/popMatrix with rotation before without issue, but what I'm not clear about is if this rotates the pixel array - in other words, is this how I iterate the pixels of rectangle at an angle through the pixel array by hand?

@benja:
I had looked at mask() previously but didn't see how it would work in this context - it appears you have! This might be the easiest code-wise. Your example runs fast on my machine, but I'll have to test it out in my code to see. The benefit to this method is I'm not limited to easy shapes like rect() but could do various brush shapes for the eraser.

EDIT:
It appears that mask() is only available for the P2D renderer, meaning (I think) commands like smooth() and transparency in stroke are not supported. Hmm...

JeffThomp..

Re: Making a "fat" eraser

1 year ago

@benja:
Playing with your example, I can't quite figure out what's happening. How is the red appearing? The stroke color isn't declared and should default to black, right?

If I add some texture to the background, I can see that the lines have a clear background on top of the 'canvas' image:

PGraphics canvas, alphaMask;
int lastX, lastY;
void setup() {
size(500, 500);
// create layer for alpha-mask
alphaMask = createGraphics(width, height, JAVA2D);
alphaMask.beginDraw();
alphaMask.strokeWeight(12.0);
alphaMask.strokeCap(ROUND);
alphaMask.background(255);
alphaMask.endDraw();
// create layer wich will be masked
canvas = createGraphics(width, height, P2D);
canvas.beginDraw();
canvas.loadPixels();
for (int i=0; i<canvas.pixels.length; i++) {
canvas.pixels[i] = color(random(0,255), random(0,255), random(0,255));
}
canvas.updatePixels();
canvas.endDraw();
}
void draw() {
background(255, 0, 0);
// if mouse has moved, draw line to the mask
if (dist(mouseX, mouseY, lastX, lastY) > 2) {
alphaMask.beginDraw();
alphaMask.line(mouseX, mouseY, lastX, lastY);
alphaMask.endDraw();
lastX = mouseX;
lastY = mouseY;
// apply mask
canvas.mask(alphaMask);
}
image(canvas, 0, 0);
}

Maybe the answer is obvious, I just can't seem to get my head around it!

Top Reply