How to do this code?

ghostwarmen

Hello, I'm working on a code that is a drawing application. I need to have a button on the side that allow me to draw a pattern, and then a button that erases. I already have the clear canvas button, I just need some help figuring out how to complete the application. Here is the code:

//create variables for hsb color values
int  bright, dark;
boolean clearButtonOn; // clear button state
int activeBrush; 
static final int  pattern1=0;   //use as activeBrush state indicator
static final int  erase=1;      //use as activeBrush state indicator
int bwidth, bheight, menuX;  //menu dimensions
int  clearBtnY;  //clear button y postion
int  pattern1BtnY;// pattern1 button y position
int  eraseBtnY; //eraser button y position


void setup () {
    size (400, 300);
    colorMode(HSB);
    background (255, 0, 255);  //white in HSB
    bright=255; dark=180;  //brightness values for HSB hover change
    fill (255, 255,bright);        // start with red meaning it's off
    clearButtonOn=false;
    bwidth=100; bheight=height/3;  //set button width and height
    menuX=width-bwidth;  // x position for menu buttons
    clearBtnY=0;   // y position for clearBtn
    pattern1BtnY=clearBtnY + bheight;  //start y position for pattern1 Btn
    eraseBtnY=clearBtnY + (2* bheight);  //start y position for eraseBtn
    activeBrush=pattern1;
    smooth();
}

void draw () {
   if(clearButtonOn==true){  //check if clear button is active
     clearCanvas(0, 0,width, height);
   }
   drawBrushPattern();
   drawMenu(menuX,0, 100, height);
   //draw menu buttons last
   drawP1Button(menuX, pattern1BtnY, bwidth, bheight);
   drawEraseButton(menuX, eraseBtnY, bwidth, bheight);
   drawClearButton (menuX, clearBtnY,bwidth, bheight);   
}

//test to see what brush is active, call that function
void drawBrushPattern(){

}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawPattern1(){

}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawEraser(){

}
//draw a black rectangle as background for buttons
void drawMenu(int _x, int _y, int _width, int _height){
       fill(0);  //black
       strokeWeight(1);
       stroke(100);
       rect(_x, _y, _width, _height);
}

//draw the pattern for the clearCanvas button, make sure to include hover behavior
void drawClearButton (int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);  //background rect
  stroke(255, 255,bright);
   // check to see if the mouse is over the button
  if ((!mousePressed) && (mouseX > _x && mouseX < (_x + _width) && (mouseY > _y && mouseY < (_y+_height)))){
        stroke(255, 255, dark); // hover color
    }
   //draw button shape - Erase Symbol
    strokeWeight(12);
    float _center=_width/2;
    translate(_x+_center, _y+_center);
    ellipse(0, 0, _width-20,_width-20);
    rotate(degrees(-45));
    rectMode(CENTER);
    rect(0,0,70, 2);
    rectMode(CORNER);
    resetMatrix();
  }

  //draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
  // a different design when activeBrush != pattern1
 void drawP1Button(int _x, int _y, int _width, int _height){


 }

 //draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
  // a different design when activeBrush != pattern1
void drawEraseButton(int _x, int _y, int _width, int _height){
      fill(255);
      rect(_x,_y,_width,_height);

 }

void clearCanvas (int _x, int _y, int _width, int _height) {
     noStroke();
    fill(255,0,255,240);  
    rect (_x, _y, _width, _height );
    clearButtonOn=!clearButtonOn;  //change button state to off   
}

void mouseClicked (){
   //check global dimensions of clear button 
   if (mouseX > menuX && mouseX < (menuX + bwidth) && (mouseY > clearBtnY && mouseY < (clearBtnY+bheight))){
      clearButtonOn=!clearButtonOn;   //change button state to on
      println ("clear button state " + clearButtonOn);
      } 
      //now check to see if mouse is over either other button and if so, then change state 
      //of activeBrush
      /*
      //if mouseX,mouseY on pattern1 : activeBrush==pattern1
     if(){

     }
     //if mouseX,mouseY on erase : activeBrush==erase
     else if(){

     }
      */
    }

Any help would be greatly appreciated! Thank you so much!!

ghostwarmen

Formatted code, easily readable now

BleuBox

You should format that code and put it in between two HTML "pre" tags first so that it is more easily understandable.

BleuBox

