# Feedback for rollover buttons

**URL:** https://discourse.processing.org/t/feedback-for-rollover-buttons/8484
**Category:** Coding Questions
**Created:** [February 17, 2019, 3:07pm UTC](https://discourse.processing.org/t/feedback-for-rollover-buttons/8484 "2019-02-17T15:07:45Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![mmartinez2187](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@mmartinez2187](https://discourse.processing.org/u/mmartinez2187)
#### Post date: [February 17, 2019, 3:07pm UTC](https://discourse.processing.org/t/feedback-for-rollover-buttons/8484/1 "2019-02-17T15:07:46Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [February 21, 2019, 12:33am UTC](https://discourse.processing.org/t/feedback-for-rollover-buttons/8484/2 "2019-02-21T00:33:34Z")

</div>

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

```auto
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.