Make an eraser in my paint program

lkvideorang

Hello everyone, I am trying to implement an eraser into this program, it wouldn't be too hard except I need it to become the color of the background, which switches to the brush color when you press P. When you hit e it turns eraser on and when you hit E it turns off. I'm really confused and frustrated!

Also if you can, don't just give me the code, maybe point me in the right direction because I really want to learn it or do part of it with my own brain power.

float h = 0;   //hue
float s = 255; //saturation
float b = 255; //brightness
float a = 255; //alpha/transparency
int stroke = 0;//line thickness
int n = 1;     //saving files

void setup()
{

  size(500, 500);
  background(255);
  colorMode(HSB);

}

void draw() 
{

  fill(h, s, b, a);    // creates a box that displays the current color
  rectMode(CENTER);
  rect(width * 0, height * 0, 30, 30);

}

void keyPressed()
{
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the hue of the brush
  //
  if (key == 'H')    //increase hue
  {
    h = h + 1;
    if (h > 255)
      h = 0;
  }

  if (key == 'h')    //decrease hue
  {
    h = h - 1;
    if (h < 0)
      h = 255;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the saturation of the brush
  //
  if (key == 'S')    //increase saturation
  {
    s = s + 1;
    if (s > 255)
      s = 0;
  }

  if (key == 's')    //decrease saturation
  {
    s = s - 1;
    if (s < 0)
      s = 255;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the brightness of the brush
  //
  if (key == 'B')    //increase brightness
  {
    b = b + 1;
    if (b > 255)
      b = 0;
  }


  if (key == 'b')    //decrease brightness
  {
    b = b - 1;
    if (b < 0)
      b = 255;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes transparency of the brush
  //
  if (key == 'A')    //increase alpha
  {
    a = a + 1;
    if (a > 255)
      a = 0;
  }


  if (key == 'a')    //decrease alpha
  {
    a = a - 1;
    if (a < 0)
      a = 255;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Clears the screen and makes the background white again
  //
  if (key == 'c')    //clear the screen
  {
    background(255);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Makes the background the color of the brush
  //
  if (key == 'p')    //makes the background the color that is currently in use
  {
    background(h, s, b);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the size of the brush
  //
  if (key == '0')
  {
    strokeWeight(stroke);
  } else if (key == '1')
  {
    strokeWeight(stroke + 1);
  } else if (key == '2')
  {
    strokeWeight(stroke + 2);
  } else if (key == '3')
  {
    strokeWeight(stroke + 3);
  } else if (key == '4')
  {
    strokeWeight(stroke + 4);
  } else if (key == '5')
  {
    strokeWeight(stroke + 5);
  } else if (key =='6')
  {
    strokeWeight(stroke + 6);
  } else if (key == '7')
  {
    strokeWeight(stroke + 7);
  } else if (key == '8')
  {
    strokeWeight(stroke + 8);
  } else if (key == '9')
  {
    strokeWeight(stroke + 9);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Saves a screenshot of the painting
  //
  if (key == 'w')    //saves a screenshot of the painting and numerates the files as save1, save2, save3.... etc.
  {
    save("save" + n + ".png" );
    n = n + 1;
  }
}
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a line when the mouse is held down
  //
void mouseDragged()  //draws a line where the users mouse is
{

  stroke(h, s, b, a);   //determines color of line
  line(pmouseX, pmouseY, mouseX, mouseY);   //draws at the mouses location
  println(h, s, b);

}
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a dot when the mouse is only pressed
  //
  void mousePressed()
{
  stroke(h, s, b, a);
  line(pmouseX,pmouseY,mouseX,mouseY);
}

this is my first post, I apologize in advance for formatting errors or if this isn't in the right place.

GoToLoop

http://forum.processing.org/two/discussion/598/mousewheel-syntax-question-solved

lkvideorang

Thank you for the response, however that type of erasing isn't what I am looking for. I need it to go from the paintbrush to the eraser with the push of a button (and stay eraser until another button is hit). It also needs to take the current background color and use it so the eraser doesnt just always paint white.

I could be missing something in your code though, my class hasnt gotten too far so there were some things I'm not really allowed to use.

_vk

You could store the bg color whenever it is set ('p' is pressed), like

    if (key == 'p')    //makes the background the color that is currently in use
  {
     bgColor = color(h, s, b); //global var to hold bg color
      background(bgColor);
  }

In draw you would have

 fill(fgColor); //fgColor, global var to hold painting color

Then when erase key is pressed:

    if (key == 'e')    
  {
     fgColor = bgColor; 
  }

And when eraser is set to off, re assign h, s, b, a to fgColor.

fgColor = color(h, s, b, a);

And when changing the color (hH/sS/bB/aA keys), update fgColor

  if (key == 'S')    //increase saturation
  {
    s = s + 1;
    if (s > 255)
      s = 0;
   fgColor = color(h, s, b, a); //update color
  }

GoToLoop

A tip: All that '0' - '9' block can be replaced by: O:-)
if (key >= '0' & key <= '9') strokeWeight(key - '0');

MenteCode

@GotoLoop Correct me if I'm wrong, but I don't think that a bit-wise AND would work in that if-statement. :-B

And again, I've been wrong before.

GoToLoop

Just like the + operator is overloaded to concatenate rather than adding when at least 1 of the operands happens to be a String, the 3 following bitwise operators & | ^ are overloaded as well to coerce the operands' types when they're both boolean! :-B

But w/ a catch, no short-circuiting! Both operands are eagerly evaluated.
Also, bitwise operators got a higher precedence over logical 1s! =:)

P.S.: That works across most C-derived languages, like C++, D, JS, C#, Java, etc. :P

GoToLoop

Some boolean examples for ^ bitwise operator w/ =, which doesn't have a corresponding ^^ logical 1:

---

void mousePressed() {
  if (isLooping ^= true)  loop();
  else                    noLoop();
}

---

void keyPressed() {
  if (isPaused ^= keyCode == 'P')  noLoop();
  else                             loop();
}

---

void keyPressed() {
  int k = keyCode;

  if (k == ENTER | k == RETURN)  frameRate((turbo ^= true)? FPS<<2 : FPS);
  else if (k == CONTROL | k == 'T')  teleport();
  else if (k == DELETE  | k == ALT)  reset();
  else if (k == SHIFT   | k == ' ')  rogue ^= true;
  else setDirection(k, 1);
}

---

MenteCode

@GoToLoop: Oh yeah! I forgot about that. Thanks for the reminder.

lkvideorang

_vk, thank you for your answer, it looks pretty solid but I cannot get it to work. Do I need to establish the global variables somewhere else because it keeps saying it cant find them (fgColor and bgColor). And when I put them as global the square that shows what color the pen is is always black!

Thanks again!

GoToLoop

If a variable is supposed to be accessed by multiple functions and/or needs to remember its previous value, it's advisable to declare them as "global".

Beware though not to re-declare them inside functions or other scopes.
That will turn them into local variables to that scope and temporarily overshadow the corresponding "global" 1s!

lkvideorang

Also to note, fgColor is always appearing as -1.6711681E7 when I print its value. WAHTT

and thanks GoToLoop, I formatted my code

/*  September 23rd, 2014 
 ProcPaint by Lucas Kern
 Paints with a variety of tools
 */

float h = 0;   //hue
float s = 255; //saturation
float b = 255; //brightness
float a = 255; //alpha/transparency
int stroke = 0;//line thickness
int fNum = 1;     //saving files
float fgColor = color(h, s, b, a); //stores pen color
float bgColor = color(h, s, b); //stores background color

void setup()
{
  println(fgColor);
  size(500, 500);
  background(h,0,b);
  colorMode(HSB);
}

void draw() 
{
  fill(h, s, b, a);    // creates a box that displays the current color
  rectMode(CENTER);
  rect(width * 0, height * 0, 30, 30);
}

void keyPressed()
{

  //float bgColor = color(h,s,b);

  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the hue of the brush
  //
  if (key == 'H')    //increase hue
  {
    h = h + 1;
    if (h > 255)
      h = 0;
    fgColor = color(h, s, b, a); //update color
  }

  if (key == 'h')    //decrease hue
  {
    h = h - 1;
    if (h < 0)
      h = 255;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the saturation of the brush
  //
  if (key == 'S')    //increase saturation
  {
    s = s + 1;
    if (s >= 255)
      s = 255;
    fgColor = color(h, s, b, a); //update color
  }

  if (key == 's')    //decrease saturation
  {
    s = s - 1;
    if (s <= 0)
      s = 0;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the brightness of the brush
  //
  if (key == 'B')    //increase brightness
  {
    b = b + 1;
    if (b >= 255)
      b = 255;
    fgColor = color(h, s, b, a); //update color
  }


  if (key == 'b')    //decrease brightness
  {
    b = b - 1;
    if (b <= 0)
      b = 0;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes transparency of the brush
  //
  if (key == 'A')    //increase alpha
  {
    a = a + 1;
    if (a >= 255)
      a = 255;
    fgColor = color(h, s, b, a); //update color
  }


  if (key == 'a')    //decrease alpha
  {
    a = a - 1;
    if (a <= 0)
      a = 0;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Clears the screen and makes the background white again
  //
  if (key == 'c')    //clear the screen
  {
    background(255);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Makes the background the color of the brush
  //
  if (key == 'p')    //makes the background the color that is currently in use
  {
    background(fgColor);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the size of the brush
  //
  if (key >= '0' & key <= '9')  strokeWeight(key - '0');
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Saves a screenshot of the painting
  //
  if (key == 'w')    //saves a screenshot of the painting and numerates the files as save1, save2, save3.... etc.
  {
    save("save" + fNum + ".png" );
    fNum = fNum + 1;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Makes the pen an eraser that works againstr all background colors
  //
  if (key == 'e')    
  {
    fgColor = bgColor;
  }

  if (key == 'E')
  {
    fgColor = color(h, s, b, a);
  }
}
//
//-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a line when the mouse is held down
//
void mouseDragged()  //draws a line where the users mouse is
{

  stroke(fgColor);   //determines color of line
  line(pmouseX, pmouseY, mouseX, mouseY);   //draws at the mouses location
}
//
//-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a dot when the mouse is only pressed
//
void mousePressed()
{
  stroke(fgColor);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

There may be something really weird in there at this point, I keep changing things because everytime something wrong happens. ill probably go back to a previous version tonight and add only whats needed. Still doesnt work

_vk

From:

http://processing.org/reference/color_datatype.html

sing print() or println() on a color will produce strange results (usually negative numbers) because of the way colors are stored in memory…

Read the link for further explanation.

Also you should define the color after changing the colorMode.

adapted code:

float h = 0;   //hue
float s = 80; //saturation
float b = 84; //brightness
float a = 100; //alpha/transparency
int stroke = 0;//line thickness
int fNum = 1;     //saving files
color fgColor; //stores pen color
color bgColor; //stores background color

void setup()
{
  println(fgColor);
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  fgColor = color(h, s, b, a); //stores pen color
  bgColor = color(0, 0, 100, 100); //stores background color
  background(bgColor);
}

void draw() 
{
  noStroke();
  fill(fgColor);    // creates a box that displays the current color
  rectMode(CENTER);
  rect(width * 0, height * 0, 30, 30);
}

void keyPressed()
{

  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the hue of the brush
  //
  if (key == 'H')    //increase hue
  {
    h = h + 1;
    if (h > 360)
      h = 0;
    fgColor = color(h, s, b, a); //update color
  }

  if (key == 'h')    //decrease hue
  {
    h = h - 1;
    if (h < 0)
      h = 360;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the saturation of the brush
  //
  if (key == 'S')    //increase saturation
  {
    s = s + 1;
    if (s >= 100)
      s = 0;
    fgColor = color(h, s, b, a); //update color
  }

  if (key == 's')    //decrease saturation
  {
    s = s - 1;
    if (s <= 0)
      s = 100;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the brightness of the brush
  //
  if (key == 'B')    //increase brightness
  {
    b = b + 1;
    if (b >= 100)
      b = 0;
    fgColor = color(h, s, b, a); //update color
  }


  if (key == 'b')    //decrease brightness
  {
    b = b - 1;
    if (b <= 0)
      b = 100;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes transparency of the brush
  //
  if (key == 'A')    //increase alpha
  {
    a = a + 1;
    if (a >= 100)
      a = 0;
    fgColor = color(h, s, b, a); //update color
  }


  if (key == 'a')    //decrease alpha
  {
    a = a - 1;
    if (a <= 0)
      a = 100;
    fgColor = color(h, s, b, a); //update color
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Clears the screen and makes the background white again
  //
  if (key == 'c')    //clear the screen
  {
    background(bgColor);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Makes the background the color of the brush
  //
  if (key == 'p')    //makes the background the color that is currently in use
  {
    bgColor = fgColor;
    background(bgColor);
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Changes the size of the brush
  //
  if (key >= '0' & key <= '9')  strokeWeight(key - '0');
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Saves a screenshot of the painting
  //
  if (key == 'w')    //saves a screenshot of the painting and numerates the files as save1, save2, save3.... etc.
  {
    save("save" + fNum + ".png" );
    fNum = fNum + 1;
  }
  //
  //-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Makes the pen an eraser that works againstr all background colors
  //
  if (key == 'e')    
  {
    fgColor = bgColor;
    println("*");
  }

  if (key == 'E')
  {
    fgColor = color(h, s, b, a);
  }
}
//
//-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a line when the mouse is held down
//
void mouseDragged()  //draws a line where the users mouse is
{

  stroke(fgColor);   //determines color of line
  line(pmouseX, pmouseY, mouseX, mouseY);   //draws at the mouses location
}
//
//-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| Draws a dot when the mouse is only pressed
//
void mousePressed()
{
  stroke(fgColor);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

GoToLoop

Also to note, fgColor is always appearing as -1.6711681E7 when I print its value. WAHTT

For a neater hex representation, try out println("#" + hex(fgColor, 6));.

• http://processing.org/reference/color_datatype.html
• http://processing.org/reference/hex_.html

lkvideorang

Thank you so much _vk, that works beautifully. I talked to my teacher about this on Friday and he told me to use something more like h1,s1,b1,a1 to store the pen and background color because color() was a more advanced topic. Still thanks alot, really helps me out!