Never mind, I was writing that comment right when you reformatted it.

_vk

Do you have an specific point that you need help with?

Otherwise I'd say, split your problems, build/test each part until it's working as you wish, then put all together...

Some more general comments:

if(clearButtonOn==true)

is the same as saying

if(clearButtonOn),

the opposite would be

if(!clearButtonOn).

Whenever you have stuff that "repeats" itself, like several buttons, an OOP approach will make thing easier and more clear.

simple ideas for some parts...

PShape s;  // The PShape object
boolean draw = true, moved = false;

void setup() {  
  size(400, 400, P2D);

  //A cheese shape...
  s = createShape();
  s.beginShape();
  s.noStroke();
  //put the center at center...
  s.translate(-15, -15);
  s.vertex(0, 25);
  s.vertex(15, 0);
  s.vertex(30, 25);
  s.vertex(0, 10);
  s.vertex(30, 10);
  s.vertex(0, 25);
  s.endShape();
  noStroke();
  fill(255);
  background(255);
  rectMode(CENTER);
}

void draw() {
  if (draw && moved) {
    //draw
    color c = color(random(70, 120));
    s.setFill(c);
    shape(s, mouseX, mouseY);
  } else {
    //erase
    rect(mouseX, mouseY, 30, 25);
  }
}

void keyPressed(){
  //draw/erase
  draw = !draw;
}

void mouseMoved(){
  //avoiding first star at 0,0
  moved = true;
}

ghostwarmen

Hello, Thank you for the help. What I'm having trouble with is making the middle button on the side draw small squares when I click on it and having the bottom button on the side erase when I click on it. Think you could help me with that?

Thank you so much!

_vk

'm having trouble with is making the middle button on the side draw small squares when I click on it and having the bottom button on the side erase when I click on it.

err... this is not really specific :)

You should probably look for states, there are plenty of examples in the forum. Like in this post:

http://forum.processing.org/two/discussion/comment/50814/#Comment_50814

But you got all you need already, try to put them together...

You have:

An working button, just make two more...

The idea for drawing and for erasing...

that's it.

Chrisir

//create variables for hsb color values
int  bright, dark;
boolean clearButtonOn; // clear button state
int activeBrush; 
static final int  pattern1=0;   //use as activeBrush state indicator
static final int  erase=1;      //use as activeBrush state indicator
int bwidth, bheight, menuX;  //menu dimensions
int  clearBtnY;  //clear button y postion
int  pattern1BtnY;// pattern1 button y position
int  eraseBtnY; //eraser button y position

boolean painting = false; 

void setup () {
  size (400, 300);
  colorMode(HSB);
  background (255, 0, 255);  //white in HSB
  bright=255; 
  dark=180;  //brightness values for HSB hover change
  fill (255, 255, bright);        // start with red meaning it's off
  clearButtonOn=false;
  bwidth=100; 
  bheight=height/3;  //set button width and height
  menuX=width-bwidth;  // x position for menu buttons
  clearBtnY=0;   // y position for clearBtn
  pattern1BtnY=clearBtnY + bheight;  //start y position for pattern1 Btn
  eraseBtnY=clearBtnY + (2* bheight);  //start y position for eraseBtn
  activeBrush=pattern1;
  smooth();
}

void draw () {
  if (clearButtonOn==true) {  //check if clear button is active
    clearCanvas(0, 0, width, height);
  }
  drawBrushPattern();
  drawMenu(menuX, 0, 100, height);

  //draw menu buttons last
  drawP1Button(menuX, pattern1BtnY, bwidth, bheight);
  drawEraseButton(menuX, eraseBtnY, bwidth, bheight);
  drawClearButton (menuX, clearBtnY, bwidth, bheight);
}

//test to see what brush is active, call that function
void drawBrushPattern() {
  if (activeBrush==pattern1) {
    //
    if (painting) {
      // paint --------------------------------------
      if (activeBrush==pattern1) {
        // 
        for (int i=0;i<2;i++) {
          float  a1=random (-10, 10); 
          float  b1=random (-10, 10); 
          fill(random(255), 234, 144);
          //stroke(0);
          noStroke();  
          rect(mouseX+a1, mouseY+b1, 5, 5);
        }
      }

      else if (true) {
        //
      }
    }
    else if (true) {
      //
    }
  }
}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawPattern1() {
}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawEraser() {
}
//draw a black rectangle as background for buttons
void drawMenu(int _x, int _y, int _width, int _height) {
  fill(0);  //black
  strokeWeight(1);
  stroke(100);
  rect(_x, _y, _width, _height);
}

