Drawing Application need help !

Programming Questions

curoiusbr..

Drawing Application need help !

in Programming Questions • 1 month ago

Hi,

I need help creating an erase for the this drawing application. It is a simple code and you can see that I have used PGraphics layer where I am drawing which is transparent too. So question is how to create an eraser for this transparent layer ?

I know I can do this other way around but I just want it in this way.

PGraphics fakeLayer;
void setup()
{
size(800, 400);
smooth();
fakeLayer = createGraphics(width, height);
}
void draw()
{
background(255);
grids();
fakeLayer.beginDraw();
if(mousePressed){
fakeLayer.stroke(0);
fakeLayer.line(mouseX, mouseY, pmouseX, pmouseY);
}
fakeLayer.endDraw();
image(fakeLayer, 0, 0);
}
int dodge=50;
void grids() {
for (int i=0;i <width;i+=dodge) {
for (int j=0;j<height;j+=dodge) {
fill(0);
textSize(8);
text("+", i, j);
}
}
}

Replies(9)

PhiLho

Re: Drawing Application need help !

1 month ago

There is no simple way to restore transparency on a PGraphics, not with one of the drawing functions (line(), rect() or similar): if you draw something transparent, it will just not be visible!
I fear the only way (that I can think of) is to load the pixels, access those you want to erase, and set them to a totally transparent color (eg. zero / 0).

hamzeen

Re: Drawing Application need help !

1 month ago

This might do it for you..

PGraphics fakeLayer;

void setup() {

size(800, 400);

smooth();

fakeLayer = createGraphics(width, height);

}

void draw() {

background(255);

grids();

fakeLayer.beginDraw();

if(mousePressed) {

fakeLayer.stroke(0);

fakeLayer.line(mouseX, mouseY, pmouseX, pmouseY);

}

fakeLayer.endDraw();

image(fakeLayer, 0, 0);

}

void keyPressed() {

fakeLayer.clear();

}

int dodge=50;

void grids() {

for (int i=0;i <width;i+=dodge) {

for (int j=0;j<height;j+=dodge) {

fill(0);

textSize(8);

text("+", i, j);

}

curoiusbr..

Re: Drawing Application need help !

1 month ago

@hamzeen Thanks for you reply :) ... but here I don't want to clear the whole screen.

@ Philo .. Amazing ! reloading the pixels nice idea. Now I have to see how to reload the pixel of certain area..... Thanks again :)

XYZZY

Re: Drawing Application need help !

1 month ago

Check out this post where amnon.owed gives a good solution: http://forum.processing.org/topic/eraser.

I have been messing around with this for a couple of months. This is the best I've found so far. It is a bit jumpy on larger images. I did modify it a bit to erase after the mouse has moved a certain amount in the mouseDragged() function. That helps a little on the jumpiness.

I am hoping to use a dynamic mask to recreate this erase function, but haven't had any luck so far.

curoiusbr..

Re: Drawing Application need help !

1 month ago

Thanks a lot Quadrobite that is what I wanted :) :)

curoiusbr..

Re: Drawing Application need help !

1 month ago

Those who want........... "THANKS to amnon.owed "

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();
}

ERASE 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();
}

XYZZY

Re: Drawing Application need help !

1 month ago

I modified the code amnon.owed wrote so that it doesn't loop through the entire pixel array, but only the bounds of the array occupied by the cursor brush. This makes for a much quicker function, especially on larger images. I also made the cursor brush diameter changeable with the mouse wheel. This code is also easy to modify to erase a specific color or replace a color with another. Here's the code:

