this.type = properties.type === 'RECT' ? 'RECT' : 'CIRC';

  this.active = properties.active | false;

  this.x = properties.x | 0;

  this.y = properties.y | 0;

  this.w = properties.w | 32;

  this.h = properties.h | 32;

}

Button.prototype.hit = function(x, y) {

    return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.h;      

}

Button.prototype.draw = function() {

    if(this.type === 'RECT') {

    rect(this.x, this.y, this.w, this.h);

  }

  else {

    ellipse(this.x + this.w / 2, this.y + this.h / 2, this.w, this.h);

  }

}   

​

var buttons;

function setup() {

  createCanvas(600, 600);

  buttons = [];

  buttons.push(new Button({

    type: 'RECT',

    active: true,

    x: 32,

    y: 32,

    w: 64,

    h: 64

  }));

  buttons.push(new Button({

    type: 'CIRC',

    active: true,

    x: 160,

    y: 32,

    w: 64,

    h: 64

  }));

  buttons.push(new Button({

    type: 'RECT',

    active: false,

    x: 32,

    y: 160,

    w: 64,

    h: 64

  }));

  buttons.push(new Button({

    type: 'CIRC',

    active: false,

    x: 160,

    y: 160,

    w: 64,

    h: 64

  }));

}

​

function draw() {

  background(220);

  for(var i = 0; i < buttons.length; i++) {

    var button = buttons[i];

    if(button.hit(mouseX, mouseY) && button.active) {

        fill(0, 102, 153);  

    }

    else {      

      noFill();

      stroke(0, 102, 153);

    }

    button.draw();

  }

}