//draw the pattern for the clearCanvas button, make sure to include hover behavior
void drawClearButton (int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);  //background rect
  stroke(255, 255, bright);
  // check to see if the mouse is over the button
  if ((!mousePressed) && (mouseX > _x && mouseX < (_x + _width) && (mouseY > _y && mouseY < (_y+_height)))) {
    stroke(255, 255, dark); // hover color
  }
  //draw button shape - Erase Symbol
  strokeWeight(12);
  float _center=_width/2;
  translate(_x+_center, _y+_center);
  ellipse(0, 0, _width-20, _width-20);
  rotate(degrees(-45));
  rectMode(CENTER);
  rect(0, 0, 70, 2);
  rectMode(CORNER);
  resetMatrix();
}

//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawP1Button(int _x, int _y, int _width, int _height) {
}

//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawEraseButton(int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);
}

void clearCanvas (int _x, int _y, int _width, int _height) {
  noStroke();
  fill(255, 0, 255, 240);  
  rect (_x, _y, _width, _height );
  clearButtonOn=!clearButtonOn;  //change button state to off
}

void mouseClicked () {
  // are we in the menu 
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // menu ------------------
    //check global dimensions of clear button 
    if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > clearBtnY && mouseY < (clearBtnY+bheight))) {
      clearButtonOn=!clearButtonOn;   //change button state to on
      println ("clear button state " + clearButtonOn);
    } 
    //now check to see if mouse is over either other button and if so, then change state 
    //of activeBrush

    //if mouseX,mouseY on pattern1 
    else if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > pattern1BtnY && mouseY < (pattern1BtnY+bheight))) {
      activeBrush=pattern1;
      println ("YAY");
    }
    //if mouseX,mouseY on erase : activeBrush==erase
    else if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > eraseBtnY && mouseY < (eraseBtnY+bheight))) {
      //
    }
  }
}

void mousePressed() {
  // are we in the menu 
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // menu ------------------
  }
  else 
  {
    painting=true;
  }
} // func 
//
void mouseReleased() {

  painting = false;
}
//

ghostwarmen

Chrisir, thank you for your help. However, I'm still unsure how to make it so when I press the button under the clear button it draws, and if I press the button on the bottom right it erases the drawing. Can you help any with that? Thank you so much!

Chrisir

you wrote

when I press the button under the clear button it draws,

it does just that

when you click that button, it says YAY in the direct window and you can then paint with the mouse (click and hold the mouse button down and draw on the left side).

That's good.

When you want erase do you mean, delete the entire canvas or more like a rubber at mouse pos? The latter is a black circle at mouse pos.

I bet you can do that.

;-)

ghostwarmen

Not delete the entire canvas, similar to erasing something on paper. So would I just make it so when I click the bottom button it allows me to draw over my drawing with white instead of color so it erases the drawing? I'm new to programming so I'm learning very slowly, lol. Thank you for your help!

_vk

Have yo run the sample i posted? Press any key if you do so,,,

GoToLoop

How about this old draw & erase sketch app? :bz
http://forum.Processing.org/two/discussion/598/mousewheel-syntax-question-solved

/** 
 * Drawing & Erasing (v2.45)
 * by  Amnon.Owed & Quadrobite (2013/Aug)
 * mod GoToLoop
 * 
 * forum.Processing.org/one/topic/drawing-application-need-help
 * forum.Processing.org/two/discussion/598/mousewheel-syntax-question-solved
 * forum.Processing.org/two/discussion/12566/how-to-do-this-code
 */

PGraphics canvas;
PImage bg;

int diam = 50;

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

  canvas = createGraphics(width, height);

  canvas.smooth(4);
  canvas.beginDraw();
  canvas.strokeWeight(diam);
  canvas.endDraw();

  bg = createBG(0150);

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

  mouseButton = CENTER;
  mousePressed();
}

void draw() {
  background(bg);
  image(canvas, 0, 0);
  ellipse(mouseX, mouseY, diam, diam);
}

void keyPressed() {
  if (key == CODED)  return;

  canvas.beginDraw();
  canvas.clear();
  canvas.endDraw();

  redraw();
}

