How to do this code?

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!!

Answers

  • edited September 2015

    Formatted code, easily readable now

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

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

  • _vk_vk
    edited September 2015

    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;
    }
    
  • 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!

  • '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.

  • //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;
    }
    //
    
  • 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!

  • edited September 2015

    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.

    ;-)

  • 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!

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

  • edited September 2015

    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();
    }
    
  • Did you understand the way I work the 2nd button to draw rects....?

    Did you run it....?

  • edited September 2015

    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!

  • //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;
    }
    //
    
  • Answer ✓

    I did some house cleaning

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

    ;-)

Sign In or Register to comment.