​

​

let testButton = new Button("box", 100, 100)

​

testButton.width = 120

testButton.height = 40

​

testButton.text = "BUTTON!1!!"

testButton.textSize = 15

testButton.textColor = [0,0,0] // color objects can only be created within setup, but p5js also accepts arrays for colors

​

testButton.Pfill = testButton.fill

​

testButton.PtextColor = testButton.textColor

​

testButton.render = function(){

  let Htimer = this.timeSinceHoverChange // for convenience

  if(this.hover){

    this.fill = ClerpColor(this.Pfill, [0,0,0], Htimer*2)

    this.textColor = ClerpColor(this.PtextColor, [255,255,255], Htimer*2)

  }else{

    this.fill = ClerpColor(this.Pfill, [255,255,255], Htimer*2)

    this.textColor = ClerpColor(this.PtextColor, [0,0,0], Htimer*2)

  }

  fill(this.fill)

  stroke(this.stroke)

  strokeWeight(this.strokeWeight)

  rect(this.x, this.y, this.width, this.height)

  textAlign(CENTER, CENTER) // aligns the text to the center of the button

  textSize(this.textSize)

  noStroke() // disables drawing the stroke of the text, because it looks bad (in my opinion)

  fill(this.textColor) // sets the text color to be black

  text(this.text, this.x, this.y, this.width, this.height)

}

​

testButton.onHoverBegin = function(){

  cursor(HAND) // sets the mouse cursor to the clicky hand

  this.Pfill = this.fill

  this.PtextColor = this.textColor

}

​

testButton.onHoverEnd = function(){

  cursor() // resets the mouse cursor

  this.Pfill = this.fill

  this.PtextColor = this.textColor

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

}