Creating A Toolbar & Canvas Sketch

please format your code using the
</> Preformatted text button from the forum edit menu


for all buttons and for a
STATE ( drawing Or Not )
use a boolean function " mouse over rectangle "

boolean drawing = false;
int drawwinx = width/2, drawwiny = 0, drawwinw = width/2, drawwinh = height;

//_check mouse over rect area 
boolean overRect(int x, int y, int w, int h) {
  if ( (mouseX > x) & (mouseX < (x+ w)) & (mouseY > y) & (mouseY < (y+ h)) ) return true;
  return false;
}

void setup() {
  noStroke();
  background(0);
}

void draw() {
  fill(200, 200, 0);                  // button area
  rect(0, 0, width/2, height);

  drawing = overRect(drawwinx, drawwiny, drawwinw, drawwinh);

  if ( drawing ) {
    fill(0, 200, 0);
    circle(mouseX, mouseY, 5);
  }
}

add one button:

//def: drawing area
boolean drawing = false;
int drawwinx = width/2, drawwiny = 0, drawwinw = width/2, drawwinh = height;
//def: toggle button 
int b1x=10, b1y=20, b1w=30, b1h=20;
boolean b1 = false;
//function: check mouse over rect area 
boolean overRect(int x, int y, int w, int h) {
  if ( ( mouseX > x ) & ( mouseX < (x+ w) ) & ( mouseY > y ) & ( mouseY < (y+ h) ) ) return true;
  return false;
}
//function: draw the buttonearea
void draw_buttonarea() {
  fill(200, 200, 0);                  // button area
  rect(0, 0, width/2, height);
  if ( b1 )  fill(0, 200, 0); 
  else       fill(0, 0, 200);
  rect( b1x, b1y, b1w, b1h);
}
//function: draw IN the drawingarea only
void draw_drawingarea() {
  if ( drawing ) {                    // mouse is over drawing area
    if ( b1 )  fill(0, 200, 0);       // button status
    else       fill(0, 0, 200);
    circle(mouseX, mouseY, 5);
  }
}
//_____________________________main
void setup() {
  noStroke();
  background(0);
}

void draw() {
  drawing = overRect(drawwinx, drawwiny, drawwinw, drawwinh);  // check mode
  draw_buttonarea();
  draw_drawingarea();
}

void mousePressed() {
  if ( overRect(b1x, b1y, b1w, b1h) )  println(" button 1 "+(b1 = ! b1));
}

OR draw only on mouse pressed LEFT draw with button color, on RIGHT erase

//def: drawing area
int dwinx = width/2, dwiny = 0, dwinw = width/2, dwinh = height;
//def: a toggle button 
int b1x=10, b1y=20, b1w=30, b1h=20;
boolean b1 = false;                           // toggle button status
//function: check mouse over rect area 
boolean overRect(int x, int y, int w, int h) {
  if (  ( mouseX > x ) && ( mouseX < ( x + w ) ) && 
    ( mouseY > y ) && ( mouseY < ( y + h ) )     ) 
    return true;
  return false;
}
//function: draw the buttonearea
void draw_buttonarea() {              // operation  area
  fill(200, 200, 0);
  rect(0, 0, width/2, height);
  if ( b1 )  fill(0, 200, 0);         // button 1
  else       fill(0, 0, 200);
  rect( b1x, b1y, b1w, b1h);
}
//function: draw with mouse pressed only
void  draw_in_drawingarea() {
  if ( mousePressed && overRect(dwinx, dwiny, dwinw, dwinh) ) {   // over drawing area only
      if ( mouseButton == LEFT ) {
        if ( b1 )  fill(0, 200, 0);                   // button status
        else       fill(0, 0, 200);
      } else       fill(0);                           // erase  on RIGHT   
      circle(mouseX, mouseY, 5);
    }
}
//_____________________________main
void setup() {
  noStroke();
  background(0);
}

void draw() {
  draw_buttonarea();                               // need refresh button color
  draw_in_drawingarea();                           // on mouse pressed only
}

void mousePressed() {
  if ( overRect(b1x, b1y, b1w, b1h) )  println(" button 1 "+(b1 = ! b1));
}

2 Likes