let x1 = 100, y1 = 100,      w1 =80, h1 =30, sel1 = false;

//  let x2 = x1,  y2 = y1+h1+10, w2 =w1, h2 =h1, sel2 = false;

//___________

function setup() {

  createCanvas(400, 400);

  strokeWeight(3);

  textSize(20);

  //print("while the first button needs 33 lines, \nsee enable 3 lines more and have 2 buttons,\njust with using variables and functions it is already very effective coding.\nnext see http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166");  

}

//___________

function draw() {

  background(200,200,0);

  myButton(x1,y1,w1,h1,sel1,"text1");

//  myButton(x2,y2,w2,h2,sel2,"text2");

}

//___________

function myButton(x,y,w,h,sel,atext) {

  if ( sel )               fill(0,200,0);

  else                     fill(0,0,200);

  if ( over(x,y,w,h) )     stroke(200,0,200);

  else                     stroke(0,200,200);

  rect(x,y,w,h);

  noStroke();

  fill(200);

  text(atext,x+10,y+h-10);

}

//___________         your most needed function: check IF mouse over RECT

function over(x,y,w,h) {

  return ( mouseX > x & mouseX < x + w &  mouseY > y & mouseY < y + h ) ;

}

//___________

function mousePressed() {

  if ( over(x1,y1,w1,h1) ) sel1 = ! sel1;            // button 1 action

//  if ( over(x2,y2,w2,h2) ) sel2 = ! sel2;            // button 2 action

}

​

​