import java.awt.event.*; //required for mouse wheel
PGraphics canvas;
int diameter;
void setup() {
size(500, 500);
mouseWheelSetup();
smooth();
canvas = createGraphics(width, height, JAVA2D);
canvas.beginDraw();
canvas.smooth();
canvas.endDraw();
diameter = 50;
}
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);
noFill();
stroke(0, 255, 0);
ellipse(mouseX, mouseY, diameter, diameter);
}
void mouseDragged() {
if (mouseButton == LEFT) {
drawFunction();
}
else {
eraseFunction();
}
}
void drawFunction() {
canvas.beginDraw();
canvas.stroke(255,0,0);
canvas.strokeWeight(diameter);
canvas.line(pmouseX, pmouseY, mouseX, mouseY);
canvas.endDraw();
}
void eraseFunction() {
// establish variables for bounds of brush
int xStart, yStart, xEnd, yEnd;
xStart = int((mouseX)-diameter/2);
if (xStart<0) xStart=0; //prevents going out of bounds of pixel array X minus
yStart = int((mouseY)-diameter/2);
if (yStart<0) yStart=0; //prevents going out of bounds of pixel array Y minus
xEnd = int((mouseX)+diameter/2);
if (xEnd>width) xEnd=width; //prevents going out of bounds of pixel array X positive
yEnd = int((mouseY)+diameter/2);
if (yEnd>height) yEnd=height; //prevents going out of bounds of pixel array Y positive
color c = color(0, 0);
canvas.loadPixels();
for (int x=xStart; x<xEnd; x++) {
for (int y=yStart; y<yEnd; y++ ) {
float distance = dist(x, y, mouseX, mouseY);
if (distance <= diameter/2) {
int loc = x + y*canvas.width;
canvas.pixels[loc] = c;
}
}
}
canvas.updatePixels();
}
void mouseWheelSetup() {
addMouseWheelListener(new MouseWheelListener() {
public void mouseWheelMoved(MouseWheelEvent mwe) {
mouseWheel(mwe.getWheelRotation());
}
}
);
}
void mouseWheel(int delta) {
// changes brush diameter with mouse wheel
diameter= diameter + (delta*5);
if (diameter <= 1) diameter = 1;
if (diameter >= 100) diameter = 100;
}

GoToLoop

Re: Drawing Application need help !

1 month ago

Hey! I've did some tweaks as well. And included a random change color feature. Check it out:

/** 
 * Drawing & Erasing (v2.13)
 * by Amnon.Owed & Quadrobite (2013/Aug)
 * mod GoToLoop
 * 
 * http://forum.processing.org/topic/drawing-application-need-help
 */

import java.util.Arrays;

PGraphics canvas;
PImage bg;

int diam = 50;
color c = #FF0000;

void setup() {
  size(800, 600);
  noLoop();
  noFill();

  canvas = createGraphics(width, height);

  canvas.beginDraw();
  canvas.smooth();
  canvas.endDraw();

  bg = createBG(25);


  mouseX = width>>1;
  mouseY = height>>1;
}

PImage createBG(int div) {
  final PGraphics pg = createGraphics(width, height);
  final int wdiv = width/div, grey = 0400/div;

  pg.beginDraw();

  pg.background(0);
  pg.noStroke();

  for (int i = div + 1; i-- != 0;) {
    pg.fill(i*grey);
    pg.rect(i*wdiv, 0, wdiv, height);
  }

  pg.endDraw();
  return pg.get();
}

void draw() {
  background(bg);
  image(canvas, 0, 0);

  stroke(c); 
  ellipse(mouseX, mouseY, diam, diam);
}

void keyPressed() {
  canvas.loadPixels();
  Arrays.fill(canvas.pixels, 0);
  canvas.updatePixels();

  redraw();
}

void mousePressed() {
  if (mouseButton == CENTER)   c = (color) random(#000000);

  redraw();
}

void mouseMoved() {
  redraw();
}

void mouseDragged() {
  if (mouseButton == LEFT)   drawCanvas();
  else                       eraseCanvas();

  redraw();
}

void mouseWheel(MouseEvent me) {
  final int inc = keyPressed & keyCode == CONTROL ? -1 : -5;
  diam = constrain(diam + (int) me.getAmount() * inc, 1, 100);

  redraw();
}

void drawCanvas() {
  canvas.beginDraw();

  canvas.stroke(c);
  canvas.strokeWeight(diam);
  canvas.line(pmouseX, pmouseY, mouseX, mouseY);

  canvas.endDraw();
}

void eraseCanvas() {
  final int cp[] = canvas.pixels, cw = canvas.width;
  final int rad  = diam>>1, mx = mouseX, my = mouseY;

  int xStart, yStart, xEnd, yEnd;

  if ((xStart = mx - rad) < 0)     xStart = 0;
  if ((yStart = my - rad) < 0)     yStart = 0;
  if ((xEnd = mx + rad) > width)   xEnd = width;
  if ((yEnd = my + rad) > height)  xEnd = height;

  canvas.loadPixels();

  for (int x=xStart; x!=xEnd; x++)   for (int y=yStart; y!=yEnd; y++)
    if (dist(x, y, mx, my) <= rad)   cp[x + y*cw] = 0;

  canvas.updatePixels();
}

XYZZY

Re: Drawing Application need help !

1 month ago

That's cool. I'm still learning syntax and the different ways of coding. You wrote some lines up that were new approaches to me.

Top Reply