P5Button

// Button Example

var mouseUp = 1;
var bFunction = -1;
var frame = 0;

function setup() {
  	createCanvas(windowWidth, windowHeight);
}

function draw() {
	p5ButtonSetup();
 
 	background(255);

	textSize(14);
	textAlign(LEFT);
  	text("Frame " + frame, 5, 20);

  	if(frane == 0){
  		// code for frame 1 ...	
  	}

  	if(frane == 0){
  		// code for frame 1 ...	
  	}
  	

  	p5Button(width/2, height/ 7, 180, 40, 24, "Save", 0);
}

function bFunction_0(){
	frame = 9;
}

function p5ButtonSetup(){
	if(!mouseIsPressed){
		mouseUp = 0;
	}

	if(mouseUp == 2){
		if(bFunction == 0) bFunction_0();
		/*
		if(bFunction == 0) bFunction_1(); 
		if(bFunction == 0) bFunction_2(); 
		if(bFunction == 0) bFunction_3();
		*/
	}
}

// x, y, width, width, textSize, text, p5ButtonFunction-Number (starts with 0)
function p5Button(bx, by, bw, bh, bts, bt, bN){

  if( (mouseIsPressed)&&(mouseUp == 0) ){
  	if(mouseUp < 1){
    	mouseUp = 1;  		
  	}

    if ( (mouseX>bx-bw/2)&&(mouseX<bx+bw/2)&&(mouseY>by-bh/2)&&(mouseY<by+bh/2) ) {
    	mouseUp = 2;
    	bFunction = bN;
    }else{
    	fill(255);
    }
  }else{
  	fill(255);
  }

  if(mouseUp == 2){
  	fill(155);
  }

  rectMode(CENTER);
  stroke(180);
  rect(bx, by, bw, bh, 5);

  if(bt != ""){
	  textAlign(CENTER);
	  textSize(bts);
	  noStroke();
	  fill(20);
	  text(bt, bx, by + (bts / 3) );
  }
}