void mousePressed() {
  if (mouseButton != CENTER)  return;

  final color c = (color) random(#000000);
  stroke(c);

  canvas.beginDraw();
  canvas.stroke(c);
  canvas.endDraw();

  redraw();
}

void mouseMoved() {
  redraw();
}

void mouseDragged() {
  if (mouseX < 0 | mouseX >= width
    | mouseY < 0 | mouseY >= height)  return;

  if (mouseButton == LEFT)  drawCanvas();
  else                      eraseCanvas();

  redraw();
}

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

  canvas.beginDraw();
  canvas.strokeWeight(diam);
  canvas.endDraw();

  redraw();
}

void drawCanvas() {
  canvas.beginDraw();
  canvas.line(mouseX, mouseY, pmouseX, pmouseY);
  canvas.endDraw();
}

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

  final int xStart, yStart, xEnd, yEnd;

  xStart = max(mx - rad, 0);
  xEnd   = min(mx + rad, cw);

  yStart = max(my - rad, 0);
  yEnd   = min(my + rad, canvas.height);

  for (int y = yStart; y != yEnd; y++) {
    final float myySq = sq(my - y);

    for (int cwy = cw*y, x = xStart; x != xEnd; x++)
      if (sq(mx - x) + myySq <= radSq)  cp[cwy + x] = 0;
  }

  canvas.updatePixels();
}

PImage createBG(int div) {
  int i = div = constrain(div, 1, 0400);

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

  pg.smooth(4);
  pg.beginDraw();
  pg.noStroke();

  while (i-- != 0) {
    pg.fill(i*grey);
    pg.rect(map(i, div, 0, width, 0), 0, wdiv, height);
  }

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

Chrisir

Did you understand the way I work the 2nd button to draw rects....?

Did you run it....?

ghostwarmen

Hey, Yes I did, and I have the eraser button now activated. I'm just having some trouble making it draw white now to erase. Here's the updated code:

//create variables for hsb color values
int  bright, dark;
boolean clearButtonOn; // clear button state
int activeBrush; 
static final int  pattern1=0;   //use as activeBrush state indicator
static final int  erase=1;      //use as activeBrush state indicator
int bwidth, bheight, menuX;  //menu dimensions
int  clearBtnY;  //clear button y postion
int  pattern1BtnY;// pattern1 button y position
int  eraseBtnY; //eraser button y position
 
boolean painting = false; 
 
void setup () {
  size (400, 300);
  colorMode(HSB);
  background (255, 0, 255);  //white in HSB
  bright=255; 
  dark=180;  //brightness values for HSB hover change
  fill (255, 255, bright);        // start with red meaning it's off
  clearButtonOn=false;
  bwidth=100; 
  bheight=height/3;  //set button width and height
  menuX=width-bwidth;  // x position for menu buttons
  clearBtnY=0;   // y position for clearBtn
  pattern1BtnY=clearBtnY + bheight;  //start y position for pattern1 Btn
  eraseBtnY=clearBtnY + (2* bheight);  //start y position for eraseBtn
  activeBrush=pattern1;
  smooth();
}
 
void draw () {
  if (clearButtonOn==true) {  //check if clear button is active
    clearCanvas(0, 0, width, height);
  }
  drawBrushPattern();
  drawMenu(menuX, 0, 100, height);
 
  //draw menu buttons last
  drawP1Button(menuX, pattern1BtnY, bwidth, bheight);
  drawEraseButton(menuX, eraseBtnY, bwidth, bheight);
  drawClearButton (menuX, clearBtnY, bwidth, bheight);
}
 
//test to see what brush is active, call that function
void drawBrushPattern() {
  if (activeBrush==pattern1) {
    if (painting) {
      if (activeBrush==pattern1) {
        for (int i=0;i<2;i++) {
          float  a1=random (-10, 10); 
          float  b1=random (-10, 10); 
          fill(random(255), 234, 144);
          //stroke(0);
          noStroke();  
          rect(mouseX+a1, mouseY+b1, 5, 5);
        }
      }
 
      else if (true) {
        //
      }
    }
    else if (true) {
      //
    }
  }
}
 
// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawPattern1() {
}
 
// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawEraser() {
  if (activeBrush==erase) {
    if (painting) {
      if (activeBrush==erase) {
        for (int i=0;i<2;i++) {
          float  a1=random (-10, 10); 
          float  b1=random (-10, 10); 
          fill(255);
          //stroke(0);
          noStroke();  
          rect(mouseX+a1, mouseY+b1, 5, 5);
        }
      }
 
      else if (true) {
        //
      }
    }
    else if (true) {
      //
    }
  }
}
//draw a black rectangle as background for buttons
void drawMenu(int _x, int _y, int _width, int _height) {
  fill(0);  //black
  strokeWeight(1);
  stroke(100);
  rect(_x, _y, _width, _height);
}
 
//draw the pattern for the clearCanvas button, make sure to include hover behavior
void drawClearButton (int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);  //background rect
  stroke(255, 255, bright);
  // check to see if the mouse is over the button
  if ((!mousePressed) && (mouseX > _x && mouseX < (_x + _width) && (mouseY > _y && mouseY < (_y+_height)))) {
    stroke(255, 255, dark); // hover color
  }
  //draw button shape - Erase Symbol
  strokeWeight(12);
  float _center=_width/2;
  translate(_x+_center, _y+_center);
  ellipse(0, 0, _width-20, _width-20);
  rotate(degrees(-45));
  rectMode(CENTER);
  rect(0, 0, 70, 2);
  rectMode(CORNER);
  resetMatrix();
}
 
//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawP1Button(int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x,_y,_width,_height);
}
 
//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawEraseButton(int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);
}
 
void clearCanvas (int _x, int _y, int _width, int _height) {
  noStroke();
  fill(255, 0, 255, 240);  
  rect (_x, _y, _width, _height );
  clearButtonOn=!clearButtonOn;  //change button state to off
}
 
void mouseClicked () {
  // are we in the menu 
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // menu ------------------
    //check global dimensions of clear button 
    if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > clearBtnY && mouseY < (clearBtnY+bheight))) {
      clearButtonOn=!clearButtonOn;   //change button state to on
      println ("clear button state " + clearButtonOn);
    } 
    //now check to see if mouse is over either other button and if so, then change state 
    //of activeBrush
 
    //if mouseX,mouseY on pattern1 
    else if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > pattern1BtnY && mouseY < (pattern1BtnY+bheight))) {
      activeBrush=pattern1;
      println ("Drawing");
    }
    //if mouseX,mouseY on erase : activeBrush==erase
    else if (mouseX > menuX && mouseX < (menuX + bwidth) && 
      (mouseY > eraseBtnY && mouseY < (eraseBtnY+bheight))) {
        activeBrush=erase;
        println ("Erasing");
      //
    }
  }
}
 
void mousePressed() {
  // are we in the menu 
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // menu ------------------
  }
  else
  {
    painting=true;
  }
} // func 
//
void mouseReleased() {
 
  painting = false;
}

Where it says drawEraser, I'm trying to make it draw white so it acts like an eraser. Other than that and button symbols for drawPattern1Button and drawEraseButton, I have most of this. Thank you so much for your help and everyone else!

Chrisir

//create variables for hsb color values
int  bright, dark;

// button 
boolean clearButtonOn; // clear button state

// consts for activeBrush (see below) 
static final int  pattern1 = 0;   //use as activeBrush state indicator
static final int  erase    = 1;   //use as activeBrush state indicator
static final int  off      = 2;   //use as activeBrush state indicator

// current type/state of the brush 
int activeBrush = pattern1; 

// menu data 
int bwidth, bheight, menuX;  //menu dimensions
int clearBtnY;  //clear button y postion
int pattern1BtnY;// pattern1 button y position
int eraseBtnY; //eraser button y position

// mouse pressed and hold? 
boolean painting = false; 

// ------------------------------------------

void setup () {
  size (400, 300);

  colorMode(HSB);
  background (255, 0, 255);  //white in HSB

  bright=255; 
  dark=180;  //brightness values for HSB hover change

  fill (255, 255, bright);        // start with red meaning it's off
  clearButtonOn=false;

  bwidth=100; 
  bheight=height/3;  //set button width and height

  menuX=width-bwidth;  // x position for menu buttons

  clearBtnY=0;   // y position for clearBtn
  pattern1BtnY=clearBtnY + bheight;  //start y position for pattern1 Btn
  eraseBtnY=clearBtnY + (2* bheight);  //start y position for eraseBtn

  smooth();
}

