let HOVER;

​

let mButton;

let toggleColors;

​

function setup() {

  createCanvas(400, 400);

  STATE = 0;

  HOVER = 0;

​

  mButton = {

    x: width / 2 - 50,

    y: 100,

    w: 100,

    h: 50,

  };

​

  toggleColors = [color(230, 0, 30), color(30, 230, 0)];

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(220);

​

  let mColorR = red(toggleColors[STATE]) - 30 * HOVER;

  let mColorG = green(toggleColors[STATE]) - 30 * HOVER;

  let mColorB = blue(toggleColors[STATE]);

​

  fill(mColorR, mColorG, mColorB);

  rect(mButton.x, mButton.y, mButton.w, mButton.h, 5);

​

  fill(0);

  let bText;

  if (STATE == 1) {

    bText = "ON";

  } else {

    bText = "OFF";

  }

​

  text(bText, mButton.x, mButton.y, mButton.w, mButton.h);

}

​

function isOnTop(_button) {

  return (

    mouseX > _button.x &&

    mouseX < _button.x + _button.w &&

    mouseY > _button.y &&

    mouseY < _button.y + _button.h

  );

}

​

function mouseMoved() {

  let hover = isOnTop(mButton);

  if (hover) {

    HOVER = 1;

  } else {

    HOVER = 0;

  }

}

​

function mouseClicked() {

  let hover = isOnTop(mButton);

  if (hover) {

    STATE = 1 - STATE;

  }

}

​