Feedback for rollover buttons

p5.js Coding Questions
1

HI!

I am not sure if i am doing this right but I wanted to create multiple rollover buttons using overRect() and overCircle()

When I move my mouse over to the other shapes on the canvas, they don’t change colors; however when I scroll over to the smallest rectangle it changes color along with the others. I’m trying to program it to where you can move your mouse to the other shapes and change color just the same as moving to the small rectangle.

this is my program:

let rx = 100;
let ry = 200;
let rw = 150;
let rh = 80;


function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  if (overRect(rx, ry, rw, rh)) {
    fill(0, 102, 153);
  } else {
    noFill();
    stroke(0, 102, 153);
  }
  rect(rx, ry, rw, rh);
  rect(390, 110, 150, 200);
  ellipse(320, 120, 120, 140);
  rect(350, 320, 140, 140);
  ellipse(190, 120, 120, 120);

  function overRect(x, y, w, h) {
    if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
      return true;
    } else {
      return false;
    }
  }
}

Thank you

2

a really dirty really lazy way would be something like this.

function Button(properties) {
  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();
  }
}

basically you want to wrap up the functionality you have at the moment so it can used over multiple instances.