void draw () {
  if (clearButtonOn) {  //check if clear button is active
    clearCanvas(0, 0, width, height);
  }
  drawBrushPattern(); //depending on what brush is active, we act
  drawMenu(menuX, 0, 100, height);

  //draw menu buttons last
  drawP1Button(menuX, pattern1BtnY, bwidth, bheight);
  drawEraseButton(menuX, eraseBtnY, bwidth, bheight);
  drawClearButton (menuX, clearBtnY, bwidth, bheight);
}

// -------------------------------------------------------------------

//test to see what brush is active, call that function
void drawBrushPattern() {
  if (activeBrush==pattern1) {
    drawPattern1();
  } else if (activeBrush==erase) {
    drawEraser();
  }   
  //
}//func

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawPattern1() {
  if (painting) {
    for (int i=0; i<2; i++) {
      float  a1=random (-10, 10); 
      float  b1=random (-10, 10); 
      fill(random(255), 234, 144);
      //stroke(0);
      noStroke();  
      rect(mouseX+a1, mouseY+b1, 5, 5);
    } // for
  } // if
} // func 

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawEraser() {
  if (painting) {
    fill(255);
    noStroke();  
    ellipse(mouseX, mouseY, 5, 5);
  }// if
} // func 

//draw a black rectangle as background for buttons
void drawMenu(int _x, int _y, int _width, int _height) {
  fill(0);  //black
  strokeWeight(1);
  stroke(100);
  rect(_x, _y, _width, _height);
}

//draw the pattern for the clearCanvas button, make sure to include hover behavior
void drawClearButton (int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);  //background rect
  stroke(255, 255, bright);
  // check to see if the mouse is over the button
  if ((!mousePressed) && (mouseX > _x && mouseX < (_x + _width) && (mouseY > _y && mouseY < (_y+_height)))) {
    stroke(255, 255, dark); // hover color
  }
  //draw button shape - Erase Symbol
  strokeWeight(12);
  float _center=_width/2;
  translate(_x+_center, _y+_center);
  ellipse(0, 0, _width-20, _width-20);
  rotate(degrees(-45));
  rectMode(CENTER);
  rect(0, 0, 70, 2);
  rectMode(CORNER);
  resetMatrix();
}

//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawP1Button(int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);
  fill(255, 2, 2);
  text("Draw", _x+14, _y+31);
  if (activeBrush==pattern1) {
    fill(255, 2, 2);
    text("ON", _x+14, _y+51);
  }
}

//draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
// a different design when activeBrush != pattern1
void drawEraseButton(int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);
  fill(255, 2, 2);
  text("Erase", _x+14, _y+31);
  if (activeBrush==erase) {
    fill(255, 2, 2);
    text("ON", _x+14, _y+51);
  }
}

void clearCanvas (int _x, int _y, int _width, int _height) {
  noStroke();
  fill(255, 0, 255, 240);  
  rect (_x, _y, _width, _height);
  clearButtonOn=!clearButtonOn;  //change button state to off
}

void mouseClicked () {
  // are we in the menu ?
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // yes, menu ------------------
    //check global dimensions of clear button 
    if ( mouseY > clearBtnY && mouseY < (clearBtnY+bheight) ) {
      clearButtonOn=!clearButtonOn;   //change button state to on
      println ("clear button state " + clearButtonOn);
    } 
    //now check to see if mouse is over either other button and if so, then change state 
    //of activeBrush

    //if mouseX,mouseY on pattern1 
    else if (mouseY > pattern1BtnY && mouseY < (pattern1BtnY+bheight)) {
      activeBrush=pattern1;
      println ("Drawing");
    }
    //if mouseX,mouseY on erase : activeBrush==erase
    else if (mouseY > eraseBtnY && mouseY < (eraseBtnY+bheight)) {
      activeBrush=erase;
      println ("Erasing");
      //
    }
    //
  }// if
}

void mousePressed() {
  // are we in the menu ?
  if (mouseX > menuX && mouseX < (menuX + bwidth)) {
    // menu ------------------
  } else
  {
    painting=true;
  }
} // func 

void mouseReleased() {  
  painting = false;
}
//

Chrisir

I did some house cleaning

also the eraser is better now (different from the drawer idea)

;-)