Eraser?

Programming Questions

TheGamers..

in Programming Questions • 3 years ago

Hey, I'm a very new user to processing and I am trying to make a very basic art program. Right now I want to know how to make an eraser, which starts when you press backspace. I've tried using shapes like the rectangle and the ellipse but they both have a black outline and since I'm using pmouseX & Y the shapes get REALLY deformed. So if you could help please do so.

Thanks,
TheGamersHaven

Replies(11)

cedrickie..

Re: Eraser?

3 years ago

there is now real eraser, what you do in most cases is just redraw with the background color.
You probably already did that. But in your case, you have to add noStroke(); to remove the black outline...

hope that helps.

TheGamers..

Re: Eraser?

3 years ago

Thanks! It does!

amnon.owed

Re: Eraser?

3 years ago

This got me thinking and I made a little proof-of-concept eraser sketch.

It uses a PGraphics canvas and transparency for the erasing

PGraphics canvas;
void setup() {
size(500,500);
smooth();
canvas = createGraphics(width,height,JAVA2D);
canvas.beginDraw();
canvas.smooth();
canvas.endDraw();
}
void draw() {
background(255);
noStroke();
for (int i=0; i<10; i++) {
fill(i*25);
rect(i*width/10,0,width/10,height);
}
image(canvas,0,0);
}
void mouseDragged() {
if (mouseButton == LEFT) { drawFunction(); }
else { noFill(); stroke(0,255,0); ellipse(mouseX,mouseY,50,50); eraseFunction(); }
}
void drawFunction() {
canvas.beginDraw();
canvas.noStroke();
canvas.fill(255,0,0);
canvas.ellipse(mouseX,mouseY,50,50);
canvas.endDraw();
}
void eraseFunction() {
color c = color(0,0);
canvas.beginDraw();
canvas.loadPixels();
for (int x=0; x<canvas.width; x++) {
for (int y=0; y<canvas.height; y++ ) {
float distance = dist(x,y,mouseX,mouseY);
if (distance <= 25) {
int loc = x + y*canvas.width;
canvas.pixels[loc] = c;
}
}
}
canvas.updatePixels();
canvas.endDraw();
}

TheGamers..

Re: Re: Eraser?

3 years ago

Thanks a lot! This answers my question completely. I am going to use this if you don't mind! Oh, and thanks, since you wrote this I can look up what a lot of stuff means which will help me learn more about processing and get me closer to my goal of world domination! Thanks,
TheGamersHaven

d_rock

Re: Re: Eraser?

3 years ago

Hi, I am also a newbie and was thinking about the same problem, My solution was to erase by drawing with the background colour. I came across this post, but the code doesn't seem to work!

it just draws red ellipses on a graded background of grey rectangles when I click.

Am I missing something? I'm using a mac with a trackpad.

Should it erase the red ellipses with an ellipse with a green stroke and no fill when the the mouse button isn't pressed?

There doesn't appear to be any event to make the 'erase mode' activate.

Does 'else' mean "do the following if the left mouse button is not pressed"?

void mouseDragged() {
if (mouseButton == LEFT) { drawFunction(); }
else { noFill(); stroke(0,255,0); ellipse(mouseX,mouseY,50,50); eraseFunction(); }

Also, is there a way to control the interval at which mouseX and mouseY values are produced? They seem to be based on time Millisecond perhaps? Can it be changed?

The faster you draw, more jagged the lines become, and the further apart ellipses become, which can make drawing frustrating...

Thanks

amnon.owed

Re: Eraser?

3 years ago

Glad I could be of assistance. Feel free to use it for whatever you want, however you want, whenever you want!*

* includes plans for global world domination .

TheGamers..

Re: Re: Eraser?

3 years ago

Hi again, would you please explain this part of your script, I understand everything else and have used Processing's references for other things. Here's the part I don't really understand... (I understand some parts but it would be difficult for you, and me, to understand if I told you bits and pieces of it).

void eraseFunction() {
color c = color(0,0);
canvas.beginDraw();
canvas.loadPixels();
for (int x=0; x<canvas.width; x++) {
    for (int y=0; y<canvas.height; y++ ) {
      float distance = dist(x,y,mouseX,mouseY);
      if (distance <= 25) {
        int loc = x + y*canvas.width;
        canvas.pixels[loc] = c;
      }

(P.S. I looked at your blog, you've done a lot of nice work!)

________________________________
Do you know what you just lost?

The Game

amnon.owed

Re: Eraser?

3 years ago

Here is the same function with comments ;-)

void eraseFunction() {
// set a color c which is (0,0) = short for (0,0,0,0) = (black,fully transparant)
color c = color(0,0);
// call beginDraw on the canvas PGraphic
canvas.beginDraw();
// call loadPixels to put all the pixels of the PGraphic in a pixel[] array
canvas.loadPixels();
// FOR x going from 0 to the width of the canvas with steps of 1
for (int x=0; x<canvas.width; x++) {
// FOR every given x, go y from 0 to the height of the canvas with steps of 1
for (int y=0; y<canvas.height; y++ ) {
// x + y together means every pixel on the screen
// for every x,y position, calculate the distance to the current mouse position
float distance = dist(x,y,mouseX,mouseY);
// IF the distance from x,y to mouse is less than or equal to 25
if (distance <= 25) {
// useful way to translate a two-dimensional x,y position into a location on the one-dimensional pixel[]
// because in the pixel[] array all the pixels are just in one long array, read it in the reference
int loc = x + y*canvas.width;
// set the color of this pixel to color c aka transparent (given location x,y AND distance <= 25 to mouse)
canvas.pixels[loc] = c;
}
}
}
// after going through all this, update the pixel[] array to finalise all changes to the array
canvas.updatePixels();
// call endDraw on the PGraphic
canvas.endDraw();
}

So that's the function, it's not the most efficient/optimized. But as a proof-of-concept it's fairly clear how it works.

Also know that variables in a (sub-) function are local variables. For example the distance is gonna be calculated for every single x,y position. See more about global vs local variables.

TheGamers..

Re: Re: Eraser?

3 years ago

Thanks! I understand it a bit more now. Oh, and if you don't mind, will you be willing to answer a few questions from time to time if I have any?

___________________________________________________________________
Do you know what you just lost?

The Game

amnon.owed

Re: Eraser?

3 years ago

That's what this forum is for. Not only will more people have more knowledge, but also other people may benefit from your question and the subsequent answers. The -past- forums are a huge and valuable knowledge resource. Try not to see it like a helpdesk, but like a community sharing knowledge.

So yeah, if you have any questions, check the reference, search the forums and if you can't find an answer, don't hesitate to post them.

TheGamers..

Re: Re: Eraser?

3 years ago

Yah, I was a part of the old forums, but only for a few months before they closed.

___________________________________________________________________
Do you know what you just lost?

The Game

Eraser?

Replies(11)

Re: Eraser?

Re: Eraser?

Re: Eraser?

Re: Re: Eraser?

Re: Re: Eraser?

Re: Eraser?

Re: Re: Eraser?

Re: Eraser?

Re: Re: Eraser?

Re: Eraser?

Re: Re: Eraser?

Statistics

Tags

Actions

